Woocommerce – Blurred Images From Theme File

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;}

to

.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.

0
0
0
0