Shopify Image Compression INCREASES File Sizes

Highlighted
Shopify Partner
43 1 16

This question has been asked before in some form or another, but to my knowledge a Shopify-based solution has yet to be proposed.

 

Is there any way to force Shopify to serve the exact image file that you uploaded, without "optimizing" it? Specifically when creating 24-bit PNGs, I use advanced compression techniques to drastically reduce the filesizes, but then when I upload the images to Shopify, when I serve the files to the website (even using the "master" file) all of those compression benefits are destroyed and the file balloons in size. Like @Jordan_L outlined in this forum post I find myself having to resort to using a CDN to serve these files, but I would much prefer to be able to serve them directly from Shopify.

 

As one example, here is the exact same file hosted on Google Drive vs the "compressed" version hosted on Shopify. The Shopify file is 75% larger than my original file.

 

Screen Shot 2020-05-15 at 10.05.43 AM.png

1 Like
Highlighted
Shopify Partner
2294 117 353

@timd_mackey I haven't looked at this in awhile,

Have you confirmed the file sizes on disk?

Same result if you use the admin files to place images?

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
1 Like
Highlighted
Shopify Partner
43 1 16

@PaulNewton 

Have you confirmed the file sizes on disk?

Good question. I just checked, and the results are even worse than I thought. I was thinking my original file size seemed too big, and it turns out Google Drive is inflating the filesize as well. Here are the correct filesizes:

 

In Shopify File Admin:

Screen Shot 2020-05-15 at 12.09.10 PM.png

In Browser:

Screen Shot 2020-05-15 at 12.23.03 PM.png

 

After Downloading:

Screen Shot 2020-05-15 at 12.13.40 PM.png

 

Taking the original filesize at 256KB, vs Shopify's recompressed filesize at 879KB, this is actually an increase of 244%. 😱

 

Same result if you use the admin files to place images?

Yes, I've tried the following, and all methods produce the same result:

  1. placing the image using the Page editor
  2. uploading using the File Admin and referencing the file in liquid via file_url / file_img_url: 'master'
  3. including the image in the theme file and referencing in liquid via asset_url / asset_img_url: 'master'
  4. uploading as a product / category image and referencing in liquid via img_url: 'master'

Notably, the one positive thing that Shopify is doing here is serving a much smaller webp file to Chrome, so that's something:

Screen Shot 2020-05-15 at 12.45.17 PM.png

0 Likes
Highlighted
Shopify Partner
43 1 16

This is probably more complicated than it sounds, but it seems like a simple solution to this problem would be if Shopify implemented a simple sanity check in their image pipeline to make sure that the compressed file isn't larger than the original file—if it is larger, just serve up the original file.

0 Likes
Highlighted
Trailblazer
209 1 106

Me dealing with this in 2016
https://medium.com/@j0rd/an-open-letter-to-shopify-a-feature-worth-supporting-7f7334345188

S
till not fixed?  I do think me causing a stink got them to improve it at least.


1 Like
Highlighted
Shopify Partner
43 1 16
@Jordan_L wrote:

Me dealing with this in 2016
https://medium.com/@j0rd/an-open-letter-to-shopify-a-feature-worth-supporting-7f7334345188

S
till not fixed?  I do think me causing a stink got them to improve it at least.


Hey Jordan, thanks for writing that article! I'm sure the fuss you made about this did help to improve things within Shopify :). It was actually your explanation there that led me to settle on a similar solution! I didn't feel like shelling out for a separate image host though, so I'm just using our own webserver which is cached with Cloudflare. Problem solved! (But unnecessarily complicated)

0 Likes
Highlighted
Trailblazer
209 1 106

Ya. I paid a couple hundred a month to imgix to do the hosting of the images. For that though I did get a nice bump in sales at the time.

I haven't done a deep dive on how shopify processes images now, but it appears to be much better. They use webp and other formats as well, which can greatly reduce file size.

I've re-launched some of my websites and I'm no longer using imgix, so at some point I'll see if images can be reduced further, but for now I'm happy with them being "good enough". In the past though, they were "horribly bad".

0 Likes
Highlighted
Shopify Partner
2294 117 353

@Jordan_L wrote:

Ya. I paid a couple hundred a month to imgix to do the hosting of the images. For that though I did get a nice bump in sales at the time.


Did you document or do any writing about this experience, like you said shopify's image handling is always improved so it can be kind of hard to guage if something like this is suitable for packaging up into a turnkey solution.

At minimum interested in how you handled content images, just brute find&replace, methodical naming conventions to map urls, or just frontend shenanigans?

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
Trailblazer
209 1 106

I pretty much just did search and replace and shoved them everywhere at first.

Imgix actually wrote an article and provided some demo code on how to do it, after I showed them what I was doing, based off my code.

They took that article down at some point, as I believe it caused some bugs for other people. I ended up using their code on one of my sites, but left my crappy old code on another one of my sites.

Other people have created other solutions on how to do this:
https://github.com/Jore/shopify-imgix
https://freakdesign.com.au/blogs/news/91099207-how-to-use-imgix-with-shopify

I honestly don't believe it's worth it anymore, unless you need more control, which imgix can provide for you.

I did document how this helped 4 months after implementation here:
https://community.shopify.com/c/Shopify-Discussion/Shopify-Image-Quality-Optimization-round-2-with-s...

and wrote an article about it here:
https://medium.com/@j0rd/an-open-letter-to-shopify-a-feature-worth-supporting-7f7334345188

I made https://twitter.com/tobi aware of this image issue here (because I wanted liquid whitespace trim and he was like WTF are you doing, why don't you use Shopify CDN, which I think got the ball rolling on their fixes as a priority)
https://github.com/Shopify/liquid/pull/215#issuecomment-203903589






2 Likes
Highlighted
Shopify Partner
2294 117 353

 


@Jordan_L wrote:


I made https://twitter.com/tobi aware of this image issue here (because I wanted liquid whitespace trim and he was like WTF are you doing, why don't you use Shopify CDN, which I think got the ball rolling on their fixes as a priority)
https://github.com/Shopify/liquid/pull/215#issuecomment-203903589


ROFL lol oh yeah I remember seeing that when looking into the whitespace feature when it rolled out.

It's in my list of reasons why the platform should have it's own public issue repo,  or at minimum a repo for the shopifyflavor of liquid.

Wasting time going through first-tier helpdesk drives me batty from all the dead ends to the point that I've stopped bothering with reports.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
1 Like