We recently had to build a large ecommerce site for a new client and couldn’t believe that no matter what image size settings were put in to the base template they still came out blurred. Even when the image itself was pre-made to be exactly the displayed size in the single product page.

After many hours investigation the answer hit us in the face. The problem isn’t woocommerce itself, but probably 95% of the themes that are built for it. From our experience we have seen that they nearly always use the “border-box” model for layouts. Now, this is a common method for building websites today, and is the best way for adding  internal padding to percentage width layouts. Mobile/responsive website is more or less built on this model at the moment – until the Flexbox model has a common standard in all browsers, that is.

Back to the problem. So, the “border-box” model is not a problem in itself, until the theme you are using applies a 1px border to your images and sets the width to 100% and height to auto! This then forces your image to be 2px smaller all round and so the browser forces a resize.

The solution then is very simple. You can either remove borders from your images, or you change the “box-sizing” property from “border-box” to “content-box”. You can then remove the width and height resizing – as long as you know that the uploaded images are being resized to the correct size anyway.

For example, in the Mystile then this would be,

change the style.css file

.images img {box-sizing: border-box;}

ul.products li.product img {box-sizing: border-box;}


.images img {box-sizing: content-box;}

ul.products li.product img {box-sizing: content-box;}

Simple. And don’t forget to remove img widths of 100% and heights of auto.


The following two tabs change content below.


Developer, SEO, PPC, Social at Urbansoul Design
Mark Gorey is a front-end and back-end developer for Urbansoul Design. He also manages seo, social and ppc client campaigns. He's a busy fella! Get in touch with Urbansoul today if you would like Mark to work on your project.