You don’t need us to tell you that high-quality images will make your Shopify store and products stand out. But with 75% of ecommerce shoppers saying photos influence their buying decisions, if you’re not optimising those images properly, all that time and effort you spent avoiding blurry, poor-quality images could be totally wasted.
This step-by-step guide will help you get the most of your product images. By optimising them for Shopify, you’ll not only speed up your pages’ load times, you’ll also show off your products in the best light. ✨
Why do I need to optimise my images?
Optimisation makes images suitable for different needs and different platforms.
A very high resolution image, for example, is perfect for a massive billboard. But it would take yonks to load on a website – and might not even send in an email. Optimisation would make it the size it needed to be for the job it needed to do.
What’s more, optimisation allows you to add important data to your image – that’s data that helps improve search engine optimisation (SEO) strategy.
For example, if you use the words “red cotton jumper” in your image data, you stand a much better chance of people finding your red cotton jumper when they search for one on Google.
Doesn’t Shopify optimise images automatically?
Yup. You might be wondering why you need to bother optimising images when Shopify already compresses and optimises images when you upload them.
But the automatic system doesn’t always produce the results you want. You’ll get better quality – and better search rankings– if you do it yourself.
For example, if you don’t optimise images for customers accessing your site via their mobile phones, your images might look too small, badly cropped, the wrong way round, or worse, not there at all.
Is there a way of organising all these different images?
Having created so many different image files for different purposes, it’s easy to get confused trying to differentiate one version of an image from another.
That’s why you should use Dash (that’s us) to find, organise and upload your images. We’re a digital asset management tool that provides a home for all your product shots and brand assets.
Even better, you can connect your Dash to your Shopify account directly. No need to download images from Dash first then upload to Shopify. Just search for the shots you want in Dash then drop them straight into the Shopify page. 👇
8 tips for optimising your images for Shopify
We’ve ordered these steps logically. But other than starting with getting a great image in the first place and testing everything works as you’d expect, the order in which you do them doesn’t make a huge difference.
Use the best images possible
It might seem like a heavy outlay having your products photographed professionally but the old cliché about a picture painting 1,000 words is so true when it comes to displaying your wares at their best on Shopify.
Great product photography increases conversion rate and reduces customer support headaches post-purchase. Hardly surprising when customers can’t see, hear, smell, touch or taste the actual product before they buy it.
Not quite ready to hire a professional photographer? No problem. We have a handy guide to DIY photography.
Choose the right type of image file for different Shopify pages
While you can use the same type of image file across your Shopify store pages, you’ll get better results if you optimise the images for your product, home, blog and landing pages differently.
Shopify supports loads of image formats (including JPG, progressive JPEG, PNG, GIF, HEIC, AVIF and WebP) and its upload images tool automatically ensures the best possible image format is used on your store.
But it’s good to know the difference so you can choose the right format for each job. Our guide to PNG, JPG and other image formats tells you lots more about image files and how to use them on different online platforms.
Here’s a quick overview of the commonly used image files on Shopify and where you might want to use them.
- JPG image files offer the best overall balance between file size and quality. They have ‘lossy compression’, which helps keep loading times down without too much loss in quality. They’re ideal for home pages, product pages, blog posts and landing pages. You can also use them for banners or slideshows.
- PNG image files offer excellent quality, but they are big files. Compressing them for fast loading will lose some of that quality. They work well for assets that have flat colours such as graphics, logos, icons, borders, trims, etc.
- WebP image files were developed by Google to replace JPG, PNG and GIF file formats. They’re compact so they load faster. But not all web browsers currently support them.
- GIF image files are very low quality but can be used for animation, graphics and banners. Shopify can convert GIFs to WebP format to improve performance.
💡Shopify automatically serves JPG and PNG files as WebP files whenever browsers support the WebP image format.
Compress images to the right size and quality
There are some things in life when size really does matter – and image file size in Shopify is one of them.
If the file is too big, the page will take too long to load, or it won’t upload to the Shopify site at all. If it’s too small, your pictures could appear blurry or stretched. That’s why you’ve got to resize and compress your images. Let’s get into a little more detail about both.
Resizing your images
It’s worth noting that resizing is not the same as compressing. Resizing an image means changing the size (or shape) of what viewers see on the page. Compressing an image means reducing the file size to allow for faster page loading.
If you’re using Dash, it couldn't be easier to resize your images for Shopify. 🙌
If you’re an admin, you can create crop areas that are specific to your Shopify product listings. To do this within the app, open an image > click the three dots on the top right-hand corner > and select ‘set crop areas’.
Here you can see what crop areas you have set up, or you can manage your preferences and create your own custom crops.
Next time you or someone in your team syncs up with Shopify, it’ll automatically use that crop. Take a look below.
Compressing your images
A resized image might look smaller (or bigger) but if you haven’t compressed the image, it might still take too long to load.
These are the preferred Shopify image sizes:
- Maximum image size is 4472 x 4472 pixels; you might not need an image this size, it would depend on what you were using it for – background images, for example, need to be bigger than blog posts or product images.
- Maximum file size is 20 MB; anything bigger can dramatically impact upload speeds. Smaller images (up to 2 MB) are better in most cases.
- Recommended square image size is 2048 x 2048 pixels; perfect for stretching full screen. Smaller than that might get cut off or appear blurry if it needs to fill the width of the browser.
- Best image resolution for online viewing is 72 dpi.
You can compress images manually using the tools already on your Mac or PC. Or you can compress them automatically using one of many tools and apps available, including TINYIMG or Shopify’s own free tool.
To compress an image and reduce the file size manually on a Mac:
- Choose the image you want to compress
- Right click and open it in Preview
- Choose Tools>Adjust Size then select Resample image
- Enter a smaller value in the Resolution field
- The new size will be shown at the bottom of the window
- Name and save the compressed image
To compress an image and reduce the file size manually on a PC:
- Select the image you want to compress
- Click the Picture Tools Format tab
- Click Compress Pictures
- Under Resolution, click Print, Web or Email
- Click OK
- Name and save compressed image
There are many other ways to compress images, manually or with apps. And, if you choose an automatic compression tool, pick one with a multifunctional Shopify app option. Dash, for instance, will automatically compress the image for you. And a tool like TINYIMG app enhances the file for SEO.
You can read more about apps that help make it easier to run your ecommerce store on Shopify in our post Top 27 Shopify apps.
Make sure your images are responsive
Ever tried turning your phone round to see the details on a tiny image facing the wrong way only for it to stubbornly go back to how it wants to be? Mega frustrating.
That’s why your images need to be responsive.
Responsive images are images that ‘respond’ to whatever device they’re being viewed on. They automatically work on different screen sizes and resolutions.
If you’ve set up your Shopify page on a desktop, how you see your images might be very different to how someone sees them on their mobile. They could be too small, unclear or have the wrong orientation.
Shopify does automatically resize your images to fit mobiles, but if you want to be certain there are no hiccups, use a modern and responsive Shopify theme. These will automatically generate blocks of HTML that instruct browsers to load specific image sizes based on the device being used.
Create an image sitemap for Google
If you use a lot of carousels, image pop-ups or galleries on your site, you might want to create a sitemap.
While moving graphics enhance customer experience, they can be missed by Google. A site map of your images will show Google exactly what’s on your site and ensure every part of it is crawled – helping your SEO efforts.
But unless you’re particularly tech-savvy, you might want to ask a developer to do this for you.
Check out Google’s image sitemaps guide for a full run down.
Name images correctly
This may sound obvious, but not naming your images properly can make file management super difficult. Just think: if you’re uploading images from your shared drives into Shopify, trawling through image names like IMG_1234567.JPG or BERGR8659JAN.JPG isn’t helpful. It turns into a guessing game - and one that takes up way too much time.
And, once they’re in your Shopify store, you won’t be helping search engines find your products and rank your page either.
So, make sure you’ve got proper naming conventions for your images. Use a few words that describe the picture clearly, using hyphens between each one. For example:
- Instead of BERGR8659JAN.JPG
- Call it ‘womens-beret-green-colour.jpg’
💡Remember, Dash lets you drag and drop images directly into Shopify - so you won’t have to guess whether you’ve got the right image, or click through loads of tiny thumbnails.
Add alt text to improve readability and SEO
ALT text (often called ALT attributes, descriptions or tags) is an HTML code used to describe an image. It helps screen-reading tools for visually impaired people, and it allows search engines to crawl your site and (hopefully) rank it higher.
Be careful when writing your ALT text.
- Don’t stuff it with keywords; Google might penalise you if you go overboard
- Do include details such as model numbers or SKUs
- Do write for visual accuracy ; tell us what you see
- Don’t write ALT text for banners or logos; only use it if the image enhances the page content
Shopify recommends keeping ALT text brief and descriptive. The maximum length is 512 characters, but 125 or less is better. For example:
- Image file name: ‘womens-beret-green-colour.jpg’
- Poor ALT text: ‘Special offer on women’s berets in green, red, pink and white - 50% off throughout January’
- Good ALT text: ‘Woman with long dark hair wearing green beret Jan23 model ’
You might also want to check out some SEO image optimiser apps such as the free SEO Optimizer Image Pro.
Test Shopify images more than once
You’d think having done all this work you could just sit back and wait for your customers to roll into your Shopify store. If only. You’ll need to keep testing your images to make sure they keep looking good, loading quickly and helping your SEO efforts.
- Test appearance: see how your images look on different devices (Mac, PC, mobile, tablet) and adjust anything that’s not working well
- Test SEO: you can’t really test if your images are helping your SEO, but you can check they all have ALT text using tools such as AdResults
- Test loading speed: use tools such as SpeedBoost to see if your images are slowing things down
- Test on other people’s devices: if you repeatedly use your own mobile or laptop to visit your store or search for products on it, you’ll get unrealistic results - the only way to check how high your site is ranking is to use someone else’s device or a search engine such as Brave Search or DuckDuckGo.
Organise your product images in Dash
Your product images are an important part of your Shopify store, so make sure you’re organising them properly in Dash. It’s the home for your visual content and the perfect digital asset management solution for ecommerce brands. You can store and organise your visual content, as well as share product images with marketplaces, resellers and agencies.
To try it for yourself, sign up for Dash for free for 14 days. You don’t even need a credit card. ✨