A picture is said to be worth a thousand words. And nowhere is this more true than in the realm of e-commerce. We'll go through six techniques for optimising photos on your eCommerce website in this blog. Hundreds of photos are frequently referenced on E-Commerce pages. Full-size product photos, product thumbnails, category images, banners, page decorations, and button icons are all examples of these images. How do you ensure that they are quick and efficient given their abundance?
Developer advocate Alan Kent discussed 6 techniques for optimising photos on your website in a recent episode of E-commerce Essentials. Here are those ideas.
Eliminating Cumulative Layout Shift is the first step in optimising picture use on your site. The content of a page travels around on the screen in a Cumulative Layout Shift or CLS. You've seen those sites where you stop reading or click on a link and the page content shifts. It's quite inconvenient. If photos are used inappropriately, they might add to the problem. CLS has such a significant influence on a user's experience that Google has designated it as one of the three Core web Vitals. These are criteria that Google considers vital for all websites' user experience.
So, how may visuals trigger CLS? When you load a page, your web browser begins downloading the HTML markup. Before the entire page has been downloaded, most browsers will display the top of the page. Any relevant pictures detected are put into a queue of resources to download to shorten your wait time. These files are then downloaded one by one in tandem with the main picture. When the browser does not know the picture dimensions before entering the page content, the problem arises. If the browser realises it did not leave enough room for an image, it will adjust the layout. When physically inspecting a website while it is loading, CLS is typically simple to notice.
If the photos on your e-commerce website are too huge, they will cause your page to load slowly. Finally, you risk being punished by Google, especially if category sites include several photos. You don't want to be penalised for something that might have been avoided.
Always save your photographs in a web-friendly format, with square images being the ideal. If you must use rectangular pictures, strive to keep the ratios close and not overly stretched in one direction. If feasible, provide numerous, bigger photos for the product on product detail landing pages to improve the user experience. Just make sure they're saved in a web-friendly manner this time.
Portable Network Graphics (PNG) as well as Joint Photographic Experts Group (JPEG) are the two most used picture formats (JPEG or JPG).
What's the distinction? In brief, PNGs have higher resolution and allow for transparency, but they have bigger picture file sizes. JPEGs aren't as good in terms of image quality, but their image file sizes are often far less.
PNGs are also lossless, which means you can modify and save a picture a dozen times without losing quality. JPEGs, on the other hand, are lossy, and their quality degrades with each saving.
When should each format be employed? In most circumstances, JPEGs will be your best choice since they offer a decent balance of image quality and file size.
Picture compressors remove extraneous data such as camera settings, metadata, colour profiles, embedded thumbnails, and so on from an image. This reduces the size of your image's file while maintaining its quality.
When uploading photos to your website, you may bulk compress else automatically compress them using a WordPress plugin like Smush Image Compression and Optimization or EWWW Image Optimizer.
It's simple to set up with a one-click setup and offers extra benefits like faster CSS and Javascript file delivery. Image acceleration capabilities work on both old and new photographs, so you'll see a boost in speed straight immediately.
The value 5 indicates how long the browser may safely cache pictures. You can provide an HTTP response header containing caching instructions, such as how long a browser should cache an image when returning an image from your site.
The PageSpeed insight report may be used to determine whether the HTTP response cache header has been set correctly on your end. Images that might benefit from caching improvements are identified in the PageSpeed insights report's Search Static Assets using an efficient cache policy section.
Another option is to check the HTTP cache response headers using the networking tab in Chrome's developer tools. Check if you have a platform on web server setting that you can alter to adjust the cache lifetime for pictures on your site to fix concerns. You can specify a very prolonged cache lifetime if you do not alter photos regularly or if you constantly obtain images with a fresh URL. Aside from cache duration, a CDN may speed up downloads by caching copies of your photos in several places across the world, closer to where visitors connect.
The sequence in which resources, including photos, are downloaded can have a major impact on page speed. Because downloading photos one at a time might be sluggish, HTTP1 browsers download many images simultaneously through separate network connections to the website.
Most browsers now multiplex downloads over a single network connection if the website supports HTTP2. This is often quicker and prevents issues such as huge files prohibiting smaller files from being downloaded. There is still a network bandwidth constraint regardless of strategy. In general, you should download photos in the following order:
Using the proper picture size and quality;.jpeg is the most popular format for a good balance of quality and size. Use.png files to put images atop another layer since they have transparent backgrounds. Arrange the photographs around the description so that the consumer can see both at once. Optimize photos with descriptive labels written in plain English to help consumers and search engines understand what you're selling, ultimately enhancing SEO.
Finally, use solid SEO to get the attention of search engines, and good aesthetic appeal to catch the interest of your consumers!
