The solution to this issue is to add the img_url: ‘master’ to your image div
This will import exact image you uploaded in your store to the website instead of shopify compressing it
Topic summary
Core Issue:
Shopify’s automatic image compression is causing uploaded images to appear pixelated and blurry, particularly affecting artists and designers selling visual products. Users report that even optimized images (100-150KB JPEGs at 85% quality) still suffer from aggressive compression.
Official Guidance (Limited Success):
- Export as JPEG instead of PNG
- Optimize images to 100-150KB at 85% quality
- Shopify won’t further compress images already optimized to 85%
However, multiple users confirm this approach doesn’t resolve the problem in 2024.
Working Solutions:
-
SVG Upload Method (Most Popular):
- Upload images as SVG files to preserve original quality
- Note: Figma exports may require removing specific code rows (
<pattern>tags and</defs>) for proper mobile display
-
Image Size Selection:
- Double-click uploaded images in the backend editor
- Select “Original size” from formatting options instead of default compressed versions
-
Code Modification:
- Add
img_url: 'master'parameter to image div code to bypass compression - Example:
<img src="{{ section.settings.image | img_url: 'master' }}">
- Add
Ongoing Frustration:
Users express significant dissatisfaction with Shopify’s lack of user control over compression settings, calling it outdated for 2024 internet speeds.
Could you please share a screenhot showing where that code should be added? Thank you in advance
THANK YOU TWOODLEPIP & Bulowski ! YES - IT IS 2024 and Shopify changed how we can upload files - (Just 2 years ago when the “accepted solution” may have worked - we could upload and change the size of the image without changing the quality. Now we cannot). I found a free svg-edit ( SVG-edit
and changed two large files and they seem to work now. I have no idea what or who upkg is, or if they also install spamware… but for now, I’m happy. (Someone tell me when the files no longer are visible: https://beyondtheolive.com/pages/xoiuw09qupoi3rh
because in 2 more years this solution won’t work unless someone can make $$ off of it!) Cheers!
It should be added to the file and line where you want your image to be displayed. Also don’t forget to use the correct src path for the image to display. For example the part for mine is this; src="section.settings.image"
I manage to upload the PNG into the url mentioned but can’t seem to succeed at the next steps correctly, also when i try to upload a svg version in shopify they tell me there is an upload error process 
help please
Hi all, I had this issue too. I uploaded an image to a Page and it looked awful, really blurry. In the end I double clicked on the image in the back end and it showed me an ‘edit’ screen. I was then able to select how I wanted my images to be formatted, so I chose “Original size” and then it loaded fine.
2 Likes
Thank you so much! These are exactly the options we had before. I can’t believe I contacted Shopify support for over a month, and no one actually knew about this—they kept giving me standard copy-paste answers. You saved the day!
I think it is nothing about the images. It is a bug in the code. Wrong Image Ressource is displayed on desktop view. So the smaller version for mobile devices is displayed on desktop.
Oh wow, this is the actual solution!!!
Whenever you upload an image to Shopify, it will generate multiple versions of that same image cropped to different sizes. By default it chooses the smallest size it generated from your image which, when you notice the file name, will have the _480x480 appended to the file name.
Is this double-click to choose which size to choose behavior documented anywhere???
Same need a solution to blurry images. We spend so much on photoshoot to get high quality images only to have them be blurry.
This worked brilliantly. Thank you!