Most of the content we see online is made up of images. This is especially true for ecommerce sites seeing as people browsing your site want to look at the product from different angles and in different colors.
However, images come with caveats — like increasing page weight, which reflects in speed and performance.
The best way to deal with these problems is image optimization. We’re going to teach you how to optimize images in Magento. You’ll learn how to make your images load faster so you can provide the best user experience.
We’ve covered the importance of performance on aspects like SEO, page rank, speed, and conversions in our articles: How to Speed Up Magento 2 and 7 Tools to Test the Speed of Your Ecommerce Websites.
According to HTTP Archive, nearly 70% of page weight is images. This makes image optimization a great opportunity to boost performance.
Here’s some data:
Not to worry, image optimization isn’t as daunting as it may seem. You don’t need to be a programmer to set up a workflow (or automate the entire process). We’ll show you how a little later.
Keep this in mind: the more unoptimized images you have, the longer it will take to load pages and, as a result, the lower your scores will be on performance tests.
If this is the first you’ve heard about image optimization, there’s a good chance your images are less than perfect. If you’ve used a website like Tiny JPG, Kraken, Sqoosh, Compression.io, or other services, your images may be smaller but still far from truly optimized.
Google PSI is a great tool for testing speed. For testing image optimization, look for these audits in the “Opportunities” section:
We’ll go over how to improve these four points when we get to the image optimization workflow.
Cloudinary Image Analysis Tool was new to us but it is one of the most useful image analysis tools we have come across.
It not only highlights the biggest images but also shows you how to make them smaller — including how much you can save by choosing a different image format.
Please note that while this is a great tool, the quoted potential savings do not always reflect the optimal size-to-quality ratio. You can see this for yourself by analyzing major industry players like Amazon, Walmart, and Target (their scores don’t match Cloudinary’s optimal levels).
Now that we know what needs to be fixed, we can get to the fun part — optimization.
By properly scaling images, you can pass the “Properly size images” audit in Google PSI.
Image resolution denotes the number of pixels in an image. Usually, resolution is identified by the width and height of the image, for example, 800×600.
What you want to do is resize the image to match the display size your users see. The GTmetrix guide to optimizing images based on maximum display size helped us understand this better.
By selecting next-gen formats, you can pass the “Serve images in next-gen formats” audit in Google PSI.
JPG, PNG, SVG, WebP — all of these are valid image formats. But they all have different strengths and weaknesses. So what do we choose?
Yes, you can absolutely stick to the well-optimized JPG format for photos and PNG for photos with transparent backgrounds. You don’t necessarily need the next-gen formats like WebP (unless you want to pass all the Google audits).
The good news is — you don’t have to choose between JPG and WebP. It turns out you can tell the browser to display either/or depending on what your visitors are using. This is technically more challenging, so you can either use your in-house developers or hire someone to do it for you. If you can’t, there’s a Magento 2 extension — JaJuMa WebP Optimized Images.
Choosing only WebP images will make it impossible for Apple users to view your image content. Safari doesn’t support WebP and will most likely never support it.
Browsers that currently support WebP:
By properly compressing images, you can pass the “Efficiently encode images” audit in Google PSI.
There are two types of compression: lossy and lossless. Lossy means you strip away some pixels, colors, shading, etc. You’ll notice a drop in quality. Lossless means you keep all of the original data but reduce the file size — with no noticeable loss in quality.
Ideally, what we want to do is to scale the image down to the appropriate maximum display size (or close to it) and then apply lossless compression.
It’s important to note that Magento has a built-in default compression algorithm for product images. Magento image compression is set to 80% quality by default (lossy compression). If you scale down and compress your images too much and neglect to set the image quality to 100% in Magento, you’ll get blurry product images.
For the most part, the Magento compression works well enough but based on our experience, there’s room for improvement. Plus, it only works for product images, so you will need to find another solution for the rest of your content.
This is self-explanatory. If you over-designed your store with tons of images and media content, performance will suffer. Choose the right balance between images and text. A ThinkWithGoogle study found that the number of images can affect conversions.
From the study: “In fact, we found sessions that converted users had 38% fewer images than sessions that didn’t convert.”
Note: this was a study on mobile conversions, not desktop sites.
Content Delivery Networks, or CDNs, are, in our opinion, the best way to serve images for any type of website. The advantage is that most CDNs include ways to automate image optimization. Plus, the core functionality of CDNs is using servers around the world to improve site performance and load speeds.
A CDN distributes your images over a secure network of servers around the world. So when someone is trying to access your site, they get connected to the closest server from their location.
Magento has out-of-the-box support for Fastly CDN. You may have heard of other CDNs like Cloudinary, KeyCDN, Cloudflare, and Akamai.
By lazy loading images, you can pass the “Defer offscreen images” audit in Google PSI.
Lazy loading images and video are a great way to improve page speed. It delays when content is loaded until the user performs a certain action, usually scrolling down the page. You may have seen this when browsing various sites.
The biggest advantage of lazy loading is improved web performance. Site visitors don’t always scroll “below the fold” or to the end of the page.
Magento doesn’t come with lazy loading. Yevhen Zakharchuk, Magento 2 developer at Elogic, said that he has implemented lazy loading in under three hours. If you don’t have access to experienced developers or you’re trying to do this yourself, we recommend using an extension.
In the process of writing this article, we noticed that the load speed of our blog page was severely slow. This happened because our content team didn’t include image optimization in their workflow. We thought that WordPress compresses and scales images automatically — but it doesn’t.
This is what we did, though we’re still not quite happy with the size-to-quality ratio:
Results: We reduced the page weight by over half — from 5.9 MB to 2.5 MB and improved load time from 5.39 sec to 2.90 sec.
Side note: We recently released our brand-new site, which we optimized with TinyJPG, and Cloudflare CDN (which offers the option to choose WebP images if they are more suitable for the given device and browser than other formats).
Hopefully, we’ve demystified how to optimize images in Magento. It’s really not that hard once you get the hang of it. Automating image optimization with a paid service like a CDN is way easier than doing it manually, especially for product images.
However, manual optimization can still be a useful skill for other types of content like sprites, icons, fonts, and banners.
We recommend using either a CDN (most include image optimization tools) or a combination of the image optimization extensions we mentioned above. Either option will work, although CDNs offer more bang for your buck. You get a performance boost with your newly optimized images plus your content is served lightning-fast no matter where your site is accessed from.
Finding the right balance between image quality, size, and compression can be tricky, but it’s the key to the best online user experience.
Recognize what you need to optimize and get it done.