Concerned about your Magento performance? Don’t fret. The easiest yet most overlooked way to turbocharge your website is to optimize images.
The thing is: once you click a website link, the server calls all the website files to load. That’s how you see them on your screen. But often, images constitute a huge part of all files, which is why your store may be sluggish.
That is why Magento image optimization is so important for websites. The faster your store is, the more likely your shoppers will complete their orders. Read on to learn how to optimize images in Magento and see the Atwix tried and tested tricks about Magento 2 image optimization.
Common Image Optimization Mistakes to Avoid
Optimizing images for Magento is essential to ensure a smooth user shopping experience. Here are some common image optimization mistakes to avoid, specifically when working with Magento:
- Uploading Large Images: High-resolution images look great on camera, but they are the primary reason for slowing down your website. Resize and compress images before uploading them to Magento to ensure faster load times.
- Not Using Magento Image Optimization Features: Magento offers built-in image optimization features, such as automatic resizing, compression, and format conversion. Ignoring Magento’s built-in image optimization features can result in poor performance.
- Neglecting Alt Text: Alt text is crucial for accessibility and SEO in Magento. Without adding descriptive alt text for all images, you risk compromising your user experience and search engine rankings.
- Not Optimizing Thumbnails: Thumbnails are an integral part of eCommerce websites. Optimize thumbnail images to reduce load times on category pages and product listings. Overlooking the optimization of thumbnail images can lead to slower load times and frustrate users browsing your products.
- Using Incorrect Image Formats: Choosing inappropriate image formats can result in longer loading times, especially on mobile devices. Choose the appropriate image formats based on the content. Use JPEG for photographs, PNG for transparent images, and SVG for vector graphics. Magento supports WebP as well, which provides excellent compression.
10 Ways to Speed Up Image Loading for Magento
Atwix has been operating in the eCommerce market for years, and all our performance audit projects have included Magento 2 image optimization in our scope of work.
Here are ten tips from our experts to help you achieve a snappier image-loading experience.
1. Compress Images for Quicker Loading
Uncompressed PNGs, JPEGs, and GIFs add significant overhead to the website. The benefits of good compression are more remarkable for larger images. Don’t be afraid to sacrifice image quality. Unless you go overboard, lossy quality eliminates intangible components of the image that hardly affect how good the image appears to the viewer.
It is not an option to let image quality slip to the point where it is obvious. Therefore, we advise choosing 82% lossy image compression when going for lossy. There are three primary methods for compressing photographs on your Magento website.
- Image compression for the store
- Image compression before uploading
- Image compression for Magento 2 with a content delivery network (CDN)
You can combine a server-side tool with an effective CDN to get the best of both worlds. Doing so allows you to compress your current images effortlessly and benefit from CDN image caching.
2. Use Modern File Formats
New image formats offer significant efficiency and performance savings. For instance, compared to JPEG and JPEG 2000, WebP can reduce file size by up to 30% without sacrificing image quality. Popular browsers like Opera, Firefox, Android, MS Edge, and Chrome support WebP.
There’s no need to convert your images to WebP if you employ a robust CDN. However, if this is not the case, you should definitely check for WebP pictures support for the new format distribution. For example, a Modernizr JS package supports HTML5 and CSS3 in web browsers. Then, you can use the HTML5 element to offer WebP when suitable.
Remember that hosting a second version of every image in WebP format will require you to use nearly twice as much data storage as you already take. Before implementation, carefully evaluate your infrastructure investments and the inevitable increase in data storage expenses.
Read also: How to import a product image from an URL in Magento 2?
Need a hand with Magento 2 image optimization?
Reach out to us at Atwix and speed up your store with an advanced performance audit
3. Enable Progressive JPEGs
Enabling progressive JPEGs is another suggestion for Magento 2 picture optimization. Thanks to the progressive JPEG image format, the browser can load images qualitatively rather than quantitatively. In other words, it loads the website’s photos incrementally, gradually enhancing the quality of the displayed image from 0% to 100%.
Even though progressive JPEG has been available for roughly ten years, few websites currently use it. The distinction between sequential and progressive JPEG might not be visible on computers with decent Internet connection (over 100 Mbit per second). With this connection speed, the browser loads the image so quickly that its highest quality is downloaded nearly immediately.
However, the difference between the sequential and progressive formats is pretty evident if the connection is poor. If your users shop on mobile networks like 3G or if the image is very large, moving to a progressive JPEG can benefit your online store.
You can save an image in a progressive JPEG format in different ways. Using an online tool like jpeg.io is the easiest of them all. Additionally, you can customize your server or use a plugin.
4. Use Vector Images Whenever You Can
Clean, neat design speeds up your website. What types of images can you delete? You can use vectors, CSS, and even fonts to replace some. Speed up the rest using a solid CDN and a smart configuration for lazy loading. Making your store lighter and cleaner is the best course of action.
Better image quality, smaller file sizes, and good scaling to any resolution are all features of SVGs. While not appropriate for every image, icons and other minor UI components are where vector files excel at. Raster graphics need less CPU power, but the vector format is superior across many other characteristics:
- the most responsive design;
- no loss of quality;
- zoom-friendly photos.
5. Defer Image Loading to Free Up Critical Rendering Path
Another Magento technique for optimizing photos is to defer image loading. It will speed up overall performance, clear out the Magento TTFB (Time to First Byte), and simplify the Critical Rendering Path. With deferred loading, the appearance of images (including gifs, pictures, and other media) on screen is controlled by a lazy loading script.
One of the most effective strategies is lazy loading, which enhances perceived performance without sacrificing quality. Its implementation is SEO-friendly and doesn’t require extra CPU or RAM; users who don’t scroll down save bandwidth, etc. When properly implemented, lazy loading enhances the user experience without draining your server resources.
6. Activate Fastly Image Optimization
This Magento 2 image compression service, sometimes called Fastly IO, speeds up picture delivery. It is a good option for managing several image types, such as JPEG, PNG, and GIF.
Fastly can drive lossy conversions and employ pixel ratios that adjust to different screen resolutions, which is great for progressive web apps (PWAs). It can also automatically convert lossless product pictures scaling to lossy. You need to enable, set up, and then check Fastly for it to function correctly on your store.
Fortunately, Fastly has rather broad configuration options. You can specify how much image quality will be lost during compression. Additional features of picture optimization, such as resizing filters, are configured by other Magento image compression options. For instance, your photographs will initially be displayed at poor resolution before gradually improving their quality if you choose the “Default JPEG format” to be “Progressive.”
AT Atwix, we recommend validating the tool once you begin using it. Do a Magento performance test on your store’s website to evaluate its performance with and without Fastly.
7. Set Static Cache Expiration Time to One Year
The most common static cache recommendation from Google PageSpeed Insights is one year. This is sound advice mainly if you manage versioning through filenames (uploading fresh product images with unique names, for example). This modification ensures that the new file updates properly instead of remaining outdated.
It will conserve bandwidth, enhance the surfing experience for regular visitors, and please Google PageSpeed Insights by using longer cached pictures. A decent CDN will typically provide a longer cache lifespan by default and, to some extent, manage this option for you.
8. Use Multiple Versions of Images Depending on Screen Size
Magento developers face new opportunities and challenges thanks to responsive design. Utilizing distinct image versions for varied screen resolutions is one of the opportunities. Magento will display the version of the image that best fits your display based on your viewport.
For instance, if you change the size of your screen from 960 pixels wide to 240 pixels wide, the server will be forced to convert from the wider image to the narrower image as elements gather and need to find their position in the new layout.
Using a <picture> tag is a different implementation option. HTML5 <picture> enables you to provide various alternative image sources for a single file in priority order, boosting responsive designs and optimizing for various viewport choices.
Both of these approaches work. With the <picture> tag method, testing is made easier because you can quickly replicate a smaller device in software to check the design functionality. In contrast, the srcset technique is a little bit more complex.
9. Use CSS3 Instead of Images
CSS3 can do more than most people realize. It provides a fantastic vector of optimization to replace some images with CSS3 styles. For whatever screen resolution, device, or zoom level, CSS3 is 100% capable of handling shadows, animations, and gradients.
CSS3 effectively recreates simple geometry. You can build the exact intricate geometrical figure and apply a gradient using CSS rather than SVG. Using CSS to replace images speeds up websites and improves performance. The more replacements you make, the more impact these optimizations create.
10. Remove Text on Images
It’s surprising to see so many photos with text still floating around the Internet. Placing text on images is a poor practice in every possible way. Photos are made bulkier, cannot be searched for, and are generally terrible for displaying text.
Instead of using pictures, utilize actual text and high-quality fonts when you develop your Magento 2 image optimization plan. It will make your text searchable, selectable, zoomable, accessible, SEO-friendly, and compatible with high-DPI (Dots per Inch) devices.
How to Optimize All Magento Photos at Once?
So, let’s get to the point and discover how to optimize all Magento images at once.
First of all, you should connect to the server via SSH. After it, install two utilities for optimizing *.png and *.jpg files. The first utility is optipng for optimizing PNG files. You will also need to fire the following command in your shell to install it:
apt-get install optipng
And the second one is jpegoptim for optimizing JPG files. In order to install this utility, fire the command below:
apt-get install jpegoptim
As a next stage, optimize PNG images in the media/catalog folder which usually is the heaviest one in Magento installation. For this, open the media folder and execute the command below. Its role is to find and optimize all the PNG images in all sub-folders of catalog/.
cd media find catalog/ -iname *.png -print0 |xargs -0 optipng -o7
Once you have executed that command – wait for some time to see the result.
In order to optimize images in Magento, open catalog/ folder and there you will need to fire the similar command, but it will find and optimize all the JPG images in all sub-folders.
cd catalog
find -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;
Final Takeaway
Magento 2 image optimization will certainly speed up your website and pave the way for more conversions. The aforementioned steps will serve as a fast and effective solution to your performance issues.
And if you still find them too technical, no worries – Atwix is here for you! As an expert Magento development company, we have helped hundreds of clients tackle their performance issues by doing Magento performance audits and taking off the strain of doing it manually, image by image.
Reach out to us to maximize your Magento performance
Leave the tech to Atwix experts while you focus on your business
FAQs
What is the difference between lossless and lossy image compression?
Lossless compression reduces the size of the image, maintaining image quality. It is suitable for graphics and images requiring high fidelity. Lossy compression sacrifices some quality for smaller sizes. You can use it when a slight quality reduction is acceptable.
Can I use multiple image formats on my Magento site?
Magento supports formats like JPEG, PNG, GIF, and WebP. You can choose formats based on image type for optimal display and performance.
How often should I perform image optimization on my Magento website?
Image optimization is an ongoing process for maintaining website performance. The frequency of image optimization on your Magento website depends on your content updates, design changes, and technological advances. Aim to optimize images before uploading them to your Magento site and periodically review and optimize existing images. It will ensure your website loads quickly and provides a smooth user experience.
