Magento 2 Image Optimization: A Complete Guide for Magento Pros

Images take up 70% of all data downloaded by the web browser. We cannot underestimate the importance of making images faster, lighter, and more streamlined.

The challenge in image loading is that it is a natural and most common bottleneck for fast page load. Even though Magento has tons of JS code, complex DOM structure, and countless CSS styles to load, images will still take the lion’s share of all page loading.

In this article, we’d like to introduce you to 10 ways that can help you make the images of your Magento store load quicker. Plus, we’ll give answers to the often asked questions on the subject.

Compress Images So They Load Faster Switch to Modern File Formats Enable Progressive JPEGs Use Vector Images Where Possible Defer Image Loading to Clear Critical Rendering Path Enable Fastly Image Optimization Set Static Cache Expiration to One Year Use Multiversion Images Based on Screen Size Replace Images With CSS3 Styles Remove Text On Images Image Optimization for Magento 2: FAQ

10 Ways to Make Images Load Faster for Magento

We’ve explained in detail in our Magento Google PageSpeed Insights Guide how you can speed up your store to pass every Google audit.

Here we take the matter of Magento image optimization to a new level, detailing every last tip we know to help you reach a faster, snappier image loading experience.

1. Compress Images So They Load Faster

Uncompressed PNGs, JPEGs, and GIFs create a huge amount of overhead on the website. The bigger the image, the more it will benefit from being compressed properly.

Don’t be afraid to lose picture quality. It’s not as bad as it sounds. If you don’t overdo it, lossy quality removes invisible elements of the image that don’t affect perceived image quality.

E-commerce space sells using pictures. They are your best friends and the most powerful tool in trying to close a deal. Losing image quality to the point where it becomes noticeable is not an option. So when you choose lossy we recommend that you go for 82% of lossy image compression.

There are 3 main ways how you can compress images in your store.

a) Compressing images within the store

First, you can use imagemin, libvips, WebP Convert, or any other tools you like to build image compression inside your store. These ones are server-side and work exactly as you’d expect. For SaaS solutions, look towards Cloudinary and its alternatives.

b) Compressing images prior to their upload

Second, there is TinyPNG, TinyJPG, ImageOptim, and other services that can optimize your image before you upload it. It takes some discipline to use these tools consistently before the upload, though. Where manual optimizations are free of charge if you need an API implementation (or two), get ready to invest in a new paid service.

c) Magento 2 image compression using a content delivery network (CDN)

The third option you have is a Content Delivery Network. The best CDNs offer smart image compression as an additional perk of your subscription. Cloudflare’s Polish feature is a good example.

Good CDNs can boast countless built-in image optimization features. All you have to do is use them to your benefit. We wouldn’t want to make this guide into a CDN promo page, but a really capable Content Delivery Network helps immensely with optimization, caching, and delivery of your media assets.

Some CDNs even go as far as offering conversion to modern image formats (WebP, JPEG XR, JPEG 2000), latency reduction, on-the-fly compression, etc. You’ll have to carefully compare CDN providers to see what features are available since all CDNs have different capabilities and pricing.

One of the drawbacks of CDN image optimization is that it will not change the original image on your server. The image stays the same. Instead, the CDN will compress that image in its own server and keep it there inside the cache.

Any user who comes to the store will be served a cached optimized image, which reduces bandwidth use and improves browsing performance. CDNs can serve images in WebP to suitable web browsers. Depending on the type of browser your customer has, your CDN will show them either a newer WebP version of the file or the older JPEG. But in case the CDN cache becomes invalidated, the CDN will be forced to serve the original unoptimized image before a new cache can be built.

Onilab recommendation:

Combine a server-side tool (imagemin is a good choice) with a capable CDN to get the best of both worlds. This way you can easily compress your existing images and leverage the benefits of CDN image caching.

💡 If you are unfamiliar with the fundamentals of CDN, you may find this concept challenging. Turn to Onilab’s Magento developers for hassle-free image management and correct CDN use.

