Blurry images on product display page and on collection page on ella theme

[Abhishek51]

hi,

We are getting blurry images on both product display page on the collection page. Can you please help how can we fix this issue. Many thanks in advance.

https://www.rivaajethnic.com/products/lucknowi-chikankari-ombre-blue-kota-silk-dupatta

[DaisyVo]

Hi @Abhishek51 

Blurry images on your product and collection pages can be frustrating, especially when they affect the appearance of your store. Here’s how you can tackle this issue and make your images look sharp and professional.

1. Check Image Resolution

The first thing to do is ensure your images are high-resolution. Shopify recommends images that are 2048 x 2048 pixels for optimal quality. If your images are smaller, they might get stretched to fit the layout, causing them to blur. Reupload your images in higher resolution if needed.

2. Adjust the Theme Settings

The Ella theme has customization options for image display. Go to Online Store > Themes > Customize, and check these areas:

• Image size settings: Ensure the display size matches your uploaded image resolution.
• Compression settings: Disable any excessive image compression in the theme that might be degrading quality.

3. Inspect Aspect Ratios

Blurry images can also happen if the theme forces your images into specific aspect ratios. To fix this:

• Use images with consistent aspect ratios for all products.
• Check the Product Media section in your theme settings and select the appropriate scaling option.

4. Lazy Loading or Image Optimization Apps

Sometimes, image optimization apps or lazy-loading scripts might compress your images too much. If you’re using any third-party apps for optimization, check their settings to reduce compression or temporarily disable them to see if that resolves the issue.

5. Theme Code Adjustments

If none of the above works, the issue might be in the theme code. You can try:

• Checking the CSS or Liquid files for the image resolution settings. Look for terms like image_url or resize.
• Updating the theme to the latest version, as newer updates often fix bugs like image rendering issues.

If you’re unsure how to edit the code, you can contact the theme support team, as they’re usually helpful with such adjustments.

6. Preview on Different Devices

Lastly, make sure the issue isn’t device-specific. Test your site on mobile, tablet, and desktop to see if the blurriness persists. If the issue only appears on specific devices, it might be related to the display scaling.

I hope these steps help! If you need any other assistance, I am willing to help.

Best regards,
Daisy.