Why are my carousel images blurry in Shopify's Gain theme?

Store Design
, , ,
1

Hi there - I need some help with images on my site

Per the following screen grab:

#1 - I have created some images in SVG in Inkscape. Canvas size is 2048 x 1152 px and the image is pin sharp.

#2 - I exported the image as a PNG at 72 DPI. Inkscape resizes this to 1536 x 864 px. When I open this in Microsoft Photo, the image is still perfect as you can see in the grab

#3 - then I load this same image into the Carousel in Shopify (using the Gain theme), and the quality falls - check out the wording in the picture frame

Shoify blurry image1.jpg
Shoify blurry image1.jpg2450×1440 284 KB

I have tried everything - saving in different formats, different DPI, different canvas size, but It’s never like the saved PNG or SVG.

What is happening to destroy the quality, and how do I fix?

The other images in the site face the same but is less noticeable than the header carousel which is a shame as it’s the first thing everyone sees.

Hoping you can help

Thanks

Arjay

2

Could it be that you have ambient motion activated? I’ve been experiencing resolution issues when this option is turned on.

In general, the process you’ve used is correct; however, remember that for image optimization, it’s advisable to use WebP or JPG formats.

If you continue to encounter these issues, it might be related to the code. Nevertheless, I’ll leave you with an interesting page that I personally use. You can resize and compress images there.

Hope you can resolve the error!

3

Hello @Arjay12345
I hope you are doing well, ask for help from UTD (the dev Team who developed this Theme): https://utdweb.team/contact-us/
Also, look at the guide (all features are described in detail):

  1. Video: https://www.youtube.com/@UTD-eCommerce/
  2. Text: https://utdweb.team/shopify-themes/gain/manual/