Shopify Image Quality Optimization (round 2, with stats, 38% Improvement)

Shopify Partner
1 0 1

Jordan - I was just told by Imgix that they no longer support Shopify. Are you still using them? If not, any other suggestions? Is CloudFare a good substitute?

Thanks in advance!

1 Like
Shopify Expert
704 0 67

You might get some mileage from Cloudinary. I was talking to them this morning, more's the pity. Although they don't have a direct integration with Shopify it could be feasible.

I'm a million different people
0 Likes
New Member
1 0 1

Checkout Imagekit.io

Steps: Shopify Integration with Imagekit 

We also provide support for shopify integration. Ping us on chat on website

1 Like

Hi Jordan,

First of all. Thanks for sharing such tips with the community. I personally use TinyPNG service for optimizing images. The execution is done via SellerSmith.com blog with each blog post. The process takes time but it'll be good for users.

Especially I'm finding this valuable with blog post "collection type" such as 30+ Shopify product page collection. The only problem I see here is I'm not sure whether TinyPNG is the best service or maybe use other one? Each optimized image looks like the screenshot below:

What do you think Jordan L?

 

PageFly - CRO Solution for your Store. #1 in Page Builder, #15 in All Apps Category - https://apps.shopify.com/pagefly
0 Likes
Tourist
10 0 2

Hi All,

I read this entire post with great interest as I'm quite new to Shopify and pretty far down the SEO and e-commerce learning curves. I spent that last day or so sweating over image optimization and trying to implement better images on my site, my very first SEO optimization. When I read Jordan L's posts at the top of the thread I thought, oh well that was a waste of time, but it seems it's not really claer what is the best path currently, so I thought I would write down what I did and learned and let you comment on it if you want. In a nutshell, what I found out is that Shopify does seem to optimize images on desktop, but less so mobile. 

Original: I created my sample product photo as an 800x800 600 DPI PNG file. It's a gift card so image quality is not a huge issue. I can imagine other products that would definitely not be true for, but in that case, I guess one could always add small files that are close-ups of important details instead of using a huge high-quality file, but that's not an issue for me. I used 800x800 as a size because I read somewhere that zoom would not take place if images were 800x800 and I don't want the zoom. I have since turned off zoom in settings on my Debut theme and in any case, found out the zoom kicks in 540x540 for me, it's dependant on screen resolution. I also noticed that zoom does not happen on mobile where I imagine it would cause usability issues. 

Compression: I then import my product image file to Photos and export at the same size but with medium quality as a JPG, I could do this with Preview as well but Photos has better batch processing capabilities. The medium resolution seemed to give optimum quality and size based on tests I did. It seems to be 72 DPI. 

I found out that reducing the size (to 240x240) and the quality while exporting from Photos changes my white backgrounds to light grey (in both PNG and JPG formats) which looks horrible on the site.

I decided to use JPG because after reading up on the pros and cons of JPG vs PNG, JPG is always smaller. I can tell with my human eye that Shopify is sending back progressive JPG too. I noticed that if you upload PNG then Shopify will use PNG files for page loads as well. So it seems whatever Shopify is doing the best option is to use JPG.

Compression Tools: I tried Kraken (for PNG) and it is good but still 100% heavier than the my JPG of the pixel size I wanted (800x800). I finally settled on using JPEGMini which shaves about 20% off the size JPG size that I get from reducing quality in Photos. (JPEGMini site is not nearly as nice or as easy to use as Kraken) to get my final optimized file for upload. 

So now I have my optimized JPG product photo that is a 800x800 at 72 DPI JPG and 52 KB. From what I read, that's an acceptable file size. The 800x800 is less than Shopify's recommended 1024x1024 size but I'm betting that not too many people hitting my site are on high-resolution screens. So after uploading this file to Shopify this is what comes back:

On my desktop (MacBook Air @ 1440x900 screen resolution, 361 ppi) that file comes back to me as 540x540 72 dpi and 23 kb.

On mobile (iPhone 6 @ 1334x750 screen resolution or 326 ppi) that file comes back to me as 720x720 72 dpi and 47 kb. 

Reading the Tea leaves: It seems Shopify loads images of different sizes depending on the screen resolution you are using and the platform you are on when loading the page. What I did learn through testing is that you can force Shopify to limit the size of the file by simply uploading a small size file. Shopify is not going to upsize the file, only reduce it. This will result in some ugly pages on high-resolution screens where the image is too small for the container. But this is not going to be an issue on mobile (except maybe for those poor souls with massive full-size iPads with retina displays), a good strategy to keeping Shopify from loading large images while using standard Shopify functionality may be to simply use smaller product photos I chose to use 800x800, an arbitrary number, about halfway between what I get on my desktop (540x540) and Shopify 's recommended number (1024x1024). Shopify says 1024x1024 is the preferred size. And now I understand why because there are probably very few screens with a resolution where 1024x1024 will be too small to fill the container. 