2. Switch to Modern File Formats

New and more efficient image formats offer significant performance savings. For example, WebP can save up to 30% in size over JPEG and JPEG 2000, with zero image quality loss. As of today, WebP also enjoys wide support from most mainstream browsers. Opera, Firefox, Android, MS Edge, and Chrome support WebP files.

In addition to that, if you use a capable CDN (that was mentioned in the previous section) there’s no need to switch to WebP. If you don’t want to use a CDN for new format delivery, you can detect WebP images support yourself (for example you can use Modernizr, a JS library that detects HTML5 and CSS3 support in web browsers). Then you may serve WebP to suitable clients using the HTML5 <picture> element (which we’ll cover in the 8th section).

Bear in mind that hosting a second version of every image in WebP format in Magento will effectively mean you need almost twice as much data storage as you already use. Carefully assess your infrastructure costs and the inevitable rise in data storage investments before the implementation.

3. Enable Progressive JPEGs for Magento Image Optimization

Another tip for image optimization for Magento 2 is enabling Progressive JPEG. The progressive JPEG image format allows the browser to load qualitatively not quantitatively. In other words, it loads the site’s images gradually, little by little improving the quality of the displayed image from 0 to 100 percent.

To compare, the images below show how a regular JPEG usually loads.

Alternatively, this is how a progressive JPEG image loads on a page.

Although progressive JPEG appeared quite a while ago (about 10 years back), there are still not that many sites using this technology. To be fair, the difference between sequential and progressive JPEG may not be noticeable on computers with a decent Internet connection (over 100 Mbit per second). In such cases, the browser loads the image so quickly that it’s downloaded almost instantly in its maximum quality.

Yet if the connection is weak (a common case with mobile networks like 3G) or if the image is too large, then the difference between the sequential and progressive format will be very visible. Obviously, when the entire globe will be equipped with the fifth-generation Internet, there won’t be a noticeable difference between the usual and progressive JPEG. But since we’re not quite there yet, switching to progressive JPEG can do your online store good.

There are several ways how you can save an image in progressive JPEG format. The simplest of them is by using an online service like jpeg.io. Furthermore, you can make use of a plugin or configure your server.

4. Use Vector Images Where Possible

Clean design is fast design. This might sound like trivial advice, but take a long look at your design. What kind of pictures can you get rid of? Some of them you can replace with vectors and even fonts, others with CSS.

Sure, you can speed up the rest with a good CDN and a smart lazy loading configuration. But the best course of action is to actually make your store cleaner and lighter.

SVGs offer better image quality, lower file size, and good scaling to any resolution. They will not be suitable for every image but where vector files really shine are icons and other small UI elements. Raster images create less CPU load but in any other way the vector format demonstrates its superiority:

• best design responsiveness;
• no loss of detail;
• zoom-friendly images;
• among other things.

In addition to a smaller size, you can make SVGs take even less space when you minify and gzip compress them. These steps strip SVG images from metadata, namespaces, and comments that tail the image without adding any value to the user.

Pro tip:

Add SVG UI elements to a custom font and load it as a single file. This type of bundling will reduce the number of individual requests on the page and improve page speed performance. The advice doesn’t offer as much performance gain for Magento stores using HTTP/2 and QUIC protocols, it’s more valuable for those who still stick to HTTP/1.1.

5. Defer Image Loading to Clear Critical Rendering Path

Deferring image loading is another trick in Magento to optimize images. It will help declutter the Critical Rendering Path, improve the Magento TTFB, and speed up overall performance. Deferred loading is done with a lazy loading script that determines how images (gifs, photos, and other media) appear on the screen.

It’s basically a prioritization tool that replaces images outside the viewport with placeholders while the media inside the viewport loads as usual. Your customers won’t feel any negative impact from this “behind-the-scenes” reshuffling of loading priorities. But at the same time, they will see faster loading where it matters (on the visible parts of the screen of their mobile and desktop devices). Just take a look:

