My pictures loses their quality when uploaded

[Zetterman]

Hi when I try to upload my images to my store they get pixelated and blurry this also happens on the product pictures, Anyone know how to fix this?

Store url: https://watworkwear.com

[Moira · Accepted solution]

Hey @Zetterman,

To keep load times fast, Shopify automatically compresses images when they're displayed on your online store. Compressing an image means reducing the file size to allow for faster page loading. I have a few tips that should help you to export clearer images:

• If your images are PNG, I suggest exporting in JPEG (same quality for smaller Kb size)
• Your hero images are quite small (30-50Kb), at that file size they are never going to be great quality so you need to up it to around 100-150Kb (if your source images are all high quality then they are probably much bigger than this, so you'll need to optimize them down to an appropriate size).
• If you optimize them to 85% as a JPEG then Shopify won't optimize them further, so you should get the results you are expecting.
• There is an article here that goes into more depth about automatic image compression and format selection.

As a side note, I love the work you've done on your website so far. Certain products like the Wat Hoodie stand out to me because of the great job you've done with the product images and description. Have you thought about who your target customer is for your website? Our blog post on Building a Buyer Persona talks about narrowing down who your ideal customer is. This process is good to go through so that you can get the most out of your marketing.

Let me know if I can clarify anything further!

[anchorball]

Tried it - doesn't work actually - tired all kinds of variations on this - larger size images etc. Shopify image compression is way too agressive and makes my whole site look really bad. I have a squarespace site as well and images on that always look amazing. I think it would be wise for Shopify to address this and make the sitewide compression less aggressive - or remove and leave it to their customers. As an artist it really kills the look and feel or my work. Having it automatically applied like this is overkill and seems like an outdated practice considering most people are on fast connections nowadays - even on phones. Please fix!!   

[Twoodlepip]

So well said. Same boat. It is such a pity to put so much effort into crafting beautiful images to sell your art to have Shopify sh*t on them by forcing really redundant image compressing. It's 2024 not 2015. 

Please Shopify let us dictate our site image resolution!!

[gokha1]

I totally agree with @anchorball. 

The site I am doing right now has the same problem. As example the image in the product detail page is not distorted from compression as much as the image that links to the product. All while both images are loaded up from the inventory on the backend (so no 2 different images of the same but only one)

There had to be a way to adjust this setting.

[Twoodlepip]

Exactly, it's the same image? This is what was confusing me.

It looks fine on Product page but is blurred beyond belief on Collection page!

How is this acceptable?? How do others using Shopify successfully navigate this? 

I literally can't show my collection page (which hosts all the art prints like a gallery) because of this.. 

For the monthly fee we pay is disgraceful.

[nnrbzz]

this is NOT an accepted solution. I've reduced a 800KB image down to 230KB and it's STILL being turned into sludge. This isn't acceptable. it's 2024, nobody has potato internet, and if they do they're not my target audience.

[Twoodlepip]

Hi Moira, 

I am having an issue with Shopify force compressing my images which result in product photos that are a blurry pixelated mess.

I've followed image best practice (I'm an illustrator/designer so optimising images for 15yrs+)

I've created my file 2048px 144res, on the left you can see the quality in Photoshop, on the right is when I upload it to Shopify. It's woefully poor quality. Other images have also been affected, banding in gradients where none exist in original file because Shopify has compressed aggressively.

As someone who is selling their ART I need the images to be top quality. This is not an acceptable level of resolution.

Can you please find a solution for this?

[Twoodlepip]

Ok Shopify has even compressed THAT FILE into a blurry mess. There is a huge distinction in quality between both. Until I upload it of course.

What do we have to do to get decent images??

[erixy]

Have you found a solution to this? I've been looking everywhere I cannot figure out a way around this.

[Twoodlepip]

Nope. I contacted Shopify support but gave up. I don't understand as mentioned above it's the same image uploaded, it looks fine in one instance and is blurred in another. I've had to redesign my site to avoid a collection overview. Frustrating.

[Twoodlepip]

update: See solution that WORKS below! : D

Upload as an SVG and the resolution issue is resolved 🙏

[BTO2]

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 ( https://unpkg.com/svgedit@7.3.3/dist/editor/index.html 

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!

[Celeb2025]

I'm also looking for the same solution

[bulowski]

Hi all. I just found this thread because I was experiencing the exact same issue. The solution mentioned previously didn't help (surprise, surprise). However, I figured it out! 

Download your image as a SVG file and upload it to your store. The quality will remain the exact same as your original artwork. Hope this helps!

[Twoodlepip]

See solution that WORKS below! : D

Upload as an SVG and the resolution issue is resolved 🙏

[PhilipCodeMaste]

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.

[bulowski]

Download your image as a SVG file and upload it to your store. The quality will remain the exact same as your original artwork. Hope this helps!

[Twoodlepip]

THIS WORKED!!!!

You absolute genius !! 🌟 🏆 🌟

I can't believe it I thought I was doomed to low res images 😂

Thank you so much! 

[bulowski]

No problem!! Glad we have a solution to this problem! 

[cptstoa]

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

[mdns]

It's just shameful this happens in 2024. Reckless image compression for the sake of file size. It would be nice if the user had some control over it, I know I've put in an awful lot of time to create the absolute best images for my store, only for them to end up compressed by Shopify. Please fix this asap!

[mdns]

If you export from Figma please make sure you delete these rows. They prevent the SVG looking good on mobile because of the <pattern> tag. Also, delete the </defs> row at the end. Hope this helps.

 

 

[Hotmann]

The solution  to this issue is to add the img_url: 'master' to your image div 

<img src="{{ section.settings.image | img_url: 'master' }}" alt="{{ section.settings.text }}">
This will import exact image you uploaded in your store to the website instead of shopify compressing it 

[Mer2]

Could you please share a screenhot showing where that code should be added? Thank you in advance

[Hotmann]

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"

[Jayne-Anne]

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.

[Dark_Swan]

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!