Solved

Woocommerce Responsive Product Images with CSS

Posted on 2014-12-03
3
247 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
Comment Utility
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
Comment Utility
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
Comment Utility
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

763 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

9 Experts available now in Live!

Get 1:1 Help Now