Images are very pixelated on product list page

Hi @musachi! I had a look a the link you provided, and the individual products (which is where that CSS you referenced applies to) and the images do not come across as pixelated to me. Even when I Inspect the page and removed that CSS, the images seem larger, but not pixelated.

Did you manage to solve the issue in the meantime?

Usually themes can accommodate whatever size images are uploaded. When in doubt, for the best results, scale the image to the correct size before uploading.

Have a look at our Fixing Blurry Product Images documentation for things that could cause blurry images, and how to fix them. Let us know if you still see this issue and if the link above helps.

Thank you for the reply @eastofwest! So within the product pages, the pictures look okay. It’s when I look back at the product list that the images are pixelated. Here is a screenshot of what I see: https://prnt.sc/OJFuSGj6dvFW

This is what I would like to correct somehow. Do you know what could be causing it to do this?

• This reply was modified 3 weeks, 4 days ago by musachi.
• This reply was modified 3 weeks, 4 days ago by musachi.

Here are another screenshot with more product items: https://prnt.sc/102Y-pAY4NX8
It’s really blurry, and I’m not sure how to fix it. What are some possible solutions?

Hey @musachi ,

Since blurry product images can be caused by theme styling, it’s possible that the current theme you are using may be causing the issue.

To check, can you try switching to a default theme, such as?Storefront, and then head to?WooCommerce → Status → Tools → Regenerate shop thumbnails, and click the?Regenerate?button and see if this resolves the issue?

To prevent testing on your live site, you can use the free?Health Check?plugin which will allow you to switch themes while you’re still logged in, without affecting normal visitors to your site.

Let us know how this goes!

Hi @musachi – to add to add to what @beautyofcode said: I would suggest to remove any custom CSS, and double-checking your theme settings. Ensure that your CSS is not delivering smaller images than what the theme expects. Reach out to the theme’s developers for the proper way to do that other than the custom CSS you used.

Here’s why: I had a closer look at your site, and noticed that the browser is expecting (likely because the theme promises it) an image sized 285×284.77 px. However, if we inspect the source code, we see the image that is being delivered is only 100×100 px, which explains why it’s pixelated. You can see in this screenshot below, that if I remove the parameters from the code that forces it to 100px, the image to the left looks crisp. That means the proper-sized image is available, its just not being displayed in its full glory.

I will note, the images are being delivered by Jetpack Boost. You can temporarily disable it via WP Admin > Jetpack > Settings > Performance, and toggle off the Speed up image load times setting to see if that has any effect. However, Jetpack Boost will deliver what is requested from your site. So if the images are blurry, it means something is requesting an image smaller than what your theme needs – likely your custom CSS.

Click here to read more about Jetpack Boost’s Site Accelerator, and how to avoid blurry images.

I trust the above will point you in the right direction of a solution. Let us know how it turns out.

Hi there, since it’s been a while without a response, I’ll mark this as complete. Don’t hesitate to reach out whenever you’re ready to continue.

Hey @fetenlakhal, thank you for that.

Hey @beautyofcode and @eastofwest,

Sorry for the extreme delay and thanks for the help. @beautyofcode Unfortunately I don’t see the Regenerate shop thumbnails option in woocommerce. Is there another way i could regenerate them?

@eastofwest So this was really helpful. I was able to determine that it wasn’t because of any Custom CSS that I added in “additional CSS” tab. Also, I see what you mean about max-width being 100×100 px. However, I do see that it is being resized in the URL, for some reason. What could be causing the image to be resized in the URL?

Here’s a screenshot: https://prnt.sc/mGeSBn-iLOJN

Hi @musachi,

It looks like the URL parameter ?resize=100%2C100&ssl=1 is commonly generated by Jetpack’s Site Accelerator feature. To determine if this is causing the issue, you can temporarily disable the Site Accelerator and recheck in an Incognito browser window or after clearing your browser cache.

To disable the Site Accelerator feature:

1. Navigate to your WordPress dashboard.
2. Go to Jetpack > Settings > Performance.
3. In the Performance & speed section, toggle off the Enable site accelerator option.

Once disabled, check your image URLs. If the resize and ssl parameters are no longer being added, it confirms that Jetpack’s Site Accelerator was modifying your URLs.

If this resolves the issue but you still want to keep the Site Accelerator active for its other benefits, you can prevent it from resizing images by adding this custom filter code to your theme’s functions.php file or you can use Code Snippet plugin:

add_filter( 'jetpack_photon_override_image_downsize', '__return_false' );

This filter ensures Jetpack’s Photon (the image CDN component) uses the original image sizes instead of resizing them. For more details, you can refer to Jetpack’s developer documentation.

Please give this a try and let us know if it helps!