Product images appearing blurry

[Aiturtle]

Hoping somebody can help. Some of my product images appear blurry no matter what size/format I use. I've tried uploading as jpgs, pngs, at 1024 resolution, 2048 etc but nothing has made a difference. I contacted shopify help but they didn't know either. The images are high resolution and super crisp/clear when viewed on my computer. But on the main product page they appear super blurry. Anybody have any idea why or what the solution might be? I've tried compressing, not compressing, different aspect rations etc. I've attached a screenshot below. Note: It's all of the same image because I'm just trying to figure out which size/setting makes it look clearest, but none of them appear clear. I'm using blockshop theme by troop themes.

[ZainAli]

Hello!

There are many possible reasons for blurry images. To fix that you need to consider some factors which are given below:

- Image format 

Use PNG-type images for best results.

- Image size 

Take the original image without any editing or compression then use an optimization tool for web images such as https://tinypng.com/ and process your image through there and then use it.

- Image CSS (styling)

If the image is still not fixed then try checking the CSS styling of your image because 

using an image as a background and scaling it up to cover more area, it will become blurry. The same goes for images that are being rotated or otherwise transformed using CSS.

After doing all this if you are still facing the issue then you can edit the image display code in the background and remove the existing <img/> tag and create your own to display the images.

It has worked for me from time to time.

Hope it helps!

Regards,

Zain Ali.

[Aiturtle]

Hey Zain, thanks so much for the response! I have tried using pngs and compressing with tinypng but it made no difference. By CSS styling do you mean playing around with the code? I wish I was confident enough but honestly have no idea about coding. Would you recommend I contact the theme developers? I did talk to shopify support yesterday but he had no clue and said maybe it was because the books were an ivory colour and the background of the website was white…but I tried uploading images of different coloured books and it hasn’t made a difference. 

[DakotaChick]

What is the natural size (pixels x pixels and dpi) of the image? Was this image made through some design program such as Photoshop or Gimp? I can only speak to the settings in Photoshop as I have never used Gimp, but if you chose any of the blank presets under the Web category, the image quality is not good enough to be what you want on the web. 

On my site, product photography and any other graphics that I use are all over 4000 pixels x 4000 pixels with 300 dpi. I don't recommend starting with a base of anything less. I do not compress them before uploading and use the built in Shopify image editor to adjust the file size of the image to be more appropriate for the web. The only time things come out blurry is if I miss-focused the image when taking it.

[Aiturtle]

Hey there, I've tried using shopifys maximum pixel width of 4472 (x 3067 as it isn't a square image). From what I've read shopify only accepts a maximum dpi of 72 but they are 96 dpi. The images were created digitally through photoshop so they are definitely all in focus. The not being super focussed is especially noticeable on mobile as if I try to zoom in on the product pictures they become super pixelated. I've tried not compressing but it hasn't made a difference. So yeah, not sure what's going wrong. Appreciate the reply though, thank you!

[DakotaChick · Accepted solution]

I can tell you for sure you can upload images of 300 dpi or more to Shopify. None of the images on my site are less than 300 dpi and are all high resolution. 

But, back to what I was trying to get across in the original reply. The pixel size is fine based on what you've shared. The dpi on the other hand... did you export it down to that dpi or create the image in that dpi? Your problem is the dpi. Period. 

Recreate the graphic in photoshop/illustrator/etc but start with a canvas of at least 4k px wide and a dpi of 300. When you are done, choose Export > Export As.. > Change to PNG > Check Transparency if you have any part of the background that is blank. You can finish the export here, but I also prefer to change the Resample option to "Preserve Details" instead of the default. 

I have never had a graphic on my site (or image for that matter) go blurry on upload when I export them from photoshop in the manner described above.

[Aiturtle]

Hey there,

Oh right, I had no idea. I paid somebody to create the mockups for me so I'm not sure if they created them in that dpi, but I will contact them and check. Thanks very much for your help and insight- much appreciated!

[YogiBa]

Hi

I realize this was some time ago and I found your advice interesting. I am experienceing the product images a little blurry when they go to full page on Shopify. I have also tried uncompressed and compressed, png and jpg. Shopify advised me to use jpg for reasons not to slow down webpage speed. So I use hires scanned images, make them between 1080 and 2000px at 96dpi to protect the images and to speed up page load. However, not happy with product images when clicked on cover the full page.  When I had my images larger on Shopify the site speed was shocking even when compressed.

With photos and artworks I was advised not to do high res on the internet as the images can be stolen and printed out for sale online and offline and this is happening. I am very keen to know your thoughts on this?

[Anna_HappyAge]

But doesn't it mean, that your images have enormous sizes = slowing down page load speed?