High quality photos once loaded to shopify appear differently

Highlighted
Tourist
8 0 5

Hi my shopify is:

http://tjswim.com/

and the theme i'm using is Brooklyn.

I'm having issues with my product images. They are saved on my laptop as high quality images however once they are loaded to shopify they appear as low quality/grainy images. I would like to know how I can fix this, as I would like customers to view high quality product images.

Also i'm recently having issues with the colour of the images. On my laptop, all the images are the exact same colour as the photographer applied identical colour filters to each image. However, once uploaded to shopify, the colour of each product image is slightly different. For example on the "all products" page the first 2 products are the same colour and the 3rd product is a different colour. When I say a different colour, I feel that the skin colour of the model is more saturated and more contrasted in some product images compared to others.

I don't know much when it comes to photo resolution (i don't even know how to resize a photo), but any help would be much appreciated! 

Thanks,

Tara

1 Like
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
71 0 10

Hi Tara,

Jennifer here from the Shopify support team. I'd be happy to give you a hand with your questions today :)

It sounds like your theme is compressing your images. It does this for a few reasons, mainly to ensure your site doesn't have slow load times. (This can effect your bounce rates and SEO.) 

We have a guide to image size I would suggest taking a look at. 

As for your images that are displaying with slightly different colours it sounds like they have colour profiles attached to them which is causing them to display incorrectly. You can find out more about colour profiles in this tutorial.

You can shrink your photo sizes using a photo editor like pixlr.com. For your images with colour profiles attached to them you'll need to remove them in photoshop or ask your photographer to.

I hope that helps to answer your questions! If you need any more help please don't hesitate to reach out to us, we're availble to help 24/7!

Cheers!

Shopify image guide: https://help.shopify.com/manual/products/product-variant-images#image-sizes

Colour profiles tutorial: https://help.shopify.com/themes/customization/colors-images-and-video/fix-colors-of-uploaded-images

0 Likes
Highlighted
Tourist
8 0 5

Hi Jennifer,

Thanks so much for your assistance.

I sent my photographer (who prepared these images for me) your response and he attempted to fix the images on his end. He said the following:

 

"1. If the original images are too small - they recommend anything up to 2048 x 2048, or minimum 1024 x 1024 for square images

Your images are all 998 x 1500. This should be ok . But I will increase the dimensions to 1098 x 1650 to see if that helps

 

2. If the file sizes are too large, maybe they will be compressed by Shopify - they recommend anything up to 4.2MB

The file sizes are only ~200KB , this should not be an issue. However, I will shrink the file sizes a little to ~150KB just in case

 

3. If the images have a color profile attached, this could cause problems

The current images have a standard Adobe 1998 color profile attached . But I’ll remove it to see if it helps"

 

I deleted all photos from my website and then reloaded the new/updated versions of the photos however there was absolutely no difference, the images still appeared in the exact same low quality.

This is something that is really bothering me, having high quality product images is a priority of mine so if you have any further suggestions on how to fix this issue I would love to hear from you as soon as possible.

Thank you so much,

Tara

4 Likes
Highlighted
New Member
2 0 1

I am having the same issues as well using Brooklyn. I've uploaded hi-res images that are well within the size guidelines. My larger images on the product pages look fantastic, but when smaller versions of those images are created within the theme they look horrible. I modified the code to force all the images to render larger, so no small images are created and everything looks good image wise. It's just that the layout looks a bit weird with large images on the page. Any help around this issue would be great.

1 Like
Highlighted
Excursionist
30 0 4

Good luck, Tara. I struggled and struggled with image quality and Shopify. I even called Shopify support on the phone. The rep seemed concerned and helpful on the phone, but she ended up dropping the issue and not responding to my emails when her suggestions, which basically mirrored what you were told, didn't work.

Near as I can tell, it boils down to Shopify's aggressive image compression, which I assume they do to save bandwidth.

My best results have come from saving product .jpg images at the current max of 2048x2048 at jpg quality 100% in Photoshop. As for color, Shopify says that including a color profile will cause problems, but I don't notice a difference as long as I convert to sRGB before saving the files. 

This has been a huge problem for me and is probably the single greatest reason I might drop Shopify entirely. Oh, that and the inability to set shipping prices by product instead of just by weight or price without paying extra for it or using an app. That's a basic feature of most ecommerce packages. 

2 Likes
Highlighted
Shopify Partner
1162 31 205

@Tara i believe you can see the difference here > https://monosnap.com/file/4qDikkclb3R0FftLARRZWHVJup5BCw

image size filter defined by theme causes the poor quality. https://monosnap.com/file/8DFvMGtBApqEiYcLrXqiC6IS3itZLD

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
Highlighted
Excursionist
30 0 4

Lixon, I think that where an image size filter or just basic HTML height and width are responsible for enlarging an image beyond its native resolution and hurting image quality is usually obvious in the code and easy to diagnose, but if you look back through the forum here for the number of people complaining about .jpg image quality in Shopify, there's a lot more to the issue than that.

0 Likes
Highlighted
Shopify Partner
1162 31 205

I understand Karen . See > https://github.com/Shopify/liquid/pull/215#issuecomment-203967421

 > https://github.com/Shopify/liquid/pull/215#issuecomment-233131299

"The JPG compression of original images is unchanged."

If that's the case, better to look for self-hosted solutions ( For High-quality photos)

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
Highlighted
Shopify Partner
1162 31 205

Worth reading https://medium.com/@j0rd/an-open-letter-to-shopify-a-feature-worth-supporting-7f7334345188#.jyfbnqee...

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
Highlighted
Excursionist
30 0 4

Hi Lixon,

"The JPG compression of original images is unchanged."

At face value, this would imply that they aren't further optimizing or compressing originals, but we know that they are based on the visual differences between the originals that people are uploading and the "originals" that are appearing in store. If they weren't, then this issue wouldn't be an issue at all. People wouldn't be complaining if their originals still looked like their originals. 

I do think that there's a lot of confusion out there among some Shopify users as to what upscaling and liquid filters can do to their images, but there is without a doubt an underlying image quality degredation issue that isn't merely from themes displaying images at resolutions higher than their native sizes. 

There's much more than anecdotal evidence in the forum. There are dozens of complaints. Take any medium, large or grande image and compare it to an original of the same size, and the degredation is crystal clear. 

1 Like