Hello,
All of my images on Shopify display clearly but just one seems to have an issue. I altered the resolution, size (1024x1024), and file type to Shopify’s recommendations but nothing seems to work. I tried everything that I can do and the problem still continues.
My other images look great even if it does not follow what Shopify recommends.
Please help.
Hey @Rhue
That doesn’t sound good and so if you posted the URL to the affected Images here in this thread then we could all dive into that sea of beautiful pixels in your store and swim around in them looking for any unwanted artefacts or imperfections that might be contaminating your pictures.
Any concrete material you can give to the many experts in this community regarding the blurry Images, can help us to help you! Awaiting your reply.
Best,
Hello Gabe,
Thank you for offering to help. Here is the URL of the image.
It looks fine here but it looks very pixelated on the website, rosehue.us
Thank you.
Hi @Gabe
Thank you for your assistance. Have you had the time to check what the issue is?
Here is the link to the image, https://cdn.shopify.com/s/files/1/0640/7618/5838/files/1_9a88daa1-f259-4e1c-b418-29fe9354ce81.jpg?v=1651521360
Thank you again for your help!
Hey @Rhue
Sorry about that, I only saw your message today as you had tagged me in your second message above. And wow! What a store! Looks amaaazing…
I checked your Image source file and it is indeed very high resolution at 1.5mb which is quite normal and I have to say, it looks great for me on the homepage too (see below). It is also a “lossless” .png image which is better than the typical “lossy” .jpg image type (gets more compressed than .png upon page load) and it loads via “lazy loading” (loading="lazy").
So I checked the image on your homepage on my Dell UltraSharp 27" monitor and I found it quite pleasant to the eye I have to say (click on Images below):
I then blew that up to 200% resolution and the Image still looked unpixelated on my Dell monitor as you can see here, which is a standard compression rate:
So for me I couldn’t reproduce the blurriness that you mentioned. What can happen on your side is that perhaps your browser is not performing the necessary “Image transaction” which happens on page load and it can get stuck in “loading mode” where everything looks blurry. The cause of this can be some other script on the homepage that is trying to load before the Image loads and it hangs causing the entire homepage-HTML loading queue to back up. So what I would do is check your homepage on different browsers, in incognito/private browsing mode, and on different devices with different browsers and internet connections. That way you might find the “worm”.
Let me know if you have any further questions on that and we can chat about that here.
Best,
Hi @Gabe ,
Thank you for the complement! And apologies for not tagging you on the first message.
Hmm…the screenshots you provided looks a bit blurry to my eyes. I checked the website on different computers, phones, and tablets and it still doesn’t look as clear as the original.
There are attachment of the comparison. The first one is of the original photo and the one on the website. I also photoshopped the original photo onto a screenshot of the website to show you what it should look like (the placement of the photo is a bit different).
But as you can see, the original is clearer and the light reflection on on the gold is more defined.
Is there anything I can do to change this?
Thank you for taking the time to help!
Thanks for your example - they really helped and I would like you to observe my screenshot below by clicking on it:
Can I ask what photo editor you used to edit the Image? The reason is that unfortunately photo editors often change the original source Image in the pixels and can also introduce artefacts into the Image.
Hi @Gabe
I use Adobe Photoshop to edit images. I exported the image all the ways that Photoshop offers and it still doesn’t come out very clear.
All of the other photos are exported from Photoshop and are displayed as clear as the original.
I just replaced the photo to another, Rosehue.us, and it looks fine.
I’m not sure what the issue is.
Hi @Gabe
Is there a way to fix the issue? I would like to use the first photo for the main photo.
Hey Rhue! @Rhue
As the resolution looks fine on my end even when I blow up the homepage to 200%, the only thing I can recommend is that you can upload images of up to 4472 x 4472 pixels with a file size of up to 20 MB. We typically recommend using 2048 x 2048 pixels for square product photos.
WebP or TIFF file formats?
You could try using the WebP or TIFF file format. WebP is a modern image format that provides superior compression for images on the web, with an average saving of over 30% in file size over traditional file formats like PNG and JPEG. TIFF is a lossless compression format that is widely supported by a range of editing and web applications. It offers high quality resolution, and multiple images and pages can be conveniently saved in a single file. However, the file size tends to be large.
Images with overly large resolutions, of say Shopify’s maximum of 4000 x 4000 pixels, can come out blurry when resized for mobile. So reducing your image to a more manageable size and shape that keeps mobile in mind can help your store look better across all devices. Keep in mind that large files also slow down your site’s loading time. And in ecommerce, and especially in mobile, every second matters, so optimizing your images is a priority.
While Shopify’s responsive designs and algorithms are good at resizing and displaying your images across devices, giving them a hand with thoughtful file sizes can mean an even smoother shopping experience. Use a software called JPEGmini that uses an algorithm to determine the best compression for your image. There is a delicate balance between image quality and optimization, because if you over optimize, it destroys the image.
The first way to optimize your image is to resize the height and width of the image. When you look at an image on a webpage you are actually looking at an HTML container with an image dynamically scaled to fit inside it. If the container on the website is a 648 px square and the actual image is 1500 px square, it will be displayed at 648 px, but the image it’s referencing will still load at 1500 px. That’s a lot of extra load time, especially if you have many images.
You want to resize the actual image to fit the container before you upload it to your website. We usually resize images 1.5x larger than the container so it looks good on a retina screen, which in this example would be 972 px square.
To discover the image container size, you will need to access your web browser’s Developer tools. Right click on the image and choose the Inspect Element. On the sidebar it will show the pixel dimension of the container.
There are many free tools to help you resize your image. I recommend using Mac Preview or Microsoft Picture because they’re built in and easy to use.
After you’ve re-sized the image, export it and save it to the desktop as a jpeg at 100%.
Once you’ve saved the image at 100% quality in preview, you’ll notice that the file size is actually fairly large. This is because we don’t want Preview to compress the image, because we can’t see the results of moving the jpeg Compression slider. When we compress an image it actually removes data that’s not being used—compress it too much and the image starts to fall apart and it looks blotchy.
So instead, we want to compress the image smartly.
Hello. Try photoshop, of course you can adjust the sharpness there. You can take this photo yourself, you can edit it in a cool photo editor and you can get it now There you can choose one of the three levels of photo correction that suits you best. Depending on the settings, you can choose a price, which is very convenient. Basic online portrait retouching starts at $3 per photo, this photo enhancement is perfect for family portraits or social media photos
