Optimization is key when it comes to selling your products on Shopify. You want to ensure that your product images are as clear and high-quality as possible while keeping the file size as small as possible. This can be a tricky balance to strike, but there are a few things you can do to ensure that your Shopify images are optimized for both quality and file size.
The best way to optimize Shopify image sizes is to use the correct file format and ensure that the images are optimized for pixel dimensions of around 1080px. If your image is too large, you can use an image compression tool. You should also use alt text and use a content delivery network (CDN).
It takes a little time to master the best image optimization practices, but it’s worth it in the long run. Not only will your pages load faster, but you’ll also be able to keep better track of your inventory. In this article, we’ll explore the top tips for image optimization on Shopify.
Why do you need to optimize your images on Shopify?
The reason why we want to resize images is that we need to keep the file size as low as possible so the page loads as fast as it can.
Google favours fast-loading pages for their search results. Also, it’s proven knowledge that having a fast-loading landing page increases the conversion rate of your products.
Store visitors turn away if the pages take too long to load, especially if they are using a mobile network connection. The attention span of website visitors these days has gotten very short, we’re talking around 3-5 seconds.
Pages that loaded in 2.4 seconds had a 1.9% conversion rate compared to pages at 5.7 seconds upwards, which was around a 0.6% conversion rate. Read more on Cloudflare’s article.
If you could make more revenue by speeding up your page speed, what are you waiting for?
Selling digital products?
Staff picked by Shopify themselves.
How to optimize your images for speed on Shopify
1. Use the correct file format
The first step to optimizing your Shopify image sizes is to use the proper file format. For product images, the two most common formats are JPEG and PNG. But there is a new format in town – WEBP.
JPEGs are generally better for photos, while PNGs are good for images with a transparent background (alpha channel).
My suggestion to you is to always add images to your site in the right format in the first place but then use Cloudflare CDN. With Cloudflare, you can automatically get them to deliver WEBP images to your visitors.
Enable these options below:
2. Resize your images
Once you have the right file format, you must ensure that your images are the right size. The standard size for a product image on Shopify is roughly 1024×1024 pixels.
If your image is larger than this, you can use an image resizing tool to resize it down to an appropriate size.
Resizing your image’s resolution reduces the size of the file drastically. But you need to find the balance between maintaining image quality and low file sizes.
3. Compress your images
The next step is to compress your images. This means reducing the image file size by changing the compression of the image. There are a few different ways to do this, but an easy way is to use an online tool like TinyIMG. Simply upload your image to the site, and it will automatically compress it for you.
Or, if you have Photoshop, you can batch process a folder of images quickly. You can see a great guide on how to compress images for Shopify using Photoshop here.
4. Use alt text
Another essential optimization step is to use alt text for your images. Alt text is a short description of an image used by search engines and screen readers. It helps them to understand what the image is and what it’s about. You can add alt text to your pictures in the settings for each image.
According to Harvard University’s content creators resource library, the key to writing quality alt text is to focus on creating descriptions that are both informative and concise.
For example, assume you have an image of a pair of black shoes. A good alt text for this image might be “black leather dress shoes on a white background”.
If the image is explicitly paired with the writing’s context, you can take your alt text to the next level by explaining the context in which the picture is used. For example, in an article about humanitarian causes, you might label your picture as “black leather dress shoes being given to a homeless woman for a job interview”.
5. Use the right words in the image file name
Another thing to keep in mind is the file name for your images. When saving your images, use an optimized file name with descriptive keywords.
For instance, if you have an image of a pair of blue shoes, consider saving it as “blue-shoes.jpg.”
6. Use a Content Delivery Network (CDN)
A CDN is a service that helps deliver your content to users faster by storing it on servers worldwide. When users try to access your content, they will be directed to the server closest to them. This can help improve your images’ loading time and other content.
If you’re unsure whether you should use a CDN, there are a few things to consider. First, take a look at your website traffic. If you have many visitors from different parts of the world, then a CDN can help improve the loading time for those visitors.
Another thing to consider is the file types you’re serving from your website. If you have multiple large files, such as images or videos, then a CDN can help reduce the strain on your server.
Finally, consider the cost of using a CDN. If you have a limited budget, there are some free CDN services that you can use. However, if you have the resources, investing in a paid CDN service can provide you with more features and better performance.
My suggestion – use Cloudflare
- Polish – Improve image load time by optimizing images hosted on your domain. Optionally, the WebP image codec can be used with supported clients for additional performance benefits.
- Auto Minify – Reduce the file size of source code on your website.
- Brotli – Speed up page load times for your visitor’s HTTPS traffic by applying Brotli compression.
- Mirage – Improve load time for pages that include images on mobile devices with slow network connections.
7. Don’t use GIFs
GIFs are old-school. They are usually super large in file size and slow down your page drastically. Most of the time, you don’t need to use GIFs anymore; you can use MP4 instead.
The only occasions you should still use GIFs are where you are only allowed to upload an image, and you want motion because GIFs are technically image files.
You can now use MP4 videos with the latest browsers. MP4 compresses smaller and is much better quality! Learn how to use MP4 videos instead of GIFs here.
8. Lazy load your images
Lazy loading is a term used for loading images and videos on pages. It’s usually written in the code of your theme, or if you are using a page builder like PageFly, you can set your pages to automatically lazy load images.
This helps all the important content load on your page first, then load images afterwards.
9. Use an image-optimizing Shopify app
There are a lot of Shopify apps out there for image optimization, and many of them are not great and will probably slow your store down more. Check out the image optimization Shopify apps here.
Choose wisely and maybe check some articles out there to see what people have used and would recommend.
If you have any suggestions or have any questions, please contact us! We build Shopify apps and stores, so we have a lot of experience with this.