Offering a better and more immersive shopping experience is a necessity in e-commerce today.
One way to achieve this is to invest in your website’s visuals. According to research by 3M Corporation, visuals communicate information 60,000 times faster than text. And 23% of Google searches are for images.
As compared to traditional brick-and-mortar stores, online shopping comes with its own set of restrictions. These include being unable to physically see, touch, and/or feel the products before making a purchase. To combat this, your store needs to use a wide range of high-quality product images.
According to various studies, consumers are willing to buy faster and pay more for products they could get a better look at before making their online purchase. The right product imagery is a massive trigger for making faster purchase decisions. However, large images can make your website slow and laggy.
This affects the UX of your Shopify store. Using images of lesser sizes makes your web pages lighter and hence, faster. This is where image optimization comes into the picture. In this article, we will be discussing how to get you started on image optimization to improve your Shopify store performance.
What is image optimization?
Image optimization is an important aspect of website management that deals with reducing the image size which helps in improving the page speed of your website. Faster loading time automatically means better User Experience (UX). Thus, image optimization helps enhance the shopping experience of a user drastically.
However, there’s more to image optimization than just reducing the file size. Image SEO, responsivity, and product photography - all play a significant role in optimizing images for your eCommerce store.
Why focus on image optimization?
Product images are one of the most important aspects of an eCommerce store. Brands spend lots of time and resources on ideating, planning, and executing the product shoots to capture the very best shots that appeal to their customers. And usually, this process doesn’t stop just there. There’s lots of post-production editing that follows to perfect the product images.
Nevertheless, despite all these efforts, chances are that your image is still not completely optimized to help you improve your conversion rate. Here are some of the many ways in which image optimization helps your Shopify store become and perform better -
Enhances the User Experience (UX)
Usage of optimized images that are clear, non-stretched, and non-blurry allows shoppers to properly visualize the products better and understand their specifications before making a purchase decision. This enhances the overall shopping experience of the user.
Improves page speed
Website images that are optimized do not add excess load to your Shopify store. It is always advised to try and keep your website loading time to as low as 3 seconds. Anything beyond that will affect how your store visitors perceive your brand. Image optimization helps cater to this need.
Improves SEO efforts
Great page speed also adds up to your overall SEO efforts. And thus, your store will get ranked higher thus driving more website traffic.
Why default Shopify images are not enough?
The kind of product images your Shopify store requires depends entirely on what product you’re selling. For instance, if you were an online furniture store, you’d require mostly landscape shots. However, if you were a beauty and cosmetics brand, you’d require close-up shots of the face.
This means there can be no fixed default image ratio that will work across all different domains.
But when you pick out a theme for your Shopify store, more often than not the default image ratio is set to 1:2. And chances are, your product shots may not fit right into this given ratio.
It is always best to follow the recommendations of Shopify on image sizes to enhance the browsing experience of your website. Nevertheless, you also need to ensure that you do not compromise on the quality, look and feel of your website images to achieve this as well. You need to be able to leverage both the technicals and the aesthetic of your images.
What are the recommended image sizes on Shopify?
Here are the Shopify image size recommendations -
- Maximum image size: 4472 x 4472 px
- Square image size: 2048 x 2048 px
- Maximum image file size: 20 MB
- Image resolution: 72 DPI
Here are some of our recommendations as Shopify experts on image sizes based on different use-case -
- Product images: 2048 x 2048 px
- Collection images: 1024 x 1024 px
- Featured promotions: 840 x 840 px
- Slideshow banner images: 1600 x 500 px
- Newsletter popup image: 425 x 575 px
- Shopify background image: 1920 x 1080 px
- Megamenu images: 360 x 360 px
- Blog page top banner: 1800 x 1000 px
- Favicon: 32 x 32 px
- Shopify: 450 x 250 px
- Checkout page top banner: 1800 x 300 px
- Video placeholder image: 1600 x 900 px
- Password page background image: 1600 x 1000 px
How to optimize images for your Shopify store?
1. Reduce the image file size
If your Shopify store has lots of large images, your online storefront will slow down. While showcasing your best on your website is necessary, striking a balance between the looks and image loading time is equally important.
Reducing image sizes is one of the first and most mandated steps in improving your Shopify store page speed. Note that the ideal file size is 70 KB. You can reduce the size of images on your website using two approaches -
Lossy compression
Here, some data from the image is removed which helps reduce the overall file size. However, do note that this method of image compression is non-reversible. Hence, you cannot revert back to the original image size without any loss. We recommend creating a copy of the image before you compress it using this method.
Lossless compression
Lossless compression is another way to reduce the image size without making any changes to its composition whatsoever. You can use Adobe Photoshop Express or Canva to execute this.
2. Change the image file format
What file format you pick depends on the purpose and usage of the image. For instance, it is best to use PNG for the logos and JPG for product shots.
Here are some of the best image formats to use on your Shopify store -
JPG/ JPEG - product images, screenshots
Shopify recommends using the JPG file format for images for product pictures.
JPG is one of the most commonly used image file formats out there. This image format supports a very good color range despite its comparatively smaller file size. JPG also allows easy compression, if needed, while still retaining good image quality.
PNG - logos, transparent images, graphics
PNG is yet another commonly used image format on Shopify stores. This format is great for logos and transparent images since it lets you maintain good image quality despite varying image dimensions and sizes. Since PNG supports transparent background, it lets you execute your ideas much more easily.
However, the file sizes of complex PNG images can be very large because of the lossless compression.
GIF - animated images/videos
GIF supports animation. However, do not use it for large and detailed images. It is best suited for smaller images with fewer details.
TIFF - high-quality images, commercial prints
TIFF is another lossless compression image format that is compatible with Shopify. This format is usually uncompressed and contains lots of original data. An interesting feature of TIFF is it lets you save multiple images and pages in a single file.
Thus, TIFF is a great choice for web apps since editing the images is much easier here. Nevertheless, the file sizes are also very big. And so, we suggest converting TIFFS into JPEGs as much as possible.
3. Name your image files with suitable keywords to improve SEO
If you want your product to list on the top of the results when a user searches for the required item, image SEO is crucial.
By default, every image has an auto-generated name associated with it. This is usually a sequence of lengthy alpha-numeric strings. Something like Screenshot_10052020_9:05AM.jpg. Such a long file name can affect the performance of your page and it won’t show up in search results either.
Instead, focus on the descriptive naming of your products. Analyze what are users searching for, figure out the keywords and incorporate them into your image file name. For instance, if you were an online furniture store, name your products like “brown bookshelf”.
4. Revise Alt attributes
Alt-text is what appears in place of an image before it is fully loaded or when the user’s browser does not support the image type. The alt text is also visible when users hover their mouse over the image.
Optimizing your image alt text will improve your chances of ranking on search engine results.
Remember to keep your alt text as simple and to the point as possible. Just use easy and descriptive language instead of just cramming in a bunch of keywords.
5. Keep tabs on the number of images per product page
Yes, many images on a single page drastically affect the loading time of your website. And so, you may be tempted to remove as many pictures as possible to combat this issue.
However, product images are the lifeline of online shopping. Removing this element without first analyzing the conversion and click through rates will cost your business. You need to be able to realize that you need images on your eCommerce website. And so, simply scrapping most of them off is not an option most times.
6. Make sure images are responsive
Today, the main device for retail website traffic and orders is a smartphone. According to Statista, retail m-commerce sales in the US crossed $360 billion in 2021. That number is expected to grow almost twofold (approximately $710 billion) by 2025.
And so prioritizing responsive website design is more important than ever. You should be able to provide your customers with a seamless shopping experience irrespective of the device in use.
One such key step in doing so is making sure your images are responsive. To make your task easy, you can simply use a modern and responsive Shopify theme and it will do the job for you.
7. Lazy load images
Lazy loading is a technique to optimize your images and in turn, your website’s performance. Here, we delay the loading of visuals that a site visitor is yet to see. The browser will only pre-load content that the user will see first; mainly everything above the fold. It aids in improving the website speed and performance.
8. Create image sitemaps for your store
If your website makes use of carousels, or galleries, most times these images can be missed by Google. And so, it is going to negatively affect your SEO.
To fix this issue, you can create a separate sitemap just for your images. Sitemaps help Google note what is on your website and help in crawling your website content. This improves your Shopify store SEO.
Here’s a detailed guide by Google to get you started on image sitemaps for your website.
9. Test images
Testing is an integral step before you present your upgraded store to your customers. This applies to image optimization as well.
Here are some of the things you will have to test out -
- SEO
- Page speed
- Conversions
Testing will help you execute your priorities and goals in the right and most efficient way possible.
Conclusion
Attracting site visitors can be a strenuous task. However, just doing that will soon be meaningless if your store visitors leave without making any purchase whatsoever. So as important as setting up and designing your store is, optimizing it to offer the best User Experience (UX) is also crucial.
You can reach out to us to create a store design for your brand that is optimized to improve your conversion and retention rates.
