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

x
?
Solved

Blurry Images in Chrome - but ok in IE and Firefox

Posted on 2016-09-02
13
Medium Priority
?
1,129 Views
Last Modified: 2016-10-08
Hi All,

I am noticing some strange behavior with a line of images... the images Bronze Package, Silver Package, Gold Package, and Platinum package seem to be dithered for some reason when viewing in Chrome? In IE and Firefox they see ok... Have you guys come across this before?? Its the first line of images under the menu.. www.allwebcademo.com.... they seem to be blurry as well in mobile....
0
Comment
Question by:virtuali1151
[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
  • 6
  • 5
13 Comments
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 41782250
Looks the same to me.  However, it is a 'responsive' page where the images change size with the size of the screen.  Press Ctrl-0 to set the zoom to 'normal' or 100% to make sure you are viewing it at the same scale in both browsers.
1
 
LVL 8

Expert Comment

by:Ben McNelly
ID: 41782274
Dave is right, the responsive scaling is causing this, but only the border (border is part of the image) is showing artifacts when scaled (for me at least).

If you remove the border from the images and just use CSS it should render crisp as it scales with the image. Another option would be to make the border thicker, or adjust the way the image scaling is done with css.

For example you could give those images an extra css class that overrides the media scaling and lets you resize them or set specific image url's for different sizes of the screen.

Here is a great write up by Smashing Magazine about different methods to responsive images, including using the picture element, srcset and server side solutions.
0
 

Author Comment

by:virtuali1151
ID: 41833932
Hi Fellas,

Sorry for the delay, I am still having the issue, I figured out it is not just the images, it also some text etc that goes blurry at 1600x900 resolution... but if I change my screen resolution 1680x1050 the images and the txt are clear again??? So it seems to be something with how the site is resizing at that resolution... and suggestions?? I think the css might need to be changed somehow..
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 41834235
CSS will probably have no effect on that problem.  What is the native and recommended resolution of your monitor?  At any other resolution, your video driver is doing the resizing.
0
 

Author Comment

by:virtuali1151
ID: 41834260
this monitor is 1600x900, that is the recommended resolution.  I have all the drivers etc updated. and still the same issue... when I use another monitor that has the 1680x1050 resolution the images and text etc are clear... but if I change that same monitor to 1600x900 the images go blurry just like the one I am using now... something that resolution causes the images and txt to go blurry.. and chrome really seems to be the culprit especially.. its driving me crazy cause I cant pin down the issue...
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 41834294
When you change from the 'native resolution', you are compounding the problem.  Even if there is a problem with Chrome, it will be masked by the mismatch with the video driver.  

If you can change the 'problem' monitor to the higher resolution, then I suspect that is really it's native resolution.  I have never seen a monitor that could be set above it's native resolution.  I have seen pictures where the browser zoom has been changed to put a large picture into the window.  That can affect the clarity of the image.
0
 

Author Comment

by:virtuali1151
ID: 41834300
Im not changing it beyond the native resolution on the issue monitor, I did a test on another monitor to see what happens if I go beyond the 1600x900 resolution... and the same issue.. at 1600x900 the issue is there.. the images are blurry... (That is not the native resolution for that monitor) 1680x1050 is, and when I change it back to 1680x1050, the images are clear.. on both monitors it just seems the 1600x900 resolution seems to be the problem.... could it be something because I have the theme setting on site to default to 1200px wide?? Would that cause an issue with the 1600x900 setting??
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 41834401
1200px wide??  Maybe... if it is a responsive page, it might be scaled though I would think that since 1200 is less than 1600 that it would just show the 1200 pixels and not expand to full screen.   ??
0
 

Author Comment

by:virtuali1151
ID: 41835083
Hey Dave... After all this I found the problem... My screen was at a higher zoom rate and not at a 100%...  duh... I hadnt even noticed at all... after I did a control 0 in the screen it went back to normal...  Thanks much for you input though....
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 41835191
I suggested pressing Control-0 in my first response to your question.
0
 

Author Closing Comment

by:virtuali1151
ID: 41835212
Sorry Dave is right.. I didnt see that in his first response. Tks.
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 41835231
Thanks!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

In a previously published article (http://www.experts-exchange.com/articles/10331/Automatic-Duplex-Scanning-in-PaperPort-Versions-11-12-14.html) here at Experts Exchange, I explained how to achieve duplex (double-sided) scanning in Nuance's PaperPor…
Use email signature images to promote corporate certifications and industry awards.
This Micro Tutorial demonstrates how to disable your ad blocker for some sites. In case Marketers would like to see ads on a site, this allows them to possibly view their competitors without have ads run on every site they visit.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

715 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