6 Ways to Optimize Website Images Without Impacting Performance

Survey after survey, online shoppers state they expect pages to load in two seconds or less. If not, they'll bounce. Despite this, a typical e-commerce page takes at least six seconds to render feature content.

A leading culprit? Page size. Web pages have never been as bloated as they are today. The average page is around 1800 KB in size, and at least half of that payload is images.

This makes images an obvious place to look when optimizing your pages for speed, yet images are overwhelmingly overlooked. In a recent study of the top 100 e-commerce sites, only 8 percent had properly implemented a technique called image compression — a relatively low-hanging piece of fruit on the optimization tree. Given the low adoption rate of this relatively straightforward technique, it's easy to deduce that images are a sorely neglected opportunity.

Whether web designers or developers choose to optimize images — and how they choose to optimize them — has been a longstanding area of opinion and debate. Optimizing images so that they render more quickly in the user's browser should be a priority for every site owner. There are a number of image optimization techniques — ranging from basic to advanced — that site owners can leverage. Here are six:

1. Explore WebP as an image format. It's a relatively new image compression format, pioneered by Google, which results in images that are 25 percent to 34 percent smaller than their JPEG counterparts.

2. Use progressive images judiciously. Research has found that users didn't care for progressive images when used for feature content, but progressive JPEGs do carry a smaller file size and load somewhat more quickly. For the sake of bandwidth savings and overall faster page load times, consider using progressive images for "below the fold" and other nonessential content.

3. Compress images. There are a vast number of image compression tools available, including ones that allow you to compress batches of images simultaneously. Do a search for "image compression tools" to explore your options.

4. Spriting. This is a CSS technique for consolidating images into one file, thereby reducing the number of server calls and speeding up render time.

5. Ensure images are in the right format. Incorrect image format is a surprisingly common problem. An image that's saved as a JPEG but should be a GIF or PNG can be several times larger than it needs to be.

6. Defer rendering below-the-fold images. Be sure you're serving your images in the order they need to appear. All too often, I see pages where the feature image loads last instead of first.

If you're like most site owners, you care about page speed. You've probably already invested significantly to improve your back-end and middle-mile performance. Images represent a fertile ground for making potentially huge performance gains at the front end.

Tammy Everts is a senior researcher, writer and performance evangelist at Radware, a provider of application delivery and application security solutions.