Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 308
  • Last Modified:

Woocommerce Responsive Product Images with CSS

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
doug s
Asked:
doug s
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
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
 
doug sAuthor Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now