4 Image Optimization Tips
Images are a core element of most websites. But many sites fail to optimize their images. Not only can image optimization increase load times, but it can also improve search engine visibility. Here are four tips for optimizing images to improve both load times and SEO.
1. Use Image Descriptions
There are three ways to describe an image inside of the HTML tag: a file name, an “alt” attribute, and a “title” attribute.
An image’s file name helps search engines understand what the image is depicting. Use a brief description as your image file name and use hyphens instead of underscores when breaking up words.
An “alt” tag — i.e., alt attribute — provides an alternative description if the image does not load correctly or for someone (typically, visually handicapped) using a screen reader. Alt text will also appear when mousing over an image. Google in particular places much weight on an alt attribute. Matt Cutts, Google’s head of web spam, explains the importance of alt attributes in this video.
Finally, title attributes are used when an image is also a link. Title attribute text will be displayed instead of alt text upon mousing over the image. In the case of a linked image not displaying or a site being accessed on a screen reader, the alt text will display instead of the image and the title text will display when mousing over the displayed alt text. Title text should be different from alt text, providing supplemental information when linking with images. Without the title attribute, the alt text would display in both instances. Search engines place little to no weight on title text, but title text can still be useful in providing supplemental information.
2. Use the Right Image Dimensions
Using the right image dimensions can dramatically increase site load speed. Use exact dimensions rather than relying on the browser to resize a larger image to fit. Content management systems and hosting software often automatically resize images into size groups, such small, medium, and large. Even so, your CMS may be relying on the browser to downsize an image with HTML. If you use a content management system, understand how it inserts images. Your best bet is to always upload exactly sized images.
For some images, such as products for sale, you may want to use a larger version. In such cases, use separate images.
3. Use the Right File Type
There are many image file types, but the most common on the web are JPEG and PNG. Choosing the proper image type can reduce file size and increase clarity. Both of these offer optimization benefits depending on the size and subject matter of the image. Generally, use JPEGs for large, photographic images. Use PNGs for smaller images or images with minimal photographic elements or for images that include text. Use 8-bit PNGs for simple images with only a few colors. To really optimize your images, it is best to compare the same image saved as a PNG and JPEG for quality and image size.
4. Decrease Image File Size
While choosing the right image type can reduce size, other techniques can help, too. One of the easiest is to lower the image quality when saving it. This can be done with no visible image degradation and is a common feature in image editing software. Depending on the image editor, lowering image quality to around 80 percent of the original often decreases file size without losing any noticeable quality. Decreasing image quality can be especially useful on a page with many thumbnail images.
Another way to decrease image file size is to remove unnecessary metadata, such as the camera used, the date, and the program the image was last edited with. This can be removed to decrease image file size.
Adobe Photoshop has a “Save for Web and Devices” feature that allows you to see an image’s final file size while switching between image file types, adjusting image quality, and adding or removing metadata. Other applications, like RIOT, offer similar functions, allowing you to adjust image quality, file type, and metadata while comparing the resulting image with the original.