Fix low quality slideshow image on Publisher theme

Store Design
1

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.

Untitled design - 2024-11-02T181143.73317
Untitled design - 2024-11-02T181143.733173840Ă—2160 2.29 MB

2 Likes
2

You are in the right platform kindly cross-check the image sent to you is that the problem you are having

Capture1.PNG
Capture1.PNG1203Ă—382 90.9 KB

3

no it is the slideshow image

4

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
5 
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
6

So what is the

your budget to fix that

7

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.

8

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.

9

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.

Screenshot 2025-11-07 at 1.01.26 PM
Screenshot 2025-11-07 at 1.01.26 PM740Ă—493 103 KB

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>