How do I prevent shopify from compressing the quality of the slideshow images?
For example here is my store and the original image I use for the slideshow. It is noticeably worse quality.
Topic summary
A user is experiencing image quality degradation in their slideshow on the Publisher theme. The platform appears to be compressing uploaded slideshow images, resulting in noticeably worse quality compared to the original files. The user is seeking methods to prevent this automatic compression and maintain the original image quality in their store’s slideshow display.
2 Likes
You are in the right platform kindly cross-check the image sent to you is that the problem you are having
no it is the slideshow image
Here is the right platform where you meet the solution to any issues
Ohh I got you now
Did you need me to help you to fix it
I am also an eCommerce specialist I can handle that
1 Like
image_url: width: number
you can try this Liquid image filters in the code to add large image size. you can’t completely turn off Shopify’s CDN compression. Use this method
1 Like
Do you mean a “RELIVE THE DAYS FULL OF NOSTALGIA” banner section?
First of all, looks like its code is already modified and a person who did it was implementing completely different design (say, code requests images to be cropped to a height of 1080, however your images can grow much higher).
Second – always ensure you are uploading images as big as you can and let the theme to resize them to fit visitors screens (seems like your originals are 1080px high?).
Generally, theme code is made to request from the Shopify servers images resized to fit current screen width. However, the rule which theme uses to decide it may be wrong initially or does not fit your current configuration (especially if image was made bigger with some CSS).
If your image dimensions match original theme design I’d suggest to restore the original theme code; if your image is made bigger with CSS – you need to change the code to reflect this. Or try different section settings.
Not sure what you mean if my image is made bigger as the image is 1920x1080 and combined with some code in slideshow.liquid so it displays at full height. I’m trying to fix the image being displayed as blurry and lower quality.
No and this is the reason why it’s blurry.
Your image is set to be full-bleed, so it will grow with the screen width to become wider than 1920.
Say, on my screen right now it covers 2500x1906, but the image is still 1920x1080 because it’s ?crop=center&height=1080"
And the image you’ve uploaded/selected for this section is 1920x1080, not the one you’ve attached to your first post –
Untitled_design_-_2024-11-02T1811434.png and
Untitled_design_-_2024-11-02T181143.73316.png on site vs.
Untitled design - 2024-11-02T181143.73317.png here.
Share a code you have in your hero section as it uses <picture> now and original theme code does not use this tag.
The picture element used in a wrong way.
Say, second srcset suggests to use the same image for all widths.
But srcset should offer images for multiple widths.
<picture>
<source
srcset="
02T1811434.png?crop=center&height=1080&width=750 750w,
02T1811434.png?crop=center&height=1080&width=1100 1100w,
02T1811434.png?crop=center&height=1080&width=1500 1500w
"
media="(max-width: 749px)"
sizes="100vw"
>
<source
srcset="
02T181143.73316.png?crop=center&height=1080 1500w,
02T181143.73316.png?crop=center&height=1080 2000w,
02T181143.73316.png?crop=center&height=1080 2500w,
02T181143.73316.png?crop=center&height=1080 3000w,
02T181143.73316.png?crop=center&height=1080 3840w
"
media="(min-width: 750px)"
sizes="100vw"
>
<img
src="02T181143.73316.png?crop=center&height=1080"
alt="" width="1920" height="1080" loading="eager" fetchpriority="high"
class="banner__media-image" style="width:100%;height:100%;object-fit:cover;"
>
</picture>
Most of the code that looks incorrect is from me changing it trying to find a fix. It had the same blurriness with the default theme. As for the image attached to my post, it is a different size but if that image is used in the slideshow its still blurry.
In this brand new theme I made, I added the same image to a new slideshow. As you can see in this screenshot, it is lower quality.
Screenshot of the image outside of Shopify.
Ok, whatever.
What I am trying to convey is this:
Yes, Shopify does compress images, but the effect of the compression itself is usually negligible.
Visible loss of clarity in 99% of cases is caused by images being improperly sized for the space they fill on the screen.
This may be caused by initial theme error or by simplistic theme modification.
You can modify your theme to load image bigger than the area it has to cover and sizing it down in browser will increase perceived sharpness.
This will, however, affect your pagespeed scores.
Instead, you can slightly bump sharpness before uploading the image to Shopify.
That’s what I myself used to do – sharpen the focal point and around, blur everywhere else – helps keep the image sharp and lightweight.
I’ve encountered several stores which decided to use another image hosting instead of native shopify one – it was constant pain in the everywhere.
Do not think it helped their conversions though.
Shopify is not a platform for pixel peeping, but does it need to be one?
1 Like
If you’re looking for higher quality, better images will help.
On a side note, this looks like a typical dropshipping scheme. Try to be more creative than downloading ai images from fortnite scenery and using them to do dropshipping, and then claiming they’re “hand-made” like you actually have anything to do with it. Just looks cringe.
Images aren’t ai and I made them myself, they are handmade I just don’t have anything to do with it 
1 Like