Does Shopify automatically optimize your images and is there anything else you need to do?
The answer to both of those is yes.
There are a few things Shopify does automatically for you. It serves your images from a CDN, a content delivery network, it serves them in different sizes depending on the device, and it lazy loads images by default. These are all meant to help decrease loading time and speed up your website, which is awesome.
But there are a few additional things you can do to optimize these images not only for size but also for SEO. (Search engine optimization).
Prefer to listen to this episode? Click here
Optimizing the Size of Your Images Before Uploading to Shopify
The first is to make sure you resize them before you upload them. By default, most hi-res images are anywhere from 3000 – 5000 pixels on their longest size. But no screen is rendering images at this size, so you can resize them to say 1000-2000 pixels depending on the requirements of your theme. Check your theme’s documentation for more details.
You’ll also want to compress your images and save them as progressive jpegs. Progressive jpegs just mean the image loads slowly from top to bottom so the user doesn’t have to wait for the entire image to load before something becomes visible.
When you’re saving images from photoshop you can export them, save for web and choose progressive jpeg. But even then, there is usually some additional optimization you can do.
There are plenty of tools out there for this, but the two I typically use are Image Optim for Mac. I love this one because it’s actually software that you download to your computer and it processes them very quickly and doesn’t require any upload or downloading of the images. I’m not sure if there is something similar for PC, but there is also an online tool called Kraken.io that can optimize your images for you as well. Both of these will optimize your images without losing quality.
The other thing to remember when it comes to image quality is that most people are looking at your website on their phones or laptops. These devices can only render images so big and with so much DPI (dots per inch) Having a hi-res photo that is 3000px wide and 300 DPI is total overkill for the web. Most monitors have a display of 72 DPI. 300 DPI is only needed for print.
As long as your image isn’t blurry, you’re good.
Optimizing Your Shopify Images for SEO
In addition to speed optimization, you’ll want to optimize your images for SEO as well.
The first step is the actual naming of your file. Instead of keeping the name your camera spits out like IMG0012, you’ll want to use actually words to name your images the describe the product and its attributes. Now, if you already have a ton of products on your website you do not have to go back and update these. Just implement it moving forward.
You’ll also want to add alt text. Alt text is used by screen readers, read by search engines, and it’s what will display in case an image can’t load for some reason.
This is something that you’ll want to go back and update if you’ve never added it before.
There are some apps that can do this programmatically for you though I’ll always recommend a human touch here. If you have a ton of products you can always get started with an app, something is better than nothing. And then optimize them manually as you add new items.
If you want to learn more about SEO and optimizing your images and website check out episode 6 of the podcast.
Lounge members, you also have an entire SEO course inside the course material, and non-lounge members I’ll be releasing a stand-alone SEO course soon as well, so stay tuned!
