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 product images, content, and features to load.
Your customers, on the other hand, do not share your excitement. In fact, Think With Google estimates that for every extra second it takes for your page to load, your store bounce rate increases by 36%. 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 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.
Outline
I. What is Image Optimization?
To optimize an image means to reduce 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.
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. How to Optimize Product Images
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 onlineimagetools.
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 which 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 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 buzz words, 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 just that, it also makes you seem more professional and trustworthy.
5. Leverage On 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?
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 Images
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 site images' 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 images 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.
Read more: Best Practices for Website Speed Optimization
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
Final Words
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.
