How to Optimize Images for the Web
What do we mean by optimizing image files?
Optimizing image files refers to having an image file have the least amount of kilobytes of space on the computer yet keep much of its resolution or clarity. Many people think that they just have to reduce the physical size of the image and that their job is done for preparing the image for the Internet. But most of the time, this is far from the case. Your file can still take up more space on the server than what is necessary. If you have many pictures like this, it can add up to a big draw on the server and slower load times for your website page. You could even run the risk of running out of bandwidth on your site or being stuck with expensive bandwidth charges.
So this is a very important issue, which needs to be immediately addressed in order to make sure your website is operated affordably and is not taken down by your host company.
It is important to understand that there are two ways to measure the size of an image file: dimensions and weight. The dimension of the images is usually measured in pixels. To be able to change your mindset from inches to pixels, note that there are 96 pixels in an inch. Pixels should not be confused with points. Font sizes are normally measured in points. There are 72 points to an inch. The other measure of the size of an image is weight. Weight is simply the amount of kilobytes or megabytes of computer space an image file is taking up.
In this article we will teach you the basics of how to optimize images for web.
But wait! Your image-optimization-for-the-web job is not finished till you address the SEO issues concerning images. Since search engine spiders cannot see images like humans can, you will need to have good alt tags associated with your images and a good file name that would make since to search engines. Creating an image site map can also help in getting your images indexed by Google.
We will be teaching you how to optimize images using Photoshop. If you do not have Photoshop, there is list of free image optimizing sites at the end of this article. If you are using another image compressor, you can refer to the instructions that follow as a guideline for general principles of image compressing and optimizing.
Optimizing Images Using Photoshop
The first step in preparing the image
- First you import the image into Photoshop by opening Photoshop then clicking on the File drop down menu, and then on Open.
- Now that you have the image file open in the Photoshop editor, the first thing you probably want to do is make the dimensions of the image smaller.
If the image was created with a digital camera, it is probably a very large size.
- Click on the Image drop down menu, and then click on Image size.
- Once the dialog box appears, make sure the “Constrain Proportions” check box is checked. This will assure that the picture will shrink down proportionately.
- Also set the Resolution to 72 pixels per inch. That is the resolution of a web screen.
- Now you can resize the image to a smaller dimension.
The width could be somewhere between 100 and 500 pixels wide, unless the picture is going to take up most of the screen, then it would be about 1000 pixels wide. Since you set the image size to change with “Constrained Proportions,” the height of the image will automatically shrink in proportion to the width. You can play with the width till you get it to a size that looks good to you. If you already know the final width, so much the better.
- Now only half your work is done. This is only the first way to reduce the size of an image.
Now we are going to reduce the size of the image by weight. As mentioned above, by weight, we mean the kilobyte or megabyte size of the file. With this next step, it is amazing how much you can shrink the weight of the file.
Now we can save even more file space for even quicker page loads
- Click on the File drop down menu, then choose “Save for Web and Devises.”
- In the dialog box, the most important box is the one under the “preset” box. This is where you choose what kind of file type you want to save the image as.
- PNG gives you good resolution and is the best choice (for detailed resolution) or for transparent files.
- GIF is good for files with only a few colors in them, GIF can also be used for transparent files, but not with as much detail as PNG files.
- JPEG files are good for files that are not transparent.
- WBMB files are for black and white bitmap files. These are files that are made with pixels that are either black or white. There is no gray. These were used mainly for older mobile devices.
- Choose a file type
- Note: to help you choose a file type or file quality choice, once you are within a file type, is the readout of KB (expressed as K) in the lower left hand corner of the dialog box, under the preview picture. The size of the readout will change as you choose different file types and quality settings.
- If you choose PNG, you will then be presented with two resolution choices:
- PNG-8 has fewer colors in it; you may be able to use this file type for simpler photos, color and detail wise.
- PNG-24 is best choice of all the file types, but it takes up the most KB space.
- Be sure that the transparency box is checked, if you are saving a transparency.
- JPEG is the best all around choice, having a balance of KB size and clarity.
- When you choose JPEG, you will get a box popping up underneath, asking you which quality you want – from Low to Maximum. (Choosing the “High” option usually strikes the best balance between quality of image and KB space taken up on the server for the website.)
- When choosing the GIF option, you will notice the box above offers a choice of the number of colors in the file and dithering or no dithering.
- The more color choices the more KB space, but more clarity.
- Dithering gives the effect of there being more colors, but then the resulting file will be bigger in KB size.
- Monitor the K number in the lower left, and how the picture changes quality in the preview box, to make the final decision.
- Make sure you have the transparency box checked if the image is a transparency.
- WBMP, as mentioned above is only for simple black and white images.
- WBMB also offers dithering choices. In this case the dithering choice has to do with pixel or dot patterns, not color rendition.
- Choose the dithering choice that works best for the image.
Now for the final tuneup
- You can do a final check of the image quality by clicking on the Preview button at the bottom of the dialog box. The file will then popup in a browser window to give you an actual view of the image in a browser.
- After closing the browser window, you can click on the save button, if you are happy with the image quality and KB size. If not then you can play around more with the settings as described above.
- After clicking “Save,” you will then go to box showing you the folder and name of the file to be saved. If you want to save file under a different name and or folder, make the adjustments, then click save.
- Note: Make sure that you give the file a good name that will describe what it is, so that the search engines will understand what keywords to associate with it.
The first step toward optimizing the image for search engines
- When uploading it to the web, give it a good alt tag and caption so that the search engines can use that information for deciding how to rank pages for different keywords and keyword phrases.
- The alt tags are also used by software programs for the visually impaired to give them information about the image.
- The visual editor that you are using should have a field for alt tags. We will discuss that further in the user guides for the type of visual editor you are using (WordPress, Drupal, Joomla, etc.).
- For formating HTML for alt tags, see our article, “Creating an Image Site Map for SEO,” to find out more about optimizing the SEO of your media.
List of free image compression sites”””
This service is offered by Yahoo. It has an easy to use interface, but not as much control as other services do.
Works for GIFs, JPGs, and PNGs. Easy uploading, and you can choose percentage of compression.
Only for JPEGs, or GIFs. You can choose between three levels of compression; and you can choose pixel width.
For JPEG files only. You can only upload one file at a time, but you can choose amount of compression and the width of file in pixels.
Also does PNG files now. Simple interface.
Can drag and drop up to 20 images at a time to be optimized.