Solved

Blurry Images in Chrome - but ok in IE and Firefox

Posted on 2016-09-02
13
80 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
This Micro Tutorial demonstrates how to quickly find related content for YourTango's posts using MozBar Chrome extension.

939 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

4 Experts available now in Live!

Get 1:1 Help Now