What does not make sense to me is why Shopify would load a much larger file to a mobile device that has less screen resolution than a desktop. The image on desktop is 105mm wide on my screen, whereas on mobile it is 50mm wide in portrait but 95mm wide in landscape. Given similar resolutions, you would think that the file size should be about the same for mobile as it is for desktop. As it happens the image on mobile is about 50% larger, I can imagine Shopify does this to give the viewer the ability to zoom with reasonable quality. Zoomable images function in Shopify does not apply for mobile where the user will simply zoom in with finger gestures. 

To summarize

I use JPG because images are smaller than PNG and I'm not super concerned about detailed image quality for my products. I can force Shopify to use JPG by uploading JPG. 

I optimize my files before uploading to Shopify but based on what is in this thread it is not clear what the benefit to doing that is. It seems though that since Shopify will not upsize anything, that a lighter original results in a lighter file download for site users. 

Desktop and mobile result in different file sizes, and also screen resolution makes a difference. 

I wrote this up in the hopes that my sweat over the past few days could somehow help someone, and also to in the hopes that anyone who sees glaring mistakes in my logic will let me know. Is there anything I can do better?

I only use standard functionality and free tools for the time being.

1 Like
Tourist
10 0 2

Hi All,

Further to my post above, I was doing some more testing today and found that it seems Shopify will actually expand (and increase the file size) of heavily optimized photos on mobile. See Image attached. I did these tests because I was unhappy with the quality of the heavily optimized photos I tried. 

Test 1 is a heavily optimized 240x240 72 dpi JPG which is displayed in a page (not a product page). 

Test 2 is a 480x480 72 dpi JPG which is small but not fully optimized displayed in the same page (I replaced the test 1 with test 2). 

What is clear is that reducing the file size of the original will almost always have a positive effect on the file size sent to the user. 

I hope this is useful. 

1 Like
Tourist
8 0 1

Hi Carl Shepherd,

This post is rather long, I am not sure if you got the chance to check out ImageKit.io, mentioned in few comments above.

It solves the image optimization problem very easily. You don't have to upload and download images or any manual clicks. Once integrated, image optimization becomes automatic. Have a look at this guide - https://imagekit.io/blog/optimize-images-shopify-website-imagekit/

This is not a free tool, but pricing is very reasonable.

Hope you will find it useful.

1 Like
Highlighted
Trailblazer
195 0 84

@rickydazla it's kind of telling that Shopify removed the TTFB article from their blog. Not sure why though, as the comments were not too harsh: https://disqus.com/home/discussion/shopifypartnerblog/why_drastically_reducing_ttfb_can_mean_better_...

The above guy Manu Chaudhary is the founder of imagekit.io, so take his advice with a grain of salt. It does look like a great service though and if it can help you reduce the size of your images with out sacrificing quality, then it's probably worth the money for higher traffic Shopify sites. With that said, they charge $9 for 20GB and imgix costs $1.60 for 20GB.

With that said, I'm still using imgix. While they probably "cut off shopify support" it doesn't mean that you can't implement it with your sites, it just requires technical knowledge.

Here's their reasoning

Shopify Guide

  • Due to issues with stale images, we’re retiring our Shopify Integration guide. We hope to bring it back when we can offer a solution that more robustly integrates with Shopify.

Again, it requires some technical knowledge, but it works fine. I've been running their integration guide on one of my sites for years now. 

 

With that all said, as long as sites like webpagetest.org & googles page speed insights are giving you a decent rating now, then you shoudn't need to look into this.

1 Like
Tourist
21 0 2

Thank you all for your wonderful contributions, guys. I appreciate the insight into what Shopify’s servers do to images.

I have 1 question, and then something to share.

First, in the era of retina dislays, shouldn’t we all be saving images at higher than 72dpi? Perhaps 220?

It’s not just phones and ipads that are “retina” these days. Many new computers default to 4k or even 5k displays. 

It seems that we should feed Shopify a retina optimized image, then it should cut it down to size for lesser devices.

Second, I’ve been using Google’s new Guetzli compression with great success. It produces a 20-35% reduction in jpeg size using perceptual encoding.

People like to say it’s slow, but it really only takes a minute or two on my 2017 i7 Macbook Pro when compressing Shopify sized images. And I’ve been using 2048px, not even the 1024 suggested here

I’ve been using ImageOptim, which is free on Mac. https://imageoptim.com/

Hope that helps someone

0 Likes