Read on Twitter
Sick & Tired of shopify store owners shooting themsleves in the feet with shoddily optimized images.
So here's a thread on how to optimize your images for Shopify...
So here's a thread on how to optimize your images for Shopify...
1 — File Size + Dimensions
The max size is 20mb & max dimensions are 4472 x 4472 px.
Easiest way to compress and resize is free online photoshop express.
https://photoshop.adobe.com/
The max size is 20mb & max dimensions are 4472 x 4472 px.
Easiest way to compress and resize is free online photoshop express.
https://photoshop.adobe.com/
Realize that wherever you want to put a photo, that's an HTML container in ur theme of certain dimensions.
When a page is loaded, your image is resized to fit it.
More resizing = slower page = more bounces.
When a page is loaded, your image is resized to fit it.
More resizing = slower page = more bounces.
Amazon did a study & found they'd lose $1.6 BILLION a year if load times decreased just 1 second.
But what if u increased ur load times by just 1 second?
So it behooves you to resize photos to fit into the desired spot...
*especially* if driving traffic with paid ads.
But what if u increased ur load times by just 1 second?
So it behooves you to resize photos to fit into the desired spot...
*especially* if driving traffic with paid ads.
& balance the need for speed with need for high quality images that will convert.
It's a tradeoff.
If you're selling jewelry, you need larger images than if you're selling beanies or notebooks.
It's a tradeoff.
If you're selling jewelry, you need larger images than if you're selling beanies or notebooks.
Anyways, check your theme to see what size image each container calls for.
For example, a hero banner might call for 1800 px x 800 px.
Resize that photo to those dimensions instead of making it resize every single time someone loads your homepage.
For example, a hero banner might call for 1800 px x 800 px.
Resize that photo to those dimensions instead of making it resize every single time someone loads your homepage.
And with product photos, for the love of yourself, just make them all square.
Their containers are square.
& it's the simplest way to ensure aesthetics, consistency, and congruency.
+ will ensure the mobile/tablet versions don't look wonky.
Their containers are square.
& it's the simplest way to ensure aesthetics, consistency, and congruency.
+ will ensure the mobile/tablet versions don't look wonky.
2 — File Names
Instead of rolling with default image names, name your damn photos.
Yes, it is boring & tedious, but these all are crawled.
U can either use them to establish extra relevance, or u can let them muck up all your other on-page work.
Instead of rolling with default image names, name your damn photos.
Yes, it is boring & tedious, but these all are crawled.
U can either use them to establish extra relevance, or u can let them muck up all your other on-page work.
It's not rocket science.
U can keep it simple & make the file name the same as the product name.
If multiple images, add a descriptor on end
(product-side, product-angle, etc).
U can keep it simple & make the file name the same as the product name.
If multiple images, add a descriptor on end
(product-side, product-angle, etc).
3 — Alt Attributes
Same deal as file names.
They r boring & customers usually don't even see them, but they count.
You can copy/paste the new file names for alt attributes.
Simple, easy & they're there for web accessibility, so it makes sense to do that.
Same deal as file names.
They r boring & customers usually don't even see them, but they count.
You can copy/paste the new file names for alt attributes.
Simple, easy & they're there for web accessibility, so it makes sense to do that.
4 — Bonus
If this seems boring, tedious, or even just below you, it's easily outsourced.
U just need to give the outsourcer very clear directions and parameters for
—file size
—pixel dimensions
—file name + alt attribute
If this seems boring, tedious, or even just below you, it's easily outsourced.
U just need to give the outsourcer very clear directions and parameters for
—file size
—pixel dimensions
—file name + alt attribute
If you found this thread helpful, retweet it so all your ecom friends can benefit too.
& don’t forget to follow me for more actionable SEO insights, tips, and tricks. https://twitter.com/JeffreyRadin/status/1387832201534967816
& don’t forget to follow me for more actionable SEO insights, tips, and tricks. https://twitter.com/JeffreyRadin/status/1387832201534967816
