Solved

Blurry Images in Chrome - but ok in IE and Firefox

Posted on 2016-09-02
13
118 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

PaperPort 14.5 Patch 1 update is often not detected or downloaded automatically. This article provides direct download links to solve the problem for retail (non-bundled) versions of the Standard and Professional editions, as well as the Professiona…
This article shows how to convert a multi-page PDF file into multiple image files, with one image file created for each page of the PDF. It does this by utilizing an excellent, free software package called GraphicsMagick. The solution is amazingly s…
The goal of the tutorial is to teach the user the full work flow of how to use flash media encoder to stream onto YouTube.
This Micro Tutorial will demonstrate how marketers can use the Mobile Emulation Tool in Chrome Developer Tool. This will let you preview your site on any mobile device.

840 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