Solved

Woocommerce Responsive Product Images with CSS

Posted on 2014-12-03
3
251 Views
Last Modified: 2014-12-08
I'm trying to get my product images to crisp and without any pixelation when I adjust the browser window. Right now it looks like this when I adjust the browser window:

http://s8.postimg.org/jqbm5net1/Screen_Shot_2014_12_03_at_2_56_48_PM.png

I've researched for a CSS fix, however I cannot find a solution that works. All of the woocommerce support docs for the "blurry product image issue" solve it as adjusting the product images' fixed with in Woocommerce > Settings > Products.  However this does not allow the images to remain crisp at different browser widths.

All the product images uploaded are 1000px by 1000px. What CSS rules need to be applied? Or do I need to edit woocommerce core files? Or both? Any help appreciated.

website: http://cloud9slo.com
Screen-Shot-2014-12-03-at-2.56.48-PM.png
0
Comment
Question by:doug s
  • 2
3 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40480561
Looking at your page, I can see you have a full image http://cloud9slo.com/wp-content/uploads/2014/10/home-slider-cloud-9-slo.jpg  at 1920 × 577.

The rendered code around the image has the following
element.style {
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
background-image: url(http://cloud9slo.com/wp-content/uploads/2014/10/home-slider-cloud-9-slo.jpg);
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-position: 50% 0%;
background-repeat: no-repeat;
}

Open in new window

Since you are using "cover", the image could be stretched at something other than the original ratio of width and hight.  Your images should be at 100% for the best image quality and for sure the same ratio.

The ratio of the image on the site is 2.744 where the original image is 3.23.  To get this ratio, I am dividing the width and height.  Because the the rendered ratio is different than the original, it is not going to be as crisp.  

If you are using the woo plug in, it might be easier to just keep it as is.  The other option is to crop your image at the same ratio the plug in uses.  The last option is to recode that area yourself.  

Cropping the images may be easier.  Take note if you can use different images for different breaks in media queries as your image ratio may change.
0
 
LVL 4

Author Comment

by:doug s
ID: 40481240
Thanks for the reply Scott. The slider image http://cloud9slo.com/wp-content/uploads/2014/10/home-slider-cloud-9-slo.jpg is adjusting fine to various browser widths and maintains quality.

 It's the Single product images i'm having trouble keeping crisp while adjusting the browser window. > http://s8.postimg.org/jqbm5net1/Screen_Shot_2014_12_03_at_2_56_48_PM.png
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40481277
If you use your browser's console to view the rendered code.  At least in chrome you can hover over the image link and it shows you the rendered image.  The image is off by a pixle.  More importantly it looks like the single shots are using the small image (255 X 255).  Possibly even lost some pixels to be downgraded to lower resolution. That would explain the issue.  
screenSee if there is a setting in your theme to allow you to choose which size image to use.  When you upload, WP is saving multiple images in different sizes.   It is always best to have the image at 100%, next is viewing a larger image in smaller by way of the browser shrinking the viewable size.  But when you have a small image that the browser resizes larger, that will have the worst effect.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now