They say a picture is worth a thousand words, and this old adage is especially true when it comes to ecommerce.
After all, you’re asking customers to place an order for your products without ever getting a chance to evaluate them in person. Providing high-quality images on your Shopify store allows customers to get a good look at what you’re selling, which will help you make more sales.
But compared to other web elements, images tend to have particularly large file sizes — they can make your site much slower if you’re not careful.
In this guide, we’ll review everything you need to know about Shopify image optimization. The best practices described below will help you provide all the images your customers expect while minimizing the impact on site performance.
Why Optimizing Images Is Important
As mentioned above, the main reason to optimize your images is to make your website faster.
According to research conducted by Google, the probability of someone backing out of your site rather than clicking through to another page is 32% higher for pages that take three seconds to load than it is for pages that only take one second to load. In other words, if your Shopify store is slow, you’re going to miss out on a lot of potential sales.
In the United States, 24 million people — roughly 7% of the population — lack access to high-speed internet. And if you sell to less developed countries, an even larger share of your customers likely don’t have a good connection. Image optimization will help you provide a better experience for such visitors.
Image optimization is an effective technique for search engine optimization (SEO) as well.
Search engines use bots called crawlers to find more pages to add to their index. There is too much content on the internet for these crawlers to go through everything, so only a certain amount of time and resources will be spent on any given site (this is known as a “crawl budget”). The slower your site, the fewer pages it will take to reach your crawl budget. That means some pages might not be indexed, leading to fewer people discovering your store.
It’s worth noting that, in addition to the pages that contain your images, potential customers may be able to discover your store through the images themselves. Image optimization will help you rank higher on services such as Google Images and Yahoo Image Search.
Image optimization is also important for accessibility. By making sure that all of your images have an alt description, you’ll help any visually impaired visitors who use screen readers fully understand the content of your pages.
How To Optimize Your Images
Now that we covered why you should be optimizing your images, let’s explain exactly how you can do so:
Reducing image file size
There are two types of image files:
- Vector images: Use mathematical formulas for arranging lines, points, and polygons to represent an image.
- Raster images: Encode the values of each individual pixel to represent an image.
Compression is the process of reducing the file size of an image. There are two types of image compression:
- Lossless compression: Reduces file size by removing unnecessary metadata, but doesn’t lower the quality of the image.
- Lossy compression: Reduces file size by removing some pixel data, which lowers the quality of the image but saves more space than lossless compression.
Furthermore, there are several different formats that you can use for the images on your Shopify store. The table below breaks down the key details of the most popular image formats:
Image Type | Raster or Vector? | Lossy or Lossless? | Relative File Size |
SVG | Vector | Lossless | Small |
PNG | Raster | Lossless | Large |
GIF | Raster | Lossless | Medium |
JPG | Raster | Lossy | Medium |
WebP | Raster | Both | Small |
The ideal format for an image depends on its purpose.
For example, the SVG format is a good match for logos — you will likely need to add your logo to your web pages and offsite marketing materials at several different sizes, and a vector image will make it easy to do so while maintaining a high degree of quality. However, while SVG files are usually small, they can get quite large when you try to use them for complex images like photographs, and the results in this case often don’t look that great anyway.
In general, we recommend using the WebP format for most of the images on your store. Released by Google in 2010, this relatively new file format uses more efficient compression processes than PNG or JPG, reducing file sizes without a significant drop in quality. It also offers both lossless and lossy compression modes, providing more flexibility.
Converting image files to the WebP format is easy. There are many free online tools available for this — all you need to do is drag, drop, and then download the converted file.
To give you an idea of the potential savings, the screenshot below of Squoosh, a popular image optimization app, was originally saved as a 100-kilobyte PNG file. By simply converting the file into the WebP format, we were able to cut the size in half.
Tools like Squoosh will typically give you an image quality slider that allows you to raise or lower the level of compression on demand. It may take some experimentation to get the balance exactly right. You’ll want to reduce the size of the file as much as possible without developing obvious signs of compression, such as blurriness or distortions.
Also, consider the dimensions of your images. The height and width you tend to use may be too large for the amount of space your images are occupying on your site. In that case, be sure to reduce the dimensions of your images (and, therefore, reduce the file size) before you upload them.
To determine which dimensions would be best, review the analytics of your site to see which display sizes are most often used by your visitors. Uploading images with dimensions larger than they would be shown on the biggest common display size is just unnecessary.
Converting animated GIFs into videos
GIF images can be animated — but these animations will be much less demanding on the visitor’s bandwidth if they are uploaded as an MPG or WebM video file instead.
This is because GIF files are lossless, so they contain a copy of every frame in the animation. The MPG and WebM video file formats are lossy, enabling you to save space by removing some visual information. Video compression is more efficient for moving pictures than image compression as well.
As with converting image files into WebP, there are many online tools available for converting GIFs into videos. Ezgif, CloudConvert, and VEED are a few free options.
Lazy loading images
Some pages on your Shopify store, such as a collections page, may contain dozens or even hundreds of images.
Such pages also tend to be quite long, and the user would need to keep scrolling to the bottom in order to see every image. Most visitors aren’t going to get that far before they find what they’re looking for. In fact, many of them may not need to scroll down at all.
Why load images that aren’t even going to be seen? Instead of loading everything at once, you should set up your site so that images only load when they come into the visitor’s view. This practice is known as “lazy loading”, and it’s one of the most effective ways to improve your store’s performance.
Naming your images
By default, your images may be given generic names like “IMG0001.JPG” when you create them.
Go the extra mile and add a custom file name for each image that describes its contents (e.g., for an image of a pair of shoes, change the name from “IMG0001.JPG” to “Nike-Air-Jordan-red-white.JPG”). Search engine crawlers use file names to understand what a page is about, so giving your images descriptive names can help give you a boost in the rankings.
Don’t go overboard, though. If you try to stuff too many keywords into a file name (e.g “air-jordans-red-white-black-white-best-deal-most-affordable.JPG”), you may end up violating a search engine’s spam policies, which can result in a lower ranking or being removing from the listings altogether.
How Shogun Helps Merchants with Image Optimization
Shogun offers a variety of helpful features for Shopify image optimization.
First of all, Shogun’s visual editor provides you with access to a vast library of elements for creating custom ecommerce pages. This includes the image element, which allows you to quickly add, crop, rotate, and resize images on your pages as needed. There’s a convenient space for you to add an alt description to each image as well.
The quality of an image can be adjusted directly from the Shogun visual editor. You can also choose to make certain images responsive (this option is available for non-SVG images that are wider than 720 pixels), which means they will automatically adjust to the size of the visitor’s screen — this improves performance on mobile devices, as only an image of the appropriate resolution will be downloaded to the user’s browser.
Lazy loading is enabled on Shogun by default. Images within the first 700 pixels of page length will load initially, while images included below this threshold will only load if the visitor actually scrolls down to see them.
To further improve performance, Shogun serves images through a content delivery network (CDN). Physical location has a significant impact on website speed — the closer a visitor is to the server that’s delivering their content, the faster it will load for them.
Shogun’s CDN provider, Uploadcare, uses a network of 325,000 nodes located across over 100 different countries. Uploadcare also increases page speed by automatically adjusting the quality of each image for the maximum amount of compression without allowing distortion.
Finally, Shogun’s Insights feature can take you step-by-step through how to improve any page on your site.
On a scale of 0 to 100, your page will be graded in four different areas: Accessibility, Best Practices, Performance, and SEO. A score of 100 means no changes are needed. When the score is less than 100, Shogun will tell you exactly what kind of changes are needed.
Some of the potential recommendations you may see include:
- Replace animated images with videos
- Use proper resolutions for images
- Add alt text to images
- Use images with the correct aspect ratio so that they don’t look stretched out
Indeed, Shogun will provide you with both the knowledge and tools you need to speed up your site and provide an exceptional user experience.