Can anyone recommend an app for optimizing image size and alt tags for SEO?

[sw79]

Hi

I need an ap that optimzes the alt tags for seo, compresses the file size and makes sure that any uploaded file is not larger than 2048px. 

I noticed the tinypng app can do this but I was trying to see other options. Does anyone else see this? I see a lot of the apps saying they "compress" the images but if I by mistake upload a 3000 x 3000px image I want both automatic downsize in compression and also pixel dimension. 

[JoesIdeas]

Your theme code should be handling image size. With Shopify, it's common to state the image size in the theme code using image url paramaters.

If you find there are images that are oversized, you can have a developer fix that in your theme code, or if you want to try here's the work flow:

1) Duplicate your live theme so any changes you make do not affect your live site

2) Identify oversized images (you can use the Shopify Analyzer, run each of your main templates through it: home page, product, collection, etc... and it will show if you have larger than necessary images)

3) Identify where that image is loaded in the code. For example, if it's on the home page, you would start with index.liquid template, if it's on product page, product.liquid. You start at the template file, then read the code and follow the snippets included to eventually identify the image.

4) Use url filters to set the image size. If you're not familiar with Liquid url filters, this doc will show you: https://shopify.dev/api/liquid/filters/url-filters. I usually like to set images to around 800px or 900px on mobile, 1500px on desktop...  if it's a full width size image. To set different sizes, you'll use the html srcset attribute to achieve that. Or if you don't have a developer a quick partial fix is just to set your image width to 1500px width, then that will prevent from any huge images 2000px+ loading on your site.

5) Test the new theme in preview mode. If it looks good, then you can publish it.

[sw79]

Thanks for the reply!

I guess I will need to find my own rule on what I want as size.

Some say max 2048px, some say 1500, my theme developer says 1065px wide product images and "Heroes, Slideshows, Collection headers" (full-width) 2880px wide. 

They say images need to tool crisp and sharp to impress but 2880 seems very large 🙂 

Maybe they consider 5k imac 27" screens like many web developers use, while many/most people browsing stores are just using mobile phones. 

[JoesIdeas]

Ya, I would experiment with some different sizes and choose what works best for you.

It's a matter of opinion, because image size vs load speed are inversely related, so you need to decide what's most important. The parameters we use (900px mobile / 1500px desktop) are based on an average of what's good for a small enough file size but still crisp for the majority of users.

You can also check your Google Analytics to see what devices / screen widths the majority of your users are using, then search for that device + "screen width CSS" to see the translated pixel size for coding. That will help you identify some data you can use to make your decision.

[SEOAnt-Zoey]

Hi,
I recommend the SEOAnt‑ AI SEO Optimizer application.
It can automatically or manually compress images losslessly, and can also automatically set the alt of the image, which fully meets your needs.

And the Free version
Functions included are:
Auto Image Compress -50 images
Bulk Edit image alt text