Users on slow mobile networks, tight bandwidths, or older devices will immediately notice a spike in performance. Those who use smartphone flagships and 4G+ speeds will see a mild performance boost but nothing ground-breaking.

Lazy loading is one of the most powerful tools at your disposal since it improves perceived performance without sacrificing anything. You don’t need more CPU or RAM to implement it, it’s SEO friendly, you actually save bandwidth with users who don’t scroll all the way down, etc. Implemented right, lazy loading improves user experience without becoming a drag on your server resources.

Onilab’s caution: don’t use lazy loading for your largest element above the fold. It can negatively affect the LCP score as well as your overall perceived performance. You can lazy load everything that is out of view, even menu icons and the logo. But exclude the LCP element from this method and opt for a standard img or picture tag instead, as recommended in our guide on Core Web Vitals for Magento.

6. Enable Fastly Image Optimization

Also referred to as just Fastly IO, this Magento 2 image compression service is used for making image delivery much faster. It is a good choice for handling various formats of images, including JPEG, PNG, and GIF. Noting its strengths Fastly is capable of:

• driving lossy conversions;
• using pixel ratios that are adaptive to various screen resolutions (very handy for progressive web applications);
• and resizing product images from lossless to lossy by default (if enabled).

💡 To get Fastly to run well on your store, you’ll need to enable it, configure it, and verify it afterward. If you experience difficulties configuring Fastly for image optimization, turn to our Magento speed services for support.

What’s for its configuration, luckily, Fastly has quite flexible settings. Based on the selected options, you can indicate the extent to which you’ll allow images to lose quality during compression. Other Magento image compression settings configure more features of image optimization like resizing filters. For instance, if you select the “Default JPEG format” to be “Progressive”, your images will first be displayed in low resolution, and only then gradually improve their quality.

Once you start using the tool, it makes sense to validate it. I.e., test your store in terms of web speed to compare how the site performs with Fastly and without it.

7. Set Static Cache Expiration to One Year

Google PageSpeed Insights recommends 1-year static cache for most files. It’s a good piece of advice, especially if you already control versioning with filenames (e.g. upload new product photos using different names than previously). This change is enough to ensure that the new file will update correctly instead of getting stuck in the old version (because the browser doesn’t recognize it as new and uses browser cache instead of fetching the new visuals).

Using longer cached images will save bandwidth, improve the browsing experience for returning customers, and make Google PageSpeed Insights happy. Most of the time, a good CDN will offer a longer cache lifetime by default and to some extent handle this setting for you.

The changes you need to do are to set Cache-Control: max-age=31536000 for your images to one year.

8. Use Multiversion Images Based on Screen Size

Responsive design offers new challenges and opportunities to Magento developers. One such opportunity is the use of various image versions for different screen resolutions. Depending on your viewport, Magento can show you the version of the image that suits your display best.

As an example, narrowing your screen from 960-pixel wide to 240-wide will force the server to switch from a wider image to the narrower one as elements bundle together and have to find their place inside a changing layout:

Here’s an alternative implementation. We’ve already discussed the <picture> tag in our Magento 2 Performance Optimization Guide, although in a different light. In addition to improving responsive designs and optimizing for different viewport options, HTML5 <picture> allows you to list multiple alternative image sources for a single file in priority order.

Either of these methods will work. The <picture> tag method has the advantage of simpler testing: you can easily simulate a smaller device with software and see how the design works. The srcset method is a bit more clunky in comparison.

Furthermore, don’t use images larger than you need. Constantly loading images larger in size than you really need is bad practice. Depending on the size difference, additional data quickly adds up and can result in noticeable overhead. The larger the file, the more unnecessary pressure it puts on your server in terms of bandwidth.

Browsers have to scale these kinds of images on their own which leads to reduced visual quality and slowdowns in delivery speed.

9. Replace Images With CSS3 Styles

