Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

The website I'm creating (test6.lazyfoxdesign.co.uk) is responsive and makes heavy use of images for the background. I use high resolution images and scale them down using CSS for smaller resolutions. In all web browsers, except desktop Safari images are nice and sharp.

I attached screenshot of the issue. Google Chrome on left and Safari on right.

enter image description here

Source: http://imgur.com/e3EmrQS
(Enlarge the imgur image to see difference.)

In the screenshot below (actual size) Chrome is top, Safari is bottom:

enter image description here

share|improve this question
    
This looks like the compression format and rendering engine used by each browser. Is About Works Contact apart of the same imagine? You should have those elements as PNG with lossless compression and use absolute positioning –  bybe Aug 13 '13 at 15:07
    
These "buttons" are saved as one PNG image (CSS Sprites). test6.lazyfoxdesign.co.uk/wp-content/themes/… I applied position: absolute; but it didn't work. –  Matthew C Aug 13 '13 at 15:25
    
The position wouldn't effect the quality, I was just ensuring that your using PNG for the buttons. The buttons are not rescaled in any way are they? for example 100x100 rescaled to 100x98px? –  bybe Aug 13 '13 at 15:28
    
As said in my post, images are scaled down. Originally the PNG file is 550 x 478 and this size is for monitors with resolution of 1920 x 1080. If your screen res is smaller than that, let's say 1366 x 768, I apply CSS to resize image - background-size: 391px. –  Matthew C Aug 13 '13 at 15:36
    
Not sure if the problem is related but rather than rescaling the PNG you should use a media query to define a different image sprite for the 1366px as simple as doing @media only screen and (max-width: 1366px) {.element {background:url(sprite-sm.png);}} and @media only screen and (max-width: 2600px) {.element {background:url(sprite-bg.png);}} or opt to use SVG for true noloss rescaling but you might not have those files done as vectors. –  bybe Aug 13 '13 at 15:42

3 Answers 3

Any differences are going to be due to the scaling algorithms used by the browsers - which you can't really do anything about unfortunately, apart from serving the correct size image and not scaling.

Browsers have gotten considerably better in scaling in recent years. It wasn't that long ago that browsers only did pixel-resizing and the results were not very good at all.

To be honest, I don't think your screenshot is particularly conclusive - the Safari pic is only slightly "less sharp" IMO, which users are unlikely to notice - since they are not seeing a side-by-side comparison. And users of Safari are perhaps used to images appearing slightly fuzzed if it is doing that with all scaled images. Plus the fact that most users generally do not notice the finer details - unless your site is targeting other designers? What I notice more from your screenshot are the JPEG artifacts, that affects both the left and right screenshots - but this is perhaps just an issue with the compressed JPEG (or imgur)?

share|improve this answer
    
Thanks for reply. Yes, I have heard that web browsers wouldn't resize images as good as graphics programs, however, there is massive difference in quality that is ONLY in Safari. The blurred images are very noticeable even without side to side comparison. In Google Chrome, which works on the same engine, images are perfect. Even IE resizes my images properly. I just don't believe Safari would be so bad. There must be something I have done wrong. –  Matthew C Aug 13 '13 at 14:44
    
To be honest, I'm not entirely surprised that Safari is over smoothing / anti-aliasing things. This has been an historical problem with Safari on Windows, although you can now turn this off to some extent in the browser. Whilst Chrome and Safari have both used WebKit, they have not necessarily used the same version and there are some obvious differences in their rendering at times. Incidentally, Chrome (since version 28 - the current version) now uses Blink - a fork of WebKit. –  w3d Aug 13 '13 at 15:21
    
I tried to turn off image smoothing using this fix -> nullsleep.tumblr.com/post/16417178705/… Unfortunately it didn't help, do you have any other fixes for that? –  Matthew C Aug 13 '13 at 19:08
    
That link to the tumblr blog triggers my virus checker - "Trojan Horse" - and blocks the page!! From the screenshot, you appear to be using Safari on Windows (rather than Mac) - is that correct? Curious, because I've just tried a simple test and my Safari 5.1.7 (Windows) appears to be scaling the image perfectly. Try it in your Safari... jsfiddle.net/w3dx/j4UH5 –  w3d Aug 13 '13 at 20:19
    
Updated example that includes 3rd image set as background and scaled: jsfiddle.net/w3dx/j4UH5/1 - Again I can't see a difference here, although I can on your site!? Maybe there is something particular about your image, or the ratio it is being scaled? –  w3d Aug 13 '13 at 21:48

OK guys, it seems like we couldn't resolve the problem with blurred images on Safari for Windows. To resolve this issue I had manually resize images in Photoshop for different resolutions instead of using one and scaling it down using CSS for smaller resolutions.

I'm surprised to see that this time Safari does horrible job and IE is perfectly fine.

Thank you to everybody who tried to help.

share|improve this answer

I had the same issue and was able to solve it using Photoshop:

  1. duplicate picture (to avoid losing the original picture because of lossy formats such as JPEG)

  2. image -> image size -> set size in pixels (keeping in mind that a typical browser has a resolution of 100 px per inch)

  3. file -> save for web. Here, various settings can be previewed. Then, save and use picture with 100% size.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.