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.