You may be super excited about your newly launched e-commerce business and Shopify store, so you don't mind waiting an extra minute for all of your Shopify product images, content, and features to load.
Your customers, on the other hand, do not share your excitement. In fact, According to to Think With Google, the likelihood of a bounce increases by 32% as page load time goes from 1 second to 3 seconds. But this doesn't mean that Google hates you or that hackers are trying to hinder your progress.
You can easily increase the speed at which your page loads by as much as 21% of its original speed. No, it is not magic; it is shopify image optimization. If you're trying to check the effects of large images on your Shopify site speed, be sure to run a speed test using our free tool TestMyStoreSpeed.
I. What is Image Optimization?
Optimizing images means reducing the file size of an image by using a plug-in or script, which leads to faster loading time and a better shopping experience for your customers.
Notwithstanding, image optimization isn't just about reducing file size. It involves everything that can be done to and with an image to increase its impact and usefulness on your page while preventing the said image from slowing down your page. This includes image SEO and product photography.
Shopify image optimization need not come at the expense of picture quality. This is why we will discuss a few ways to optimize website images on Shopify without sacrificing quality in this article.
II. Why you should Optimize Images for your Shopify Store?
- Improved Load Times: Optimize images to reduce load times, enhancing user experience.
- Enhanced User Experience: Fast-loading images keep visitors engaged and increase the likelihood of purchases.
- Higher Search Engine Rankings: Optimized images contribute to faster load times, boosting SEO rankings.
- Reduced Bounce Rates: Quick-loading images lower bounce rates, encouraging visitors to explore more.
- Cost Savings on Bandwidth: Optimize images to save on bandwidth costs, especially with high traffic.
- Better Mobile Performance: Optimized images load faster on mobile devices, improving mobile user experience.
- Professional Appearance: Clear, crisp images make your store look more professional and trustworthy.
- Compliance with Shopify Guidelines: Following Shopify’s guidelines by optimizing images ensures smooth operation.
III. How to Optimize Images for Page Speed?
1. Reduce The File Size of Your Images
Source: BatchPhoto
If your webpage has really bold images splattered across the board, you may want to consider if they really are necessary. How big do these photos need to be to prove the point? As always, it is important to balance attractiveness and loading time.
For Shopify store owners, most images have already been compressed for you. If you, however, need to increase your page speed further, consider optimizing your images. But using a page speed booster is another way of increasing the page speed.
There are two ways to reduce the size of an image: lossy or lossless compression.
In lossy compression, some of the data in the image are removed, reducing the kb size of the image. On the downside, this kind of image cannot be reverted to its original size without loss of quality. As such, it is advisable that you create a duplicate of the image before you begin compressing. You can create duplicates of your images using free tools like online image tools.
Lossless compression involves reducing the size of the photo without making any changes to its composition. Common apps that can achieve this are, Pixlr, Canva, and Adobe Photoshop Express.
While reducing file size, keep in mind that the ideal file size is 70kb, so you don't overdo it.
2. Change The File Format
Source: Ignition Drawing
There are many formats in which an image comes, but agreeably the most popular one is the JPEG format, represented as .jpg in your file name. Other formats include GIF, PNG, and WebP.
When choosing a file format, consider the purpose that the image serves. For example, for large images that make your page interactive, the JPEG format is the best option. They retain quality at large file sizes and can be easily resized. Here are a few examples of file formats and when best to employ them:
- JPEG format: This is the Internet standard for image formatting. It retains its quality at both ends of the scale. The JPEG format supports large file sizes and low file sizes. It can also be easily resized by most image editing apps.
- PNG format: Although they have larger file sizes than the JPEG format, they are better for decorative images such as logos. They also have great quality and can be resaved multiple times without losing quality, unlike JPEG images. Consider using a few PNG images to improve the overall look of your online store.
- GIF format: This picture format supports animation and decorative images, but they should never be used for large, detailed images. It is perfect for simplistic images with a small size.
- WebP format: This is a relatively new format developed by Google. It is probably the most easily compressible file format for images.
3. Descriptive Naming
Source: Louis Myers Visual Social Media
When it comes to image SEO and making your image pop up when a potential client uses the Google search bar, descriptive naming is the game-changer.
Usually, your computer or camera assigns a name to the picture when you download it, for example, Pictures/Instagram005420210512.jpg. This long file name contributes to the lack of shopify image optimization your page suffers from. With this file name, it would be impossible for your image to show up when your product is searched.
A much better way to name your file is to use a descriptive name. If you sell clothes on Shopify, you could name each image file like this "Pink shift dress" or "satin wedding dress”.
4. Revise Your Alt Attributes
Source: Uplinky Software
If your page takes too long to load, your customers probably spend quite some time looking at your alt text. Alt-text is the string of words that appear in place of an image before it is loaded by the browser or when the browser cannot support the image. Even when the image appears, the alt text can still be read by hovering your mouse about the picture.
This is why they make for great SEO. If you want your images to pop up when searched, consider optimizing your alt text.
The key to writing great alt text is simple, "less is more." Instead of stuffing the alt text with keywords and buzzwords, use simpler language that describes your product. For instance, compare these two alt texts.
"Leather shoe for sale price slash comfortable."
And
"2008 LV Brown leather shoe size 42"
It's no question; the second option makes a better alt text. Not only that, it also makes you seem more professional and trustworthy.
5. Leverage On Shopify Product Photography
Imagine making a client wait three extra seconds just to see an image, and it turns out to be a drab image. Tragic. If they continue surfing through your page at all, it would be annoying. We don't want that now, do we?
Taking Shopify product images
If you're going to sacrifice some page loading time for an image, it better be worth it.
Product photography isn't just about colors and angles; it also covers the strategic positioning of images to make the most impact in a few seconds. Call it clickbait, call it wisdom, but images are known to be the best way to grab a potential customer's attention. These images are best coupled with catchy phrases.
An easy way to use product photography to improve page speed is by learning how to take pictures from flattering angles. This helps your page because you will find that you need fewer pictures to show what really needs to be shown. With the right angling, there is no need for a front shot, side shot, and then backshot of the product you are trying to sell.
6. Test Your Shopify Image Quality
Of course, the whole point of optimizing your images is to increase page speed. This implies that you have to closely monitor the time it takes your page to load completely, down to the millisecond. Every fraction of a second saved earns you one more customer.
A great way to test your shopify image quality impact on your Shopify site speed is by running a speed test using TestMyStoreSpeed. Using the TestMyStoreSpeed app, you can now identify the speed killers slowing down your website and work on them. You can also run a speed test on your store before and after optimizing images and compare the results in the history section.
That said, if you've followed through with these optimization techniques and witness no significant improvement in your site speed, then maybe your
shopify image quality were not the problem in the first place.
However, before you come to that conclusion, you need to study the trends of your consumer audience. Here are a few things to consider
7. The Number of Product Images Per Page
You may be tempted to scrap a lot of images just so it loads quickly. That may be good, or that may be bad for your business. Each page has its unique momentum. It is wise to study the conversion rates and clickthrough rates before making such drastic changes to your web page.
8. Product Photography Style
Your audience may have already associated you with a particular style of product photography. If that is the case, you should stick to it or find a way to enhance it without betraying the bonds you've built with your customers over the years.
9. Image Impact
This should be a given, but even when optimizing images, watch out for the images that may be responsible for your conversion rates. It is advisable to let them be, even if they take up some space. Nonetheless, it is all up to you to consider what steps and in what direction you want your business to advance.
Check out this article to know How to Optimize Video For Faster Loading Time
IV. Optimize Shopify Images for your Landing page
Optimizing images on your Shopify landing page is essential for improving load times and enhancing the user experience. By compressing and resizing images, selecting the right file formats, and implementing lazy loading, you can ensure your landing page loads quickly and efficiently.
To dive deeper into optimizing your Shopify store's performance, check out our video:
This tutorial provides valuable insights and practical tips to boost your page speed, helping you create a seamless and engaging shopping experience for your customers.
V. Top Shopify Image Compression Apps for Faster Loading Times
Optimizing images for faster loading times is crucial for maintaining a high-performing Shopify store. Here are some top Shopify image compression apps that can help you achieve this effortlessly:
TinyIMG
- Overview: TinyIMG is a powerful app that automatically compresses and optimizes images in your Shopify store. It offers bulk optimization and supports both JPEG and PNG formats.
- Features:
- Automatic image compression
- SEO optimization for alt text and filenames
- Detailed reports and optimization suggestions
Crush.pics
- Overview: Crush.pics is a user-friendly app designed to compress images without sacrificing quality. It integrates seamlessly with Shopify and offers various compression levels.
- Features:
- Automatic and manual image optimization
- Multiple compression modes (Lossy, Lossless, Custom)
- Backup and restore options for original images
Image Optimizer by Booster Apps
- Overview: Image Optimizer by Booster Apps focuses on reducing image sizes to improve load times and SEO rankings. It provides automatic and bulk optimization features.
- Features:
- One-click image optimization
- Real-time compression reports
- Automatic optimization for new images
SEO Image Optimizer & Resizer by SpurIT
- Overview: This app not only compresses images but also resizes and optimizes them for better SEO performance. It ensures that all images meet the required dimensions for optimal display.
- Features:
- Automatic image resizing and compression
- Alt text optimization
- Detailed analytics and reports
AVADA SEO Speed Image Optimize
- Overview: AVADA SEO Speed Image Optimize offers a comprehensive set of tools for SEO and image optimization. It ensures that your images are compressed and optimized for search engines.
- Features:
- Image compression and resizing
- Alt text and meta tag optimization
- SEO analysis and performance reports
Final Words
It would be disheartening if you had already uploaded lots of eye-catching images to your page, only to realize that you have to take them down and use substitutes with smaller file sizes. This is why image optimization must become a routine, not merely an afterthought.
Remember that no one wants to spend time on a fast-loading but lifeless and colorless page. So ensure that your pictures hit the mark at first glance.
At EcomExperts, we are a skilled Shopify speed optimization agency that offers Shopify maintenance services to Shopify and Shopify Plus stores. We'll help you raise your store speed up to 80+ in one day by running clean lines of code and declogging functionalities in your store. Hire EcomExperts today to improve your search performance and Google search rankings.
About The Author
Andrew Durot lives and breathes eCommerce. After his time at Airbnb, he founded ecomexperts.io - a world-leading speed performance agency. Andrew and his team specialize in Shopify store speed and site performance.
