This photo is a JPEG image and is about the same as the median size reported by the Web Almanac, 126 KB
The same photo scaled down to 25% of its original size delivered in WEBP format at 80% of the original quality is 11 KB
Minimising the time it takes visitors to view and interact with webpages is an over-arching goal of web design. They should be stable as well - i.e. not jump around all over the page particularly when viewing images.
Google recognises three key performance metrics that a webpage should optimise in order to offer its visitors the best possible experience -
An ever-increasing volume of webpages are consumed on mobile devices. Moreover, in most cases images form a majority of webpage content in terms of download size. Together, this leads to the obvious conclusion that optimising images for download shortens load times. The smaller the images, the quicker they load. In addition to this, the quicker that images are transferred over the network, the quicker they will load.
And the quicker they load, the faster the webpage is presented to the user, According to Google's current recommendation, this translates to loading the largest content in the viewport within 2.5 seconds - most of the time this means images.
The two major factors in optimising image delivery are
These days. the simplest and most effective mechanism for achieving both these goals is to use a third-party service that offers on-the-fly media transformation delivered through a comprehensive CDN network.
The Web Almanac for 2022 tells us that the median size of images contributing to LCP is 124KB on desktop and 94KB on mobile devices.
This photo is a JPEG image and is about the same as the median size reported by the Web Almanac, 126 KB
The same photo scaled down to 25% of its original size delivered in WEBP format at 80% of the original quality is 11 KB
While the smaller image admittedly isn't as sharp, it's manages to convey the same message - a field of red poppies.
A page with 10 similar images would cost 1260 KB compared to 110 KB if the images were optimised. That's the cost for a single visit. If the page gets hit thousands of times, that equates to a very significant overall difference in total network, computing and related energy resources.
No wonder the battery life of mobile devices is so short. Imagine too the damage that would do to those people, that increasing number of people, who use their data plans to view web content.
This is why LCP is such an important metric. It raises awareness of the true cost of delivering unnecessarily large images - costs borne both by the visitor and the environment. Thankfully and responsibly, Google uses LCP in its ranking algorithm.
For this reason, the CMS makes it difficult to include anything other than 25% scaled down images. You can do it - like I did in this article to prove the point - but hopefully most users won't be inclined to mess with the HTML.