Why are my product images appearing blurry on gempages?

[kelly-agrey]

My product images are showing up blurry. I use gempages for the design of the product page, however I create the product in shopify. Does anyone know how to fix this? 

[Made4uo-Ribe]

Hi @kelly-agrey ,

Can I check? Would you mind to share your store URL website? with password if its protected. Thanks!

[kelly-agrey]

here is a link to a product in my store:6' Rainwashed Garland – Habitation
Box <>

[Made4uo-Ribe]

I need the Store URL website. So Ill be able to check what happen to the product page. You can also share the preivew. Thanks!

[Dan-From-Ryviu]

Hi @kelly-agrey 

Maybe you can solve it by changing Image settings in your Online store > Themes > Customize > Products > select product template of that product 

[azamgill]

Hey @kelly-agrey ,

Some time it is caused by wrong size in the code. 

{% assign product_image = product.featured_image | img_url: 'master' %}
{% assign custom_width = 500 %}
{% assign custom_height = custom_width | times: 1.5 %} {# Aspect ratio of 3:2 #}
<img src="{{ product_image }}" alt="{{ product.title }}" width="{{ custom_width }}" height="{{ custom_height }}">

In this example, the img_url filter is used to get the URL of the featured image for the product in its large size.
To address the issue, you can modify the Liquid code to use a different image size or update the image quality. For instance, if you want to display the image in its original size without any size reduction or compression you may try the master 

[kelly-agrey]

Thank you for your response. It was something else... I have it fixed now!

[Sweetswinging]

How did you fix it?  I am having the same issue.  Thanks.

[Entaice]

The app is probably referencing a low-resolution version of your product images.  I believe when you upload a product image to Shopify, shopify automatically creates several different image sizes for different screen size layouts.  I'm not familiar with gem pages specifically, but there is probably an option to select which image size gets displayed by default in the page.  

[flareAI]

Hello @kelly-agrey,

Greetings from flareAI app helping Shopify merchants get $7Million+ in sales from Google Search, on autopilot! I am Gina, and I am here to help.

Here are some steps you can take to fix the blurry images.

- When uploading images to Shopify, it's crucial to avoid excessive compression that can lead to a decline in image quality. While Shopify does apply some compression automatically, you can mitigate this by using high-quality images.

- Prioritize images of high resolution and quality when uploading them. For product images, it's advisable to use images with a resolution of at least 2048 x 2048 pixels. This ensures that the images appear crisp and clear on various devices.

- Keep in mind that large image files can slow down your website and negatively impact image quality. To address this, use image editing software to optimize and reduce the file size without compromising quality. You can find online tools and plugins that can assist you in this optimization process.

- Shopify utilizes responsive design and automatically generates different image sizes for different devices. Adhere to the recommended image dimensions and allow Shopify to handle the scaling process.

- Be aware that image quality may be affected by the theme settings in your Gempages or Shopify theme. Ensure that the settings related to image display are optimized for the best quality.

- It could be also related to cached images in your browser. To troubleshoot this, clear your browser cache and refresh the page to see if the images appear clearer.

- Also, you can right-click on them and select "Inspect" or "Inspect Element" (depending on your browser) to access the developer tools. Check if the displayed image dimensions differ from the actual image size. If there's a mismatch, you may need to adjust your theme or Gempages settings accordingly.

- Verify that the Gempages design you are using is fully compatible with your Shopify theme. Incompatibilities between the two can lead to display issues, including blurry images.

If the problem persists despite trying the above steps, don't hesitate to seek assistance from Gempages support.

Refer to this guide on Saving Your Images for the Web

I hope this information proves useful.

Gina