Magento Image Optimization Guide

Magento Image Optimization Guide

Magento Image Optimization Guide

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.

13 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 Magento image optimization on a new level, detailing every last tip we know for 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 compressing it properly. There are 3 main ways how you can compress images in your 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.

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.

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. One of the drawbacks of a 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 their 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. 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.

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.

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.

2. Get a CDN. Really

You probably know this already. Good CDNs offer 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.

3. Switch to Modern Compression and File Formats

Look into new 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. In 2019, 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 there’s no need to switch to WebP. It is delivered automatically to those web browsers who support it. 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.

If you don’t want to use a CDN for new format delivery, you can detect WebP images support yourself (for example with Modernizr, a JS library that detects HTML5 and CSS3 support in web browsers) and serve WebP to suitable clients using HTML5 <picture> element.

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.

Use HTML <picture> tag. We’ve already discussed <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.

Progressive images. Most of the time JPEG images use baseline mode. This is when the browser reads the file one line at a time and renders it accordingly. From our own human perspective, a slowly rendering baseline JPEG can look really slow. It’s all about perception.

Browsers render progressive JPEG images differently. They first create a rough and blurry image for the viewer and then improve fidelity within the next 2-3 steps. Progressive JPEGs are also smaller than regular files. This fact allows Magento store owners to get better perceived performance: not only your images appear faster on the screen, but they also look at 50% fidelity as good as a fully loaded baseline file.

Typically CDNs that are worth their salt offer the feature. For example, Cloudflare uses its Polish feature to enable conversion of JPEGs into progressive JPEGs.

5. Use Vector Images Where Possible

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 is 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, etc.

In addition to 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.

6. Defer Image Loading to Clear Critical Rendering Path

Deferring image loading will help declutter the Critical Rendering Path and speed up overall performance. Deferred loading is done with lazy loading script which 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.

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.

7. 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.

8. 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 browsing experience for returning customers, and make Google PageSpeed Insights happy. Most of the time, a good CDN will offer longer cache lifetime by default and to some extent handle this setting for you.

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

9. Use Multiversion Images Based on Screen Size

Responsive design offers new challenges and opportunities to Magento developers. One such opportunity is the use of different 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:


Alternative implementation:


Either of these methods will work. The <picture> tag method has the advantage of easier 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.

10. Replace Images With CSS3 Styles

CSS3 is so much more capable than most people expect it to be. 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 handles 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.

11. Remove 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. Instead of pictures, use actual text and quality fonts. It’s fully searchable, selectable, zoomable, accessible, SEO- and high-DPI device friendly.

12. Clean Design Is Fast Design

This might sound like trivial advice, but take a long look at your design. What kind of pictures you can 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.

13. Educate Employees on Best Practice Magento Image Upload

Even though we can do so many things to automate and streamline image handling, you can’t work around the human factor. If you don’t educate your content managers, salespeople, and store owners on proper image handling, your image optimization will slowly deteriorate, setting you back to the previous levels of store performance.

Rules to maintain efficient Magento image optimization:

  • save images in optimal file formats,
  • resize and crop images to their display size before upload,
  • use different filenames when re-uploading existing images to avoid caching issues.

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.

Google PageSpeed Insights offers dedicated audits for images that will show you where your challenges are. Want to know more how to tackle PageSpeed Score? Read our guide. And if you’d like to partner with an experienced team and solve your Magento image optimization challenges even faster, we are here to help.

Magento tips from real projects
Magento tips from real projects
Close
CALL US 24/7:
Australia
& asia
+61 (02) 8005-7494