Images impact the load time of a website. The faster the site, the better the user experience, leading to conversions and profits.
Business managers and owners want their site’s images to load fast, even on mobile devices. But how do they do it? In “The Case for Optimizing Image Performance,” my article last week, I explained the importance of lightweight images on a site’s success.
In this piece, I’ll offer suggestions for optimizing images. The goal is to create an attractive user experience without bogging down performance.
Eliminate Unnecessary Images
In 2019, a typical web page may request between 28 and 32 images when it loads, according to a report from the HTTP Archive. Those images may be necessary.
For example, one would expect numerous images to appear on a product category page of an ecommerce website. These pictures are usually critical.
Writing for UX Planet, a user experience journal on Medium, Ainsley Fagerström described the sorts of images that should be on a website. Paraphrasing and adding to her list, we could say necessary images:
- Explain or clarify,
- Evoke emotions to communicate something,
- Make a point related to the other content,
- Help you sell.
The sorts of images that may be eliminated could include:
- Pictures of text,
- Decorative images,
- Stock images that don’t communicate something.
There is also data that indicates having fewer images on a web page leads to more sales.
“On a typical retail page, graphic elements such as favicons, logos, and product images can easily comprise up to two-thirds (in other words, hundreds of kilobytes) of a page’s total weight,” wrote Daniel An and Pat Meenan in a 2016 Think with Google article. “The result: cumulatively slow page loads throughout a session. In fact, … sessions that converted users had 38 percent fewer images than sessions that didn’t convert.”
Lazy Load Images
When a typical web page loads, it requests every image listed in the page markup, even when many of those images are off screen and will only appear when or if the user swipes and scrolls down the page.
Lazy loading of images is the process of loading an image only…