[Supply Theme] Image quality reduce when uploading to slideshow

Chongkai_Wen
Tourist
11 0 1

Hi,

I notice that slideshow images get a huge reduction in image quality. Not the size, but the quality. This is especially so for simple graphics and text, not photos.

If you visit my site, you will notice that on the slideshow, the images are of reduced quality and are not the original uploaded. This can be observe in Asset folder where the files are slide_X.jpg. The jpg files look high quality, but when browsing on the website, the quality is changed.

Any help would be great.

Thanks.

Chongkai_Wen
Tourist
11 0 1

I have uploaded images to show the difference.

The left is original slideshow image and the right is downloaded from the website of the original.

Graphics and text tend to get a huge reduction is quality.

The file that I uploaded for the slideshow is 308kb, while the file I downloaded of the same image from my website is 52kb. Clearly, shopify recompressed the file and ended up in reduced quality image. I have tried uploading the image at double the size, 2000x350px, and the same thing happened. I can even try 10,000x3,500px and it is probably going to be the same.

Is there a working solution around this? Such as preventing recompression and using the original file instead. Surely, I am not the only shopify user encountering is image quality issue.

0 Likes
Chongkai_Wen
Tourist
11 0 1

Problem solved.

Solutions for future users who encounter this.

  1. Open "EDIT HTML/CSS"
  2. Search for "slider.liquid" and open it.
  3. Presumably you didn't touch this file. On line 12, change asset_img_url: '1024x1024' to asset_img_url: 'master'.

The image loaded will still be recompressed but at image size 2048x2048px. This should return a better quality image.

I solved so many script and theme problems I encountered myself that shopify gurus and their design team can't resolve. They should hire me~lol

0 Likes
Sue_Santos
Shopify Partner
1 0 0

Thank you so much. I was able to edit the liquid file for the collections hero image using this technique. Although master didn't work, changing the dimensions did.

Debut theme: collection-template.liquid

<div class="collection-hero__image" style="background-image: url({{ collection.image | img_url: '1024x300', crop: 'top' }});"></div>

to

<div class="collection-hero__image" style="background-image: url({{ collection.image | img_url: '1900x300', crop: 'both' }});"></div>

I've run into the same problem in WordPress and there was a different work around. I knew there'd be a way!

0 Likes
Simon_Watson
New Member
1 0 0

Did anyone get to the bottom of this? When I upload high quality JPGs even if I select "Original" image they have still been compressed by Shopify.

I have attached original image to this post, you can look at the uploaded version here:
https://cdn.shopify.com/s/files/1/1254/9413/files/how-to-shave-guide-v4.jpg?16773522646941570180

0 Likes