Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Woocommerce Responsive Product Images with CSS

Posted on 2014-12-03
3
Medium Priority
?
290 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 53

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 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

704 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