High quality photos once loaded to shopify appear differently

Tourist
8 0 3

Hi Lixon,

With the monosnap links where you can compare the difference between the original high quality images on my website with the poor quality image size filter images: How am I able to fix this to remove the image size filter that was applied by the theme? 

The images in high quality look great, that's exactly how i want them to look. Do i need to fix something in the coding? Please help!

Thanks so much,

Tara

0 Likes
Shopify Partner
1 0 1

This is the worst part of Shopify if you ask me. As a web developer, I've spent a long time optimizing my images just the way I want, only to find that they are RECOMPRESSED when I upload them to Shopify. Not impressed!!! My clients' photos look like crap now! Please, at least make image compression optiona!!

1 Like
New Member
1 0 1

Same here, I didn't notice it at first and it seems to be getting worse. This is practically embarassing, here's a before and after shot of one we put up today. There should definitely be an option to turn off or adjust the compression for those of us who know what we're doing.

1 Like
Highlighted
Shopify Partner
152 0 16

Hi @Tara,

I'm looking at your store and images look perfect on my screen. Please share what you did. 

Thanks!

★ Shopify Customer/Order Auto Tag App → 99rabbits.com ★
0 Likes
New Member
1 0 1

Hi Tara @Tara_Sargent ,

Did you ever find a solution to this problem? I've had the same issue for 2 years and never seem to get reasonable support from Shopify on how to deal with it. Especially in our blogs, all of our high quality images are embarrassingly blurry. Thanks

1 Like
New Member
1 0 0

I'm glad I found this forum - I must have spent days trying to fix this relatively simple highres/low res issue but to no avail. It may seem like an unimportant detail - but it is embarrassing to brands that want to present a professional look and feel.  SHOPIFY please work with the customers on this problem - it seems that it was never resolved after a number of years. WHY??

0 Likes
Astronaut
884 106 197

I have definitely noticed the lack of quality. Very easy to notice on any text you include in an image, but that's easily remedied by placing your text in html instead, which is better practice anyway. But I can understand for those who don't have web developers to work with. For myself as a developer, having the option to add any image size you want to a picture on the CDN trumps any issues I have with the slightly lower quality of the images. This saves a lot of time from having to save out many different images which require just as many different links to reference. For instance we design our webpage for double resolution screens so instead of having to save out a picture for 2x res and normal res, we only need one picture and one path to the image with the "_1920x" before the file extension. This saves a lot of time. Also, I don't notice the issue much at all on mobile which is where a 80% our traffic comes from. 

 

I recommend placing text and SVG Logos with HTML over your images if you can. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
1 0 0

I had this problem as well. This is what I did to fix the issue. Hopefully this helps someone else in the future. Every time I would upload a photo using the insert image button it would add a smaller version of the higher resolution photo. As far as I can tell it wasn't theme related since I have the same problem with any theme I have used so far.

 

What I found out was happening was when I added a photo using the content editor it would make a smaller version of the photo I selected and create a new URL that was different from the actual photo I uploaded.

 

This is the image after adding it with the insert image button.

 

Screenshot 2019-08-20 14.11.02.png

 

 

Here is how it looks on the site. (Too Small and blurry and it is a fixed size smaller than the uploaded size)

Screenshot 2019-08-20 16.06.00.png

 

Here is how I fixed it.

From the content editor click "Show HTML"

Screenshot 2019-08-20 14.11.13.png

 

 

Which will bring you to this. If you have a page with much more content you will need to find the "img src" tag.

Screenshot 2019-08-20 14.12.01.png

 

 

Once you have found the image tag replace the URL link to the one you have uploaded into the files section. In my case it was lifestyle_3.jpg.

Screenshot 2019-08-20 14.13.07.png

 

 

 

Replace the URL. In my example I left both so you can see the difference.

Screenshot 2019-08-20 14.16.11.png

 

The Result:

Screenshot 2019-08-20 14.31.04.png

Keep in mind that both of these are the same image lifestyle_3. The content editor for whatever reason alters the size and points to the altered version rather than your original file.

 

0 Likes
Astronaut
884 106 197

You can also double click the image in the editor and it will bring up a modal, there's an image size option which I think is "Large" by default, you can click the dropdown and select original.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes