Main Product Image is Blurry

  • Hello,

    I am having trouble with the main product image. I have a 150×150 image that I would like to use. I have changed the WooCommerce product image sizes to all be 150×150 with hard crop and I also changed the media settings so thumbnail, medium, and large are all set to 150×150. Since those didn’t work, I removed the image and then “inspected” the image holder and thought I found it to be 647×647 so I made a 647×647 canvas with the product image smaller (leaving large white border) and while this did reduce the size of the image (thankfully!) it is still blurry.

    This is the page and the password is MILKSHAKE https://funkydreamerstorytime.com/product/the-milkshake-mermaid/

    How can I get the image to appear normal sized and clear naturally, or how can I get it to be clear even if I do have to make a separate image with a large border?

    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)

  • If the original image is 150px, by the time you add a 100px white border, it’ll be 350px square, not 150px square. So upload the edited 350px image, set the product image size in WooCommerce settings to 350px, then regenerate thumbnails:
    https://www.ads-software.com/plugins/regenerate-thumbnails/

    Also, you have a fluid theme, so the image just gets bigger and bigger as the viewport width increases, and as the image expands so does the blurryness. You can limit the effective page width with this custom css:

    #container {
  max-width:1160px;
  margin:auto;
}

    There will be some improvement, but you are still expanding a 350px image to about 550px, which is a lot, so it’ll never be great.

    For best results, shoot a new image at a resolution the same or better than that which it will be displayed at.

    Thread Starter kayla

    (@kaylaz)

    Thank you for your response.

    I think you are on to something with the effective page width CSS though. Since the image was still big with the 1160px, I tried to make that smaller, but it made the product description narrower too. Is there a way to make just the image appear smaller?

    Extra History – Not Needed if Above Works:
    I have tried to regenerate thumbnails before (with the same plugin) but I can’t seem to find how to do it. It says to do it in media bulk actions, but that does not appear for me. I have uploaded the different image sizes after changing the settings to get around it. Also, the image is a jpeg that I can’t retake but I can put it onto any size white background so that the complete image fills the space while keeping the product image small and clear. But that didn’t seem to help.Currently the WordPress single product image is at 350×350 and I have tried with several sizes of images.

    To use the Regenerate Thumbnails plugin, activate it, then go to:
    Dashboard > Tools > Regen. Thumbnails > then click the “Regenerate All Thumbnails” button. It takes a while to run.

    I went to Media bulk actions but got an error.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Main Product Image is Blurry’ is closed to new replies.