how to optimize Shopify images for performance

by | May 26, 2021

 if your business is on Shopify, chances are you’ve got tons of product photos and have spent countless hours sorting through your product images to choose the very best ones. every Shopify page needs product photos. lifestyle photos. marketing materials. overall: this means your Shopify page carries a LOT of data.  if your images aren’t optimized (we’ll get into precisely what that means) you could be losing customers. studies show that customers are more likely to leave your website with every passing second of load time.

you’re a business owner. not a UX designer.  so don’t get too caught up in understanding the nitty-gritty of image optimization (there’s a few apps to do that work for you).  before we break out our tips for making sure your customers aren’t swiping away from your Shopify site — let’s define some of these terms.

 

  • SEO – search engine optimization. this term refers to anything that helps boost your website to the top of the search engine results.  Google Analytics is a free tool that you can use to make sure the images and text on your website are searchable. 

 

  • alt text – alternate text. for every image you upload to Shopify: you have the option to add alt text. this means you describe the image in a text box. that alt text is attached to that image. the more descriptive and specific that alt text is: the more frequently your image will appear in searches. 

 

  • image compression – the size and quality of any image affects the amount of data it holds. if you have huge original size high-quality images all over your Shopify, your load time may suffer. image compression is the concept of minimizing the size (and therefore load time) of your image as much as you can without minimizing quality.

 

  • metrics – the numbers that tell you how well your business is doing.  there are specific metrics that are most commonly used for ecomm businesses.  the one we discuss the most here is conversion.  in the context of this blog — your conversion is how many people came to your website to check it out and then actually bought something.  you converted a regular shmegular browser into a customer.  love that for you!

6 tips to ensure Shopify images are optimized 

test your page speed

how do you know if you’re losing customers over loading time? it’s not easy. plenty of other factors can affect your conversion. but you can use a tool like Speed Boostr to check your time. there isn’t one hard and fast rule of how fast a website should load. you’ll have to do a balancing act of content vs. time. but remember: every second of load time will drop your conversion.

studies show that customers want e-commerce sites (online stores) to load writhing two seconds. that sounds like a scary number.  how can there be one consistent speed? don’t people have varying internet speeds? 

yes! you want to aim for the lowest number of seconds you can using a tester like the Speed Boostr tool we talked about.  don’t worry — if someone’s at grandma’s house on a hotspot trying to shop: they’re going to be aware of potentially slow internet.  when we say site loading speed we are talking about a metric you can control.

 

image naming convention 

you may have a folder full of product images with names like “IMG_43892.jpg”. this is a common default. but once your image is on your Shopify page — it needs to have a descriptive and clear image name. think of what Google image searches you want to appear in. 

for example: you sell customized stationery. what do you expect your customers to search in order to find products like yours? try a tag formula like “[item]-[color]-[occasion]-[brand name].jpg”. 

if you can tap in to the keywords potential customers are searching — and your image is high-quality and eye-catching — you just successfully directed traffic to your website.

 

choose your image format

there are two primary image formats for Shopify: PNG and JPEG. PNG is higher-quality whereas JPEG is smaller (and therefore loads faster). the key is that any image in your HTML on Shopify should be a JPEG when possible (this will include product images). images that live in your CSS code should be PNG (this will include logos and banners). this sounds confusing if you haven’t begun building your Shopify site yet but Shopify actually does a great job of walking you through these steps as you build your site. 

we’ve also got you covered with the 6 best apps for editing your ecomm photos.  you can find an app that fits your budget and skill level.  then you’ll have a home base for resizing. renaming. retouching. and saving your images as either PNG or JPEG. 

a quick note: Shopify will convert all image files to WebP.  this is an awesome file type developed by Google that is both smaller and crisper than others. however: you never want to upload WebP images to Shopify directly.  basically — if a person browsing your site has a browser that supports WebP: that’s what they’ll see.  if they don’t: they will see the JPG or PNG.  let Shopify do the work for you! 

 

reduce file size 

Shopify will compress your images to some degree.  as a general rule: aim for file sizes 70KB or less. the bracket for image sizes in Shopify is 800px x 800px (for the zoom feature to work properly and not blur your images) to 4472 x 4472. that’s a big range! think about each image’s purpose to make these decisions. if you have a product with a delicate texture — maybe your customers will want to zoom in super close to get an idea of the fabric.  make sure that whatever size you choose doesn’t hurt the image quality needed.

