How do I get my image for my product to not be blurry

Question

I use the plugin for woocommerce - Extra Product Options & Add-Ons for WooCommerce by ThemeComplete. And I have these images used in the extra product options. They are blurry. When you have dropdowns, or the extra product options, there's a feature where you can replace the single product image with a new image thats based on the product option someone selected from the dropdown. Well the initial image is fine, but after you use the dropdown the following image is very blury.

I've tried replacing my image with higher resolution I've tried changing the media settings for images to have higher resolution I've tried changing the woocommerce product image settings

Heres a link for an example: https://www.itguyscustompcbuilds.com/?product=base-gamer-pre-built-rig

Answer 1

I can't say it looks particularly blurry to me, but you are enlarging it in your CSS. It looks like the image is 500 by 781 pixels, whereas your CSS is pushing it to 600 by 937. Browsers do not do a great job of enlarging images.

Start with a bigger image.