Product Images are compressed and blurry...

The product images in the cart are blurry and poorly resized.

Add an item the cart here for an example: http://foxycart-test-ae1fa2.webflow.io/

Are there any dev tips for keeping them sharp and crisp? Is there an ideal size? My test product images were very large and hi-rez to show how poorly they render. Any tips and making the product images look their best in cart?
Comments
  • fc_adamfc_adam FoxyCart Team
    edited April 19
    @Bghead8che,

    Sorry to hear you're having trouble with the product images. I just gave your test page a try (thanks for creating that btw), and the image appears to be displaying fine as far as I can tell:

    image

    Is that the same thing you're seeing? Or something different?

    We don't do any actual processing of images in the cart - we simply cache them in whatever form they're passed to the cart in, and they're then scaled to fit within the space allowed using CSS.
  • Adam,

    Is there a recommend size you recommend as a guideline? I know images are scaled down so any size will technically work however I assume there is a good starting size.

    Your shot does look significantly better. Any ideas?

    The images I am seeing in both Chrome and Edge are very blurry:

    image
  • fc_adamfc_adam FoxyCart Team
    @Bghead8che,

    If you maintain a width of around 350px for the images - it should ensure that they display nicely on all devices, including those with a higher pixel density like Apple devices.

    As to why you are seeing them blurry - I'm not sure why that could be. Perhaps try opening the image link in the cart in a separate tab directly, and see what quality the image displays in. If you right click on the image itself, most browsers should present an option to view it in a new tab.
Sign In or Register to comment.