Blurry images on header Carousel

New Member
4 0 0

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


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






Replies 2 (2)

Shopify Partner
300 90 114

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!

Shopify Partner
8 1 0

Hello @Arjay12345  
I hope you are doing well, ask for help from UTD (the dev Team who developed this Theme): 
Also, look at the guide (all features are described in detail):
1. Video: 
2. Text: 

I'll be happy to help you sort out the issues of your store.