CSS3 can cope with so much more than most people expect it to. Replacing some images with CSS3 styles is entirely real and offers a great vector of optimization. CSS3 is 100% capable of handling shadows, animations, and gradients for any screen resolution, device, or zoom level.

CSS3 takes care of the creation of simple geometry really well. In the example below, you can see how we can build the same complex geometrical figure and apply a gradient to it using CSS instead of SVG.

Replacing these elements with CSS boosts site speed and offers performance gains. The more replacements you can have, the more impact these optimizations create.

For example, using the code below, you can create CSS figures (this example allows making an upside-down black triangle and gradient rectangles).

As a result, we get:

10. Improving Magento: Optimize Images by Removing Text On Images

Surprisingly, around the web, there are still a lot of images with text. It’s a bad decision in every possible way: images are heavier, non-searchable, and, in general, they are awful for text.

As you work on your Magento 2 strategy to optimize images, instead of pictures, use actual text and quality fonts. It’s fully searchable, selectable, zoomable, accessible, SEO- and high-DPI device friendly.

Image Optimization for Magento 2: Frequently Asked Questions

Finally, to dispel all your doubts regarding the optimization of pictures on Magento 2, we bring you answers to the often-asked questions on the subject.

Will optimizing images really make my Magento store faster?

Images are crucial for an eCommerce store to present its products in the best possible way. This is why there are common cases when in the pursuit of displaying only top-quality pictures, store owners do harm to the site’s speed and performance.

By approaching image compression in a smart way, you can get the best of both worlds: great quality images and ultimate performance. This requires effort, though. Therefore, it’s only fair to say that yes, if you give your store’s image optimization the due attention in terms of their proper sizing, this will bring you back positive results. Similarly, you can also give your Magento database performance the needed attention to improve the store as well.

What is the best image optimization extension for Magento?

Depending on the needs of your store, there’s more than one plugin option that you can choose. The extensions differ by the offered feature set, plus, some of them are free, others come on a paid basis. To give you a better understanding of which one is right for you, read the previous section of this article in which we’ve overviewed the top 5 most popular Magento image optimization extensions.

What is the best image format and size for products in Magento?

As stated earlier in this article, next-generation image formats are surely worth considering. Switching to WebP, JPEG, and JPEG 2000 use alone can enhance your site’s performance.

What’s for size, a lot depends on the type of page that the picture is shown on. Yet regardless of how your galleries look like on the desktop, you must keep in mind the dimensions of the most common screen sizes that are in use and make sure that your pictures look decent on them. This way, you can avoid the pictures getting scaled down by the browser.

Can image optimization improve the UX of the store?

Again, thinking that high-weight impeccable-resolution images are the only way to go for your online store is a huge mistake. Remember, people hate to wait and will get frustrated if a picture takes forever to load. So, don’t underestimate the importance of image size when you work on improving your Magento store and optimizing images.

There are many ways that compressing images or approaching how they are loaded can help improve the store’s UX. Lazy loading or image caching, described in this article above, are some of the solutions.

💡 However, lazy loading can create delays, which are attributed to image loading and decoding processes. In addition, when pages are not configured to accommodate lazy loading scripts, content shifts may occur. These issues can be prevented if you turn to experienced Magento optimization experts.

Does image optimization influence the site’s SEO?

Because SEO is very closely tied to performance, the speed of the store does influence the site’s rankings and positions. Image optimization for SEO on Magento 2 shouldn’t be overlooked, by all means. This concerns appropriate image naming, Alt tags, and descriptions, to say the least.

While visual content matters a lot, if it causes the store’s speed to backpedal, this is a problem of high priority to be fixed. High-resolution photos can look good yet without being properly handled in terms of their loading, they can cause severe harm to the site’s performance and SEO.

Conclusion

Check how well you’ve done your job using Profiler and Google PageSpeed Insights. All these tools are going to help you make the most out of Magento image optimization. And if you’d like to partner with an experienced team, we are here to solve your Magento image optimization challenges even faster.