the happy medium recommendation is 2048 x 2048.

make sure that you use a tool specifically for Shopify (like the apps we introduce you to below) so that you don’t end up with wonky formatting. 

for more help: we’ve got you covered with a guide to Shopify image sizes.

 

use alt img tags 

alt img tags are descriptors of the image they’re attached to. they’re used for accessibility purposes and search purposes. if you have a potential customer who is visually impaired — what do you want to make sure they know about this image? they’ll need to know the color. size. material. use. and the name of your brand of course. 

another tricky thing to keep in mind is that Google actually judges you based on these alt img tags. they don’t want you using them for promotion (having tags like “big sale discount shop now”) and they don’t want you to use them for SEO only (using irrelevant keywords like “stationery cards wedding funeral calligraphy DIY typography”).  Google has programs that read these tags and will penalize you — meaning you’ll show up in less searches — if you use them incorrectly.

your alt img tag should be cohesive and actually describe the photo it’s attached to in simple and thorough terms.  that being said — you still do want to make sure you’re using commonly searched keywords that pertain to your photo. 

a perfect example might be something like this: “elegant black and white customized stationery calligraphy for wedding invitation by Jessica Draws”.

💡 one quick note: if you have a model in your photo you should briefly describe the model even though they aren’t part of your product.

 

define your own metrics

because you have a brand: you also have the agency to make so many decisions for your brand. metrics is one of those incredibly impactful decisions that you just have to make on your own. “conversion”. “average order value”. “average selling price”. these are all metrics you’ll consider as a business owner.  but they’ll look different for every brand.  it’s important that you define your own metrics and set goals for yourself — not based on what other brands are doing.  this will make decision-making easier when it comes to things like page loading time and image size. 

for some brands: you might need to rely heavily on high-quality images that don’t compromise on size.  if you sell sheets — and you’re an online brand — your customers can’t touch them in person before purchasing.  so you have the added responsibility of conveying just how soft and luxe they are.  that might mean larger images to zoom all the way into that thread count.  or maybe you have a makeup brand and it’s important to you to show your color ways on many different skin tones. maybe that means more images than the average shopify site.  

if this sounds like your brand: don’t fret!  your metrics are for YOU and YOUR unique customer demographic. 

the key here is that — as you make changes to your Shopify site — you monitor your metrics before. and. after.  this will be your best gauge of how well your site is working to get your product out there.  remember: all of these tips are here to get more of your brand added to carts and PURCHASED.  if you’re not seeing those very real results after overhauling your Shopify site; there may be another approach to consider!

4 best image optimization tools for Shopify 

 

1. TinyIMG 

$0 – $4.99/month

4.9 🌟

this app provides image compression without loss of quality. it allows you to compress up to 50 images per month on the free plan. this app will also generate suggestions for your page in an easily actionable way.  basically: they tell you what to do and you do it!  

 

2. SEO Suite

Free

4.9 🌟

this app gives you an advanced analysis of your SEO on your pages.  as it reads your page; it will show you bulletpoints of suggestions to improve. for example: it might tell you a sentence is too long and difficult to digest. it might suggest adding internal links. etc.

 

3. Alt Text

$1.99/month

4.8 🌟

this app gives you fill-in-the-blank alt text boxes to create easy and optimized alt text for your images. this can be a real time-saver when you’ve got dozens of product photos to sort through! 

 

4. Page Speed Image Optimizer

$0 – $19/month

4.7 🌟

the coolest part of this app is that you can customize a page-loading screen. this way — if your page ever does load slowly for a customer — your page is working to hold onto that engagement and build brand recognition.  so for a few extra seconds of loading time: your customer has a visually interesting logo to look at that also introduces your brand!

get started with product photography services with soona 

before you can be concerned about any of this — image sizes. file formats. search engine optimization. — you have to have high-quality photos for every section of your shopify site! at soona we’ve got you covered with inspo for lifestyle photography. best practices for e-commerce photography. and how to prep for a photo shoot. 

when you’re ready to start creating the content of your dreams — book a shoot with us for just $39/photo.

soona