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?
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.
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?
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:
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!
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.
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!
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?