Product pictures are blurry, no matter what size/quality/or format I upload as

Highlighted
New Member
4 0 0

Hi there,

I've tried everything I know on how to upload images for web, but all my product pictures seem to blurry still. The images are shot with a DSLR camera and are currently uploaded as resized 700 KB—1M jpg images. I used Photoshop to resize and save jpgs for web.

Is there maybe some kind of code in my store's liquid file that is changing the quality of the images?

Thank you!

0 Likes
Highlighted
Shopify Expert
10007 116 1818

Hey Rebecca,

Do you have a link to a page that shows blurry images? A theme will show images a different sizes depending on how the image is viewed (eg, smaller on collections, larger on product pages, etc).

You're better off not heavily compressing the images before uploading as Shopify will also apply a level of compression. 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
4 0 0

Hey Jason,

Thanks for the response. Here's a link to my site: https://chalkwhimsy.com/

The theme I'm using is Editions—Minimal.

The "featured" products on the home page are blurry and the actual product pictures are a bit blurry too. Especially the Coffee print. Wondering if there's a way to make the product images smaller to perhaps lessen lower resolution look?

Thanks!

0 Likes
Highlighted
Shopify Expert
10007 116 1818

I can see some obvious JPEG compression artifacts (where the solid blocks of white and type intersect) creeping in when the image served is a smaller one. JPEGs don't handle large blocks of solid colour very well so this isn't a totally unexpected result. Now it will be less noticable on larger sized images, but if you look at the edges you can still see it. Below is from the full sized image. See the artifacts?

You could try a few things:

  • Use png files. Not ideal given that the file will be massive. It will however come without compression.
  • You *could* modifiy the theme code to use a larger image. This will help mask some of the issue, but comes at the cost of increasing the file size. It will still be smaller than the png option
  • Try and upload a less compressed / optimised version in the first place. The less jpeg compression artifacts you add to start with the better.
★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
4 0 0

Hi,

So I uploaded a 2MB and a 5MB jpg of the coffee print image and they still look the same to me. Any larger and Shopify doesn't let me upload them—file size too big error message. Plus these larger file sizes are going to bog down my site. I left the images up if you want to check it out. I'd prefer not to have a larger product image size on my site, as they're already larger than I'd ideally like. Is there anything else I could try? Do you know why Shopify compresses the images? The  jpgs look great on my computer, but as soon as I upload them they get grainy and blurry.

Thanks for your help!

0 Likes
Highlighted
Shopify Expert
10007 116 1818

Files size is not so much the important thing to consider as is the quality of the image itself. If the original image (before uploading) has JPEG artifacts visible that's going to carry through. I am curious to see what the the file looked like before uploading so pop a link to a dropbox url (or similar). It's possible that the automatic Shopify compression is causing the issue, but let's rule out the master first. I'd guess there'd have to be a small percentile of images that don't compress well.

The bluriness will also be increased if you're viewing single density images on a double (or triple) density display. Those looking at single density monitors won't see the same effect. That's more about general blur rather than JPEG artifacts.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
2 0 0

Hi Rebecca,

I'm picking up on this discussion, as I am experiencing the same problem on two seperate Shopify websites. I had a look at your website and it seems like you have solved the problem - you rimages are very sharp and crips on my retina screen. How did you solve it?

Many thanks

Tino

0 Likes
Highlighted
Tourist
10 0 0

Hello,

I'm having the same issue, consulted the forums, and have been shifting file size/resolution/file types, to no avail...The image looks fine on my computer, but as soon as I upload it to Shopify, Shopify enlarges the image and its blurry. My theme is Brooklyn.

Can someone please help? 

I'll add the image--Thanks guys!

https://yorksshonagallery.com/products/five-egg-ostrich-egg-lamp

https://yorksshonagallery.com/products/three-egg-ostrich-egg-lamp

 

0 Likes
Highlighted
Tourist
10 0 0

See attached image

0 Likes
Highlighted
New Member
2 0 0

Hey There,

 

I have has the same issue with a transfer from Webflow to Shopify and can't seem to find an answer. It is definitely the theme settings as the image direct URL shows in perfect quality and then in the theme images are compressed for whatever reason.

I have formated the images for web use, are you mentioning I should upload large raw image files?

Does anyone know if the theme team created a solution for this issue, or does anyone have a workaround to disable the theme image compressor? 

 

Cheers.

0 Likes