Web Marketing Today

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.

CMS Image Sizes

Content management systems like WordPress create multiple sizes of the same image.

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.

Photoshop Image Quality Options

Most image editors offer image quality options that can decrease image file size.

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.

RIOT - Radical Image Optimization Tool

RIOT lets you compare and optimize images.

Tags:      

Drew Coffin
Drew Coffin
Bio  |  RSS Feed


Comment ( 1 )

Have Something To Say ?

  1. Abhijit Gupta December 31, 2013 Reply

    Very informative article. It’s very helpful for beginners. I really appreciate your tips on how to properly optimize images for better rankings.

Email Updates

Sign up to receive our email newsletter
And receive a free ebook
50 Great Local Marketing Ideas