Awwww. What’s not to love about a cute pic of an adorable baby gearing up for it’s very own baby holiday?
The source: Avabana
Well, there is one thing, actually (sorry to poop the cute baby party!!) Brilliant as this image is, it (and other cute-bombs like it) could be damaging your sales.
Unfortunately, getting images right on a Shopify site is not as simple as taking as many gorgeous photos as you can and then filling your pages with them.
That’s because images that are added incorrectly could, at best, be limiting your performance on Google search, and at worst, damaging your sales by slowing down the load time of your site.
Today, I want to share a super-handy one pager with you – it’s a step by step guide to optimizing images on your Shopify website. I’ll also dig into some of the issues addressed in the guide in a bit more detail.
But let’s take this in baby steps. First of all, we need to understand what image optimization is.
Slow loading and poor SEO – the potential problems images can cause
As I’ve already mentioned, not following best practice when it comes to the images on your site can cause significant problems. The biggest of these is load time. High quality images (like our jet setting baby) have big file sizes, and this means it takes longer for that page to load. This is a big problem!! There are 2 reasons for this, and they are connected.
Reason 1: A slow site means lower sales. A one second delay in your page loading leads to an 11% drop in page views, and 7% fewer conversions. And that’s just for one second! Plus it’s frustrating for your loyal customers too, and lower customer satisfaction might drive them somewhere else.
Reason 2: It will damage your ranking for searches on Google. One of the factors Google’s algorithm uses to rank pages is page load time – it has even built a free tool for you to assess it. Worse still, the bots Google uses to crawl your website to assess what it is about will go slower if your page load is slower. And finally, that 11% drop we mentioned in point 1 – Google will notice that. If 11% of people who clicked on your website after entering a search immediately click back, that will tell Google it’s not a good place to send its users.
To put it simply, un-optimized images mean fewer sales and lower search rankings on google.
But, to flip that round, if you haven’t yet optimized your images, you now have a great opportunity to boost sales and improve your search rankings. And the way you do it is image optimization.
What is image optimization?
That’s easy. It means optimizing the images you show on your site for 2 things – page load time and SEO. So optimization usually comprises compressing images so the file size is smaller (which means they load faster) and adding attributes to the images so Google can understand what the image shows, improving your performance in search.
Without further ado, a guide
As with any technical SEO process, it’s important to follow best practice steps. That’s why I’ve put together a straightforward one-pager for image optimization on Shopify.
Download the guide here: TinyIMG guide to optimising images on Shopify.pdf
Let’s put these steps into action
Now let’s go through these steps with an actual picture (cue cute baby …)
This image is from the homepage of Avabanana, a Spanish baby and kids store on Shopify that sells ecological and fair trade baby and kids products. Hence the too-cute tot.
So let’s use it to put our 7 image optimization steps into practice.
Step 1 – Creating an image
It’s important to have a clear idea of what kind of image you need and how you will use it on your site before you take a single shot. Is it primarily decorative or used to explore product details? Do you want customers to be able to zoom in?
In the case of our baby pic, it isn’t an image that will need to be zoomed. But because it features on Avabanana’s main landing page, and serves as a link to a product section, it needs to be high enough quality.
For uploading to Shopify, your image can be up to 4472 x 4472 px, and up to 20 megapixels. For square product images, Shopify recommend 2048 x 2048 px for square product photos. You will need to have over 800 x 800 px for zoom functionality to work.
In this case, the image is 1024px x 1024px, which is a suitable quality level for its purpose.
Step 2 – Naming image files
With image file naming, the most important point is to give the image file a specific name, not simply IMG_79865.PNG. Aim to be descriptive and include keywords that may be relevant. Don’t forget, Google will be looking at image file names to work out what search terms your page would be a good result for. In this case, a good file name would be:
I have included the general category “baby swimwear” (which is likely to feature in many searches), plus the brand names of the products featured – Olli Ella and Liewood. So, this image should help our SEO for searches for “Olli Ella Baby Swimwear” or “Liewood Baby Swimwear”
Remember, Google images is a more common tool for search than you might think. SEO gurus Moz estimate 1/3 of all searches are for images, and that image pack results are shown on 12.5 of search engine ranking ages (or SERPs). So your newly name image file might be the result of a search.
Step 3 – Choosing the right file type
For your Shopify store you really should only be thinking about 2 options for your images – .jpg and .png.
- JPEG offers the best overall balance between quality (pretty good) and file size (not too big).
- PNG images offer excellent quality, but the files are big. Plus, they will lose image quality if they are heavily compressed.
Shopify recommends using JPEG for product images, pages and blog posts, and PNG for decorative images such as logos, trims and borders (these should be in your CSS code, not HTML, so this shouldn’t have a big impact on page load times.
Shopify also accepts .gif images, but these are very low quality. They should only be used for small images that won’t be enlarged.
Another option is progressive JPEG files. These images load gradually, which can help your page load times, though the first impression for users isn’t great.
In the case of our baby photo, as recommended the file is a .jpg file.
One final point you should be aware of is that Shopify automatically convert .jpg and .png files into WEBP files. This file type was developed by Google specifically for use with images on websites. WEBP files are up to 30% smaller than their .jpg or .png equivalents, but the quality is comparable.
Once Shopify has converted your files to WEBP, what happens next will depend on which browser your users are viewing your site with. If they use a browser that supports WEBP files, Shopify will show those. But if they use a browser that doesn’t (like Safari or Internet Explorer), they will see the original .jpg or .png files.
This means you should never directly upload WEBP files to Shopify– these images will not open on Safari or Internet Explorer. Instead, stick to .jpg and .png, and let Shopify do the rest.
Step 4 – Reducing the file size
Shopify will already compress your images a bit – or, as I’ve mentioned, convert them to WEBP files so they load faster. Shopify also takes care of thumbnails on your checkout pages.
This is a helpful start, but you should always be looking to further compress your images to get your load speed as fast as possible. Don’t forget, slow load speed can harm both your sales and your SEO – a double whammy. On the other hand, offering a fast and smooth online experience will enhance overall customer satisfaction.
Aiming for file sizes of 70KB or lower is a good general target, though this may depend on the quality of image you need.
So how do you reduce image file sizes?
Option 1 – Manual
Your first option is to manually reduce file sizes using Photoshop or a similar program. This process is all about changing the amount of image data available, either by reducing the number of pixels or changing the pixel dimensions of an image using the Image size dialog box. Once you have reduced the number of pixels, there are a range of tools for refocusing the image so it does not appear pixelated. For photoshop, you’ll find details of those tools plus a guide to reducing image size here.
Option 2 – Automatic
There are a lot of image compression tools out there. You should select one which has been specifically developed for Shopify to ensure it follows Shopify best practice in terms of image quality and file type. Then simply install the tool you have chosen, and it will automatically optimize your images then upload them to your Shopify page.
In the case of Avabanana’s image, it was compressed automatically using TinyIMG. And it clocks in at exactly 70KB, just right for optimum load speed without a loss in quality.
Marketer’s tip: Placing large images onto your site and then just manually adjusting their size using source code will not reduce the file’s size. This can really damage your page’s load speed. For large images, put them as pop-ups or even on a separate page for when users click a smaller version shown on your site.
Step 5 – Writing alt attributes
For SEO purposes, this step is critical. Along with the file name, alt attributes are what Google uses to understand what is shown in an image. It will also use these texts when returning Google Image search results.
So, what are alt attributes? These are texts that serve as a replacement to the image themselves, either because it hasn’t loaded yet, or for visually impaired internet users. There is an alt tag, which is essential to include for SEO, and an alt title.
Alt tags will show if the image hasn’t loaded yet, and will also be read out loud by accessibility software used by people with visual impairments. These will also be read by Google.
Alt titles are not essential. They will only be visible to people using a mouse or pointing device – the title text will show up if the cursor is hovering over the image.
So, how should you write you alt tags? Here are few important practices to follow:
- No keyword stuffing – Google might even penalise you if it thinks you are using the alt tag just for getting clicks.
- Include models or SKUs – Searches can sometimes be very specific, so giving this level of detail can help you rank well.
- Write coherently – Whereas file names might just be a collection of individual words (for our image, it is “baby swimwear collection Olli Ella Liewood”), we want our alt text to make sense as a sentence.
Let’s have a go at writing an HTML image tag:
|Write the HTML image tag like this:||Don’t write the HTML image tag like this:|
<img src=“Baby-swimwear-collection-Olli-Ella-Liewood.jpg” alt=“Baby wearing mustard Liewood swimsuit with Liewood stripped water bottle, plus pink and rust Olli Ella kids suitcases”>
|<img src=“Baby-swimwear-collection-Olli-Ella-Liewood.jpg” alt=“Special offer baby swimwear sale buy now”>|
In the best practice version:
- We have a meaningful text that describes the picture, not just random words connected with it.
- We mention specific models of the products shown: “mustard Liewood swimsuit”, “Liewood stripped water bottle” and “Pink and rust Olli Ella kids suitcases.” This image will now be considered relevant for image searches for those products.
In the bad practice version:
- No specific brands or models are mentioned, reducing its chances of performing well in search.
- Generic keywords like “special offer” and “sale” are used. Google is likely to penalise this kind of text.
- The text itself isn’t meaningful – for visually impaired users (or if the image doesn’t load for some reason) this text won’t tell them much.
Here are a couple of final points to be aware of:
1. You should not be writing alt tags for purely decorative images. You might get penalized by Google for this. What’s more, in terms of page load best practice, decorative images like borders and logos should be in your CSS, not your HTML code (here’s Shopify’s guide to editing theme code in CSS or HTML).
2. On page image captions and keywords in the text around the image can also be used by Google to understand what the image shows. So, for texts like blogs, look to describe in the surrounding text any images that you want to perform well in search.
Step 6 – Using image sitemaps
This is a more technical point, but it is important for you if you use a lot of carousels, image pop-ups or galleries on your site. The problem is that, while great for your customer experience, images shown in this way can easily be missed by Google.
A good solution for this is to create a separate sitemap just for your images. Sitemaps are like contents pages, showing Google what is on your site, and they help to ensure every part of your site is “crawled” - in other words, it will all count towards your SEO.
Use this guide by Google to create a special site map just for your images. Don’t forget to include descriptive tags in your HTML. Sitemaps don’t guarantee that more of your site will be checked by Google, but they certainly give it a helping hand.
Step 7 – Testing and amending
Like any solution, testing is going to be key. And here, the situation is a little complex because you should be thinking about multiple factors when testing image optimization.
Let me explain. You need to think carefully about page load speeds vs conversions (or buys) on your page because improving one might harm the other. For example, you might reduce the number of images on your site to make it load faster. This might lead to more people landing on your page. But the lack of engaging visuals may stop them from converting. On the other hand, you might cram your page full of dazzling images which your customers will love once they are on the site. But many of them will never reach your site in the first place because load time will be too slow.
Of course, our goal is to achieve both fast page load speeds and great conversions.
For testing, think clearly about your priorities and goals. Which of these is most important to you – page load speed, better SEO performance SERP, or higher overall conversions on your website? Then look to test these different elements as you make changes to your images.
Testing for SEO:
You can’t really test how improving image SEO will affect overall search rankings, though there are good SEO tools for checking you are following best practice (don’t forget that in general improving load time will boost your search rankings, as Google will punish you if people click a link and then bounce.) Make sure you regularly check that all your images have alt tags using AdResults tool.
Testing for page speed:
This is a really simple one. Just enter your web address into SpeedBoostr to see how fast or slow your site currently is.
Testing for Conversions:
How you test for this will really depend on what your conversions are and what tools you are already using, so I don’t want to be too prescriptive here. But the most important point is that you need to clearly define what a conversion is, and understand why you have that metric. Good conversions to test for include time spent on a page, email, push notification or Messenger marketing sign ups, or items added to a cart. And once you start testing, don’t change the metrics.
Following these steps will help you to see in concrete terms how optimizing your images affects your sites overall performance.
Making your images do more
Following these steps will help your images to work better for you. After all, you spend lots of time and energy creating captivating pictures – so make sure you get the maximum back from that investment in time, resources and creativity.