While it’s easy enough to remember Google’s biggest algorithm changes in recent years and the far-reaching effects of each, you may not realize that Google’s famous proprietary algorithm changes hundreds of times per year.
Google and others include page load time and site speed in their rankings for key design metrics. This means image optimization cannot be overlooked in your web design and development processes.
Taking time to optimize images is a win-win for both SEO and user experience. As with every other aspect of web design, image optimization is partly intuitive, partly data-driven best practice, and overall A/B-testable. Web designers should follow these five image optimization best practices:
1. Move image optimization into the initial design phase of the project.
Making decisions about size, complexity, and selection of images at this stage can help ensure that pages aren’t overly “heavy” when they launch.
For example, while not specifically an “image” optimization, the use of a large number of web fonts can add greatly to page load time as browsers load these assets. For an optimal UX, limit your selection of web fonts.
2. Select the appropriate file format for the type of image you have.
The number one mistake designers and developers make is using either the wrong or the same image format for every image on a site. Follow these suggestions to determine the correct format for a given image:
3. Optimize images by eye.
Once you’ve chosen the appropriate format, eyeball it to make sure that the image is as compressed as possible without sacrificing quality.
JPEG files employ lossy compression, which means that you must balance quality and file size when optimizing. The difference between a “maximum” 100 percent quality JPEG and a “low-quality” 30 percent JPEG can be astounding. Try taking the quality down low and then dialing it up 10 percent at a time until you reach an acceptable level. Be sure to double-check against the original asset for a final test.
To optimize GIF files by eye, use the minimum number of colors necessary to display your image and test different color palette sizes for quality. The difference between a 16-color GIF and a 256-color GIF can be many kilobytes. Depending on the image, you may be able to reduce the palette a bit further to save space.
When optimizing PNG files, try to use PNG-8 formats wherever possible. These limit you to a 256-color palette, but with the benefit of a significantly smaller file size than a PNG-24 file. Recent tools, such as ImageAlpha, optimize alpha transparency in PNG-8 images, in part by converting them to PNG-8 images that include alpha transparency.
In addition to your typical design tools, ImageOptim is an exceptional application for optimizing PNG, GIF, and JPEG images. Using this tool can easily cut your total image load time in half.
4. Determine what’s best for your website.
Every website, scenario, and audience is different, so there isn’t a specific number that your images should add up to.
Having said that, use images under 200KB when possible — smaller file size is always better! Try to get your total page weight well under 1 megabyte.
5. Give those images meaningful names.
Even though we are primarily talking about file size optimization for images, don’t forget the basics. Website images named “red-shiny-car-part.jpg” contain more SEO information than “image1.jpg.”
Effective image optimization looks like a high-performing, quick-loading, mobile-responsive user experience. Other than that, it depends on the site. Engaging, compelling websites like Wolf-Gordon,Bryan Cave, and Winston & Strawn make use of optimized images throughout for an exceptional UX. While great image optimization impacts site performance and factors in SEO, most companies are most concerned with making a positive impression on their visitors. As with any first impression, the most appealing experiences starts with optimal imagery.