November 6, 2013 at 2:48 pm #185159
Dear Kriesi Team,
I’ve got a question concerning the enfold theme in combination with the WooCommerce shop plug in. We are a company, that would like to sell video clips via the woocommerce shop. The whole layout incl. programming was done by a programmer and is oriented on big video agencies like shutterstock.com or corbismotion. We created a catalog of small thumbnails (jpeg) that are loaded first. While mouse over, a low res video starts to play. By clicking on the video, you get into the article details and can buy the article. Here is a screenshot of the catalog view incl. mouse over effect:
We have noticed, that all small thumbnail images are a little bit unsharp, although the woocommerce thumbnails size (Woocommerce settings -> Image options) matches exactely the pixel size of our source jpegs, that I’ve uploaded to each article and which are clearly sharp.
Woocommerce or WordPress must either do an unnecessary resizing, that we don’t want or must apply a compression to the jpegs.
Due to the responsive design, the images getting more and more unsharp when reducing the windows size of the browser. I found out, that woocommerce scales the thumbnails to five different pixel sizes, depending on the size of the browser window.
Thumbnail size full screen window 187×105
reduce window size Thumbnail jumps to 159×89
reduce window size more Thumbnail jumps to162x91
reduce window size more Thumbnail jumps to 208×117
reduce window size more Thumbnail jumps to 266×150 (its a view like on an i-phone display)
Is there a way that we can make our thumbnail images sharper throughout the whole responsive layout and avoid unnecessary image processing by woocommerce/wordpress?
Thanks for your answer!November 7, 2013 at 7:04 pm #185753
We will need to see the site and example live so we can inspect the images in place and see what their size is relative to the container.
DevinNovember 12, 2013 at 2:48 pm #187254November 13, 2013 at 5:33 pm #187856
The size getting created is 172×97.jpg
So you can use this plugin to find that size and then change it http://wordpress.org/extend/plugins/simple-image-sizes/
After you save you will need to regenerate thumbnails to have the new image shown.
The topic ‘Thumbnail sharpness in WooCommerce, responsive layout’ is closed to new replies.