How to Optimize Images in Magento: Your Starter Kit for Faster Web Pages
Guides & Advice
How to Optimize Images in Magento: Your Starter Kit for Faster Web Pages
BACK TO BLOG
How to Optimize Images in Magento: Your Starter Kit for Faster Web Pages
/
9 MIN READ
SHARE THE ARTICLE

Learn How to Optimize Images in Magento to Make Your Site Load Faster

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. 

Why you need to optimize images in Magento

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:

Mobile

average bytes per content type on mobile

Desktop

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. 

Magento 2 optimize images: How can I tell if my images need to be optimized?

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. 

The only way to know for sure is to run your site through web performance tools. We recommend using a combination of Google PageSpeed Insights (PSI) and Cloudinary Image Analysis Tool

Google PSI is a great tool for testing speed. For testing image optimization, look for these audits in the “Opportunities” section:

  • Properly-sized images - Serve images that are appropriately-sized to save cellular data and improve load time.
  • Images in next-gen formats - Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.
  • Defer offscreen images - Consider lazy-loading (delaying image download) to save resources and increase page load speed.
  • Efficiently encode images - Optimized images load faster and consume less cellular data.

Google PageSpeed Insights image analysis

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.

How to optimize images in Magento: Your starter kit

Scale/Resize images

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, 800x600. 

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. 

Choose the best file format

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?

Choose image file format

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

Image requests by format

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:

  • WebP lossy support
    • Google Chrome (desktop) 17+
    • Google Chrome for Android version 25+
    • Microsoft Edge 18+
    • Firefox 65+
    • Opera 11.10+
    • Native web browser, Android 4.0+ (ICS)
  • WebP lossy, lossless & alpha support
    • Google Chrome (desktop) 23+
    • Google Chrome for Android version 25+
    • Microsoft Edge 18+
    • Firefox 65+
    • Opera 12.10+
    • Native web browser, Android 4.2+ (JB-MR1)
    • Pale Moon 26+
  • WebP Animation support
    • Google Chrome (desktop and Android) 32+
    • Microsoft Edge 18+
    • Firefox 65+
    • Opera 19+

Compress your images

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.

image compression lossless and lossy

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.

Compress and resize images Google

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.

Remove unnecessary images and 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. 

Mobile page speed conversions Google

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.

Use a CDN

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. 

Lazy load images

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.

Magento image optimization extensions you can use

  1. TinyPNG and TinyJPG
  2. Amasty Google Page Speed Optimizer
  3. Apptrian Image Optimizer
  4. Piio Image Optimization
  5. MagePlaza Magento Image Optimizer
  6. JaJuMa WebP Optimized Images
  7. Amasty’s Lazy Load for Magento 2

Elogic discovers its blog page is bloated with oversized images

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:

  • We identified the unoptimized images. In our case, it was easier because all the blog images needed to be optimized.
  • We scaled the images down to an appropriate resolution by following the GTmetrix guide to optimizing images based on maximum display size. 
  • Then, we ran the scaled image through lossless compression using Kraken.

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.  

Before

before and after image optimization elogic

After

before and after image optimization Elogic Commerce

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

Our recommendations on how to optimize images in Magento

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.

COMMENTS
1
Leave a Reply
avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Anatolii Ulitovskyi Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Anatolii Ulitovskyi
Guest
Anatolii Ulitovskyi

Thanks Yuriy. I like your article. I prefer WordPress, however, I have a few clients with Magento. Site speed is a ranking factor. It’s important to load faster as possible. Additionally, websites lose 20% of conversion for each second loading. Yuriy, I scheduled to share some infographics from your article. Wanna more valuable content.

The knowledge of ecommerce development delivered to your inbox monthly
NEWSLETTER
Thank you!