Solved

Blurry Images in Chrome - but ok in IE and Firefox

Posted on 2016-09-02
13
161 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 83

Accepted Solution

by:
Dave Baldwin earned 500 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
Technology Partners: 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!

 
LVL 83

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 83

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 83

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 83

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 83

Expert Comment

by:Dave Baldwin
ID: 41835231
Thanks!
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!

Question has a verified solution.

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

Recently, an awarded photographer, Selina De Maeyer (http://www.selinademaeyer.com/), completed a photo shoot of a beautiful event (http://www.sintjacobantwerpen.be/verslag-en-fotoreportage-van-de-sacramentsprocessie-door-antwerpen#thumbnails) in An…
Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
This Micro Tutorial will demonstrate how MozBar finds back links of any website you visit, as well as page, social shares to the page, and domain level metrics. There will me practical applications for this data.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

730 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