A practical guide to image optimization for Shopify stores
You may have hundreds or even thousands of product and collection images, as well as homepage banners and blog images within your Shopify store. If your images are large and unoptimized, they will likely cause your Shopify website to load slowly. This can hinder your efforts in getting visitors to browse your store, and in turn can massively affect your conversion rates and retargeting efforts.
No-one likes a slow-loading website. Even the most patient of web visitors aren’t prepared to wait more than three seconds for a website to load. If you don’t want your store visitors to click away in frustration and head over to a competitor store, a fast site speed is something you need to keep on top of.
Optimizing your images is a very positive step you can take to boost your store’s loading times — and it’s a step many other Shopify stores are already taking. Caravan Cover Shop is one such example. This Shopify store managed to reduce its homepage load time by three seconds, and get their product pages loading three times faster too.¹
In this blog, you’ll learn what image optimization is all about, why image compression is important and you’ll discover different image formats. You’ll also learn how you can make your images SEO-friendly so that they work to improve your organic search engine rankings.
What is image optimization?
High-resolution images can take up a lot of bandwidth during loading, making them load slowly. Image optimization is all about reducing the size of your images, without reducing the visual quality of them, to make your webpages load more quickly. It’s also about making sure that search engines can easily find your images and return them in search results.
Why is image compression important?
Image compression is a major part of image optimization. It’s how you take a large image and turn it into a smaller one. There are two types of image compression, lossy and lossless. Lossy image compression involves removing data from an image to reduce its file size. Lossless compression shrinks the entire image file while keeping visual quality intact.
If you compress an image using lossless compression, you can restore the file to its original state if needed. But with lossy compression, because some data in the image has been removed, it can’t be restored. So image backups are important if you use this type of compression.
Different image formats (and why WebP is best)
There are many different types of images. This section covers some of the main raster file formats, which are resolution dependent.
PNG — this image type is high-quality and lossless. PNGs are often used for graphics that have different layers, for example, logos that have a color version, a black and white version, or a transparent background.
JPEG — a JPEG image file is lower-quality than a PNG file. It’s a lossy compression format; the size of an image can be significantly reduced if compressed to a JPEG, but the payoff is quality.
WebP — this is a superior image format developed by Google. It supports both lossless and lossy compression for web images (and supports transparency). WebP is the best image type to use if you’re undertaking image compression. WebP lossless images are much smaller in size than PNGs by around 26%.2 And WebP lossy images are between 24–34% smaller than JPG files.²
Here’s a visual showing the same image in its original state, before being converted to JPG and WebP. As you can see, it’s impossible to detect any detrimental visual quality changes with the naked eye!
Optimizing your images for SEO
Another crucial part of image optimization is related to image SEO. You can make your images SEO-friendly by creating relevant image filenames and alt text for them.
Image filenames
When you take a photo with your camera, the image is automatically assigned a filename, usually made up of random numbers. By giving your image a new, more relevant filename, you can instantly make it more useful to search engines.
For example, let’s say you have a business selling awesome coffee beans. When you take a photo of a new product (caramel-flavored coffee beans), instead of your image filename defaulting to 693950.png, you could rename it to ‘caramel coffee beans large pack.png’.
Image alt text
Search engines such as Google look at alt text when deciding how to rank content. If you use alt text correctly, you can help search engines to find your images and display them in search engine results.
Alt text simply means ‘alternative text’. As well as being used by search engines, alt text is crucial in helping visually impaired people understand what an image is about. Alt text should be as descriptive as possible and include a keyword or phrase that you’re trying to rank for.
Imagine now that you’re also selling a range of reusable coffee cups as part of your coffee e-commerce business. You might want to improve your rankings in Google for the keyword ‘reusable coffee cups’. So your alt text could be:
img src=”Stylish reusable coffee cups.png” alt=”Stylish reusable coffee cups in black, white and brown.”
For best results, your alt text shouldn’t be too long — no more than 125 characters in length. A detailed guide about image SEO can be found over in this guide if you want to learn more about this topic.
You can add alt text to your Shopify images as you upload them to your store. Or you can use an app like TinyIMG, an automatic image compression app that also automatically adds relevant alt text to your images.
Top takeaways about image optimization
Image optimization helps you to speed up your Shopify website, improve your search engine rankings and means you can provide a better browsing experience for your store visitors. If you’re looking to implement image optimization for your store, remember the following:
Consider lossy or lossless — the latter shrinks the entire image file, so you don’t lose any image data. Take backups of your images if you’re planning to use lossy compression.
WebP is best — web images need to be as small as possible without impacting on visual quality. WebP is an image format that offers superior image compression, resulting in the smallest file sizes.
Carry out image SEO — renaming your image filenames and adding relevant alt text to your images will help search engine bots crawl your images — and doing this is better for accessibility purposes.
Use an app — manually optimizing your images is tedious and time-consuming. An image compression app will save you heaps of time and hassle.
For further reading about image optimization, you might like to check out this Shopify blog which contains 10 must-know image optimization tips.
Author bio: Ieva Dauderyte heads up digital marketing at TinyIMG, Tobi and the very successful omnichannel marketing app, Firepush, which helps Shopify stores drive sales, improve conversions and increase customer lifetime value. Several Shopify Plus stores are achieving more than $1 in revenue from Firepush push notifications alone.
Sources:
1 Case study Caravan Cover Shop — TinyIMG.
2 A new image format for the Web — WebP.
To learn more e-commerce marketing strategies or Shopify marketing tips, please follow our Facebook Page! 👉 https://www.facebook.com/akohub
