Product Image Quality...

Aaron_P
Excursionist
37 0 13

Hey -

So I've uploaded a few hundred product images to my store and I noticed that the image quality (JPG) is significantly degraded when the images show up in my store.  I have optimized them to the desired settings in Photoshop before I upload them and after uploading them they are way more blurry.  The aspect ratio is preserved but the file size is way lower.  for example I upload a file that is 60kb (just the way I want it) but then the same image that displays in the browser is only 16kb??? I understand the performance gains but that not necessesarily what I am looking for (I know how that sounds).  Is there a way I can avoid this??  Super annoying.  Thanks ahead of time...

Mircea_Piturca
Shopify Partner
1489 42 317

Without seeing the live site is hard to tell but most likely you have an image size parameter assigned on the "blurry" images. Basically you may be taken a "small", 100x100, image and scale it to a larger dimension via CSS.

See:

https://help.shopify.com/themes/liquid/filters/url-filters#size-parameters

https://help.shopify.com/themes/liquid/filters/url-filters#img_url

Finally—Add variant descriptions to your products
Aaron_P
Excursionist
37 0 13

Thanks but that's not the case. Blurry may have been a strong word. There are not CSS filters applied to the image. Even if this were the case it would not change the file size as I mentioned. It's clear that something somewhere changes the image quality (and in turn file size) after uploading it. I am wondering where it is and if I can modify it...

Mircea_Piturca
Shopify Partner
1489 42 317

I am not reffering to a CSS propriety but a Liquid image size parameter

{{ product.featured_image | product_img_url: "medium" }}

 

Finally—Add variant descriptions to your products
0 Likes
Suture
Shopify Expert
648 0 108

It looks like you're using the Kingdom theme which has full screen images on the product page. Try increasing the dimensions of your images. On the Theme Store demo site it's using 960x960px.

0 Likes
Suture
Shopify Expert
648 0 108

I think the size parameter is 2048x2048

0 Likes
Aaron_P
Excursionist
37 0 13

Thanks Ricky and Mircea but your responses aren't really answering my question. I am familiar with the Liquid Image Size Parameter and how it works.  Basically, I would like my product images to display at their native quality.  That is, I would like the exact same product image (jpg) file that I upload for a product to be used as the product image on the website (seems simple enough right?).

Instead, when I upload an image something happens on the backend (Shopify side) where the image I upload is re-rendered at with different quality/compression specifications.  I know this is happening because I can see a degraded image quality visually AND I see that the file size has been reduced by about 65%.  My question is: Can I avoid this kind of processing for my product images? If so, how???

I know what you are thinking but It's not the Image Size Parameter.  To prove it, here is a test case I would encourage you to run.  If at the end of it you are suprised, please dont respond on this thread and kindly escalate my support request to a higher tier please.  If not, please explain what is going on and let me know what I can do to avoid this kind of image processing.

TEST CASE

- Produce and image that is 1500 x 375 (lets assume it is 70kb in size)

- Make sure the snippet that is returning the image is set to "master" so that it returns the largest images available (according to the docs its 2048 x 2048 pixels - which should be fine since the image we produced above is smaller)

{{ product.featured_image | product_img_url: "master" }}

- Via browser go to that product page and right click and save that same image locally.  Tada! The image is still 1500 x 375 but the image quallity is lower AND the file size is now about 65% smaller (around 23kb)  ...Its NOT the same image that was uploaded?!?!

Thanks for the help.

 

 

Mircea_Piturca
Shopify Partner
1489 42 317

This is strange. usually Shopify increases the images, a 100KB images usually gets to 160KB.

It would help to see a live page 

Finally—Add variant descriptions to your products
0 Likes
Stephen11
Shopify Partner
15 0 0

Hi Aaron,

You can refer this post : https://help.shopify.com/themes/liquid/filters/url-filters

Home page: http://www.secomapp.com Or https://apps.shopify.com/partners/secomapp
0 Likes
Jason
Shopify Expert
10360 158 2010

I'll echo the comments here - a live example is going to be needed to offer further assistance. I really do think something else is happening here so let's see. If you don't want to open up the store at the very least upload the original image somewhere so the members can test it in their own dev accounts.

For reference, I did a test upload of an image that was 581kb. When reviewing the master, it remained at 581kb after upload (file).

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes