There are several image editing and manipulation tools, programs, and applications available for web and graphic designers, and you probably already have your favorite "prepare for publication" imaging tool in place. This will not be a discussion on the various editing tools themselves, but will concentrate on the best practices and techniques for optimizing your images and graphics on the web.
For a quick example before I get into the whys and hows for optimizing images on the web, take a look at the two images below, and without taking a peek at their properties, notice similarities and differences when comparing them to one another (click on images for full-size).
What differences do you notice with the two images? Colors, load times, quality, these are all factors to consider when optimizing your web images. I kept the image pixel sizes consistent for this comparison; however, to fully optimize this image, I could have reduced the pixel width and that would have reduced its web page load impact in addition to the other optimizing factors.
Why optimize web images?
What are the motivating factors that direct our attention to obtain the most favorable web images? Several reasons for optimizing your web images include:
Tips for optimizing your web imagesImage file formats: The rules about file formats vary between organizations, each web development house typically has a specific guideline. Here are three file types that are suited for the web.
- GIF: The .gif file format is really a bitmap consisting of a grid made of pixel squares, including transparency pixels with up to 256 colors, and data about every pixel is saved. It is a great file type for saving graphics, charts, bullet points, icons, buttons, and textual details.
- JPEG: Although, the general rule that many follow is to reserve the .jpg file type for images, and .gif file type for graphics, charts, etc., I would apply the .jpg file type as a rule of thumb if your web site leans toward high end photography galleries, or other high quality graphic designs. This file type is good for saving images with millions of colors, including graphics with a variety of shades and gradients. Just note that typically the .jpg file type images are much larger and take longer to load. However, most image editing tools allow you to select the file compression for .jpg. For example, you can choose Maximum, Very High, High, Medium, and Low, so you do have some control over the ultimate file size. To test the image, be sure to save it under several compression settings and then test them for quality rendering and load times. Balancing quality, compression, and load times can be a judgment call depending on the particular image and the web document it is called within.
- PNG: The .png image file type was developed in answer to the .gif patented file type, and while it can display a larger range of colors than the .gif, it does typically result in a larger file size. Many use the .png file format very effectively for buttons and icons, which are usually small pixel dimensions anyway, so they are not so large when utilized in that fashion. A typical 16x16 pixel .png icon will weigh in between 1KB and 4KB, or a 48x48 button at between 3KB and 7KB, so when utilized in this fashion they are optimal. For any .png image over a dimension of 200 pixels you start to see much higher file sizes.
- Make sure you have saved a copy of the image as a lossless version, meaning that you can come back and edit it again later if needed. For example, .raw, .tiff, .png, .psd file formats to name a few. Especially if several layers have been added to the image or graphic file, you never know when the customer will want to change a word here or a graphic element there, even after it has been up on your site for some time.
- If it is a photograph, then select .jpg file format to save the final image. Remember to test several quality and compression settings until you get the perfect balance between quality and load times. If your image editing tool allows the "progressive" setting use that as it will allow the image to "blur" or display gradually as it is rendered on the web instead of line by line. The load time is not improved with the progressive setting, however it does give the image a softer look and feel when rendering on screen.
- If your .jpg image is to be used as a background on the web document then use the Medium or Low compression setting. Otherwise for displayed images keep the compression at High.
- If you have the option to adjust the image "quality" then use the settings to make the appropriate change; again, remember to strike a balance between acceptable quality and suitable file size.
- For background images try to keep the file size around or below10KB.
- For banners or header images a file size up to 60KB is acceptable.
- For high end photographs try to keep them to within 100KB at an absolute maximum.
Do you have any tips or tricks that you use for optimizing your web images? If so, please share them with us in the comment section below.
Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal government.