Icons appearing Blurry despite being uploaded as high resolution

[lozswioklo]

Hello

In an ideal world, I would be uploading a SVG not PNG files… but so far have been finding resources that say Shopify doesn’t support SVG.

For the most part, the photography compression isn’t that noticeable, it’s when there are flat coloured Icons - saved as PNGs/72dpi - they are looking blurry / pixelated.

Please see examples:

Homepage - Age Verification Popup Beer Icon x1

https://beermash.com.au/

About Us - 3x black icons

https://beermash.com.au/pages/about

Even if I upload an icon of 700px wide (to be displayed via CSS at 170px wide), it’s automatically creating and using a version of the image that’s 170px wide… hence making it blurry on retina screens.

Is there any way to override these specific images in the backend so that it uses the higher res image, instead of the automatic compressed version? Via hardcoding?

Many thanks,

Lauren

[MOISCHKOWITZ]

I hear you man. I spent a lot of time on this problem and ended up customizing the section so that I could upload SVGs. I created a block called “svgurl” and rendering that inside the Image tag of the section does actually work. I was surprised myself.

https://future-stories.com/ the third section from the top you can see how it looks.

That is the config. You’s just upload the actual SVG to the files and thus get the URL.

src="{{ block.settings.svgurl | img_url: '300x300' }}"