Only pixels matter.
When determining the correct size for an image intended for the web, the only numbers that matter are pixels (px) - how many pixels tall and how many pixels wide the image is. A pixel, in this case, is essentially a dot of color.
The number of pixels inside of an image is the image size and the number of pixels that are packed in a square inch when you print that image is the resolution.
Resolution is meaningless on the web because the device (monitor, phone, etc.) that you are using to view the image will determine its resolution. An old 17" CRT computer monitor was generally 1024px wide and 768px tall. Today's tablets have the same number of pixels in a much smaller physical size => more dots per inch => higher resolution.
So - when you are planning on using an image on the web, pay attention to its size in pixels.
How to find out the size (in pixels) of an image on the web
Let's say you have a Drupal site and don't remember what size your home page image is supposed to be. If you have Firefox installed, it's really straightforward.
- Right-click the image when viewing the web page in Firefox.
- Choose 'View Image'. This opens the image by itself in a tab.
- Look at the top of the browser window. It will have the file name followed by the dimensions of the image in pixels. You can try this with the 200 x 200-pixel image above.
What is a good size?
The best size of an image will depend on how you plan on using it. A&S Computing Drupal 7 sites are 960 pixels wide, so that is the widest image you would need in a Department, Program, or Center website. If you are floating an image in the text of a page with the text wrapping to the right or left, generally you want the image to be 200 - 300 pixels wide.
Image file types for the web
Most images on the web still fall into one of three types:
- jpg (or jpeg) = use for photos and images with a lot of different colors but no transparency
- png = use for images with transparent backgrounds. Not rendered correctly in some older browsers like IE 6.
- gif = not recommended. png is better. Never use for photos since the max number of colors is 256.
Note: jpg and jpeg are the same image type. At one point some companies decided on three-letter file extensions while others used four.
Resizing versus Cropping
When saving images for any purpose, you will hear two major terms for changing the size of an image: resizing and cropping. Resizing changes the size of an image while keeping the same height to width ratio. If you started with a rectangular image and you resize it to make it smaller, you will still have a rectangle with the same ratio, not a square.
If you need an image to be an exact set of dimensions, you will probably need to crop it. Cropping removes portions of the image and can change the width to height ratio.
You will generally use both of these methods if you need a series of images that are all exactly the same size (e.g. images in a slideshow, profile photos of faculty).
Note: you should very rarely make an existing image larger. An image only contains so much information, and if you enlarge an existing image, it will often look fuzzy or pixelated.
So what do I use?
Web Resizer is a free online tool for resizing, cropping, and optimizing images for the web. You don't need to download any special software - just upload your image and get started.
- To resize, change the number of pixels in the "new size" text box.
- To crop, click the "crop image" link below the upload field.
- Make your changes, click "apply changes", and then click "download this image."
Web Resizer is also the absolute easiest tool we've found for making images with curved corners. In the "Border" section, click the radio button next to the circle and enter a number greater than zero in the text box. (See the image to the right.)
The only disadvantage of Web Resizer is that it only accepts images up to 5MB, so if you are starting with a really large image, you won't be able to use it.
GIMP is an open-source (free) image editing application similar to Adobe Photoshop. Learn how to resize/crop in GIMP.
Adobe Photoshop is commercial image editing software. It is relatively expensive although there are simpler, less expensive versions such as Photoshop Elements that generally have all the functionality you'll need. If you already own Photoshop, it is a fantastic tool. It is also available in the A&S Creative Lab as well as some of our classrooms.
In newer versions, resizing and saving an image optimized for web can be done in one simple step.
- With your image open, select File->Save for web. A new dialog box will open.
- Pick a good file type from the drop-down at the top. (See section above - will probably be jpeg)
- Change the width (in pixels) under Image Size and let the height auto populate.
- The rest of the default settings are usually fine. Click save.
Cropping is slightly more complicated because you will need to select the area of the image you wish to keep. A selection is used to designate an area of an image to be modified. The area outside the dotted selection border is protected while the area inside the dotted selection border is edited.
- Select the rectangular marquee from the Tools menu.
- The options for the tool you have selected will display in the options bar at the top of the window. If you want full control of selecting, make sure the Style drop-down is set to 'Normal.'
- Click and drag the selection over the portion of the image you wish to keep. Hint: Start at the upper left-hand corner. If you make a mistake, just de-select using Ctrl+D (Select > Deselect).
- After you have selected the portion of the image to keep, go to the Image menu and choose 'Crop.'
- Your new cropped image should display. You will still need to save it following the directions above for resizing.
You can experiment with other options in the select option bar: select using a fixed aspect ratio (e.g. 1:1 for squares), select using a specific size, and add to and subtract from existing selections.
Picasa is a free tool from Google. It has a small number of editing tools that are fairly easy to use. It's useful if you have a number of photos that all need to be resized to the same width.
- Open Picasa and select several photos by clicking and holding down Ctrl (PC) or command key (Apple).
- Go to File and choose "Export Picture to Folders."
- Choose the location you want to save the pictures
- Under "Image Size, choose "resize." enter the number of pixels wide you want the images to be.
Note: This will make all of the selected images the same width but the height of each image will be relative to the width. If the heights are different in the original images, they will still be different. This doesn't automatically crop them.
In Drupal 7, most images are automatically cropped and resized when they are uploaded or displayed. You may need to crop/resize slideshow images for the home page before uploading them.
You may now resize AND crop inline images that you have uploaded into Drupal. Learn how to resize/crop inline images within Drupal 7 after uploading.