4

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: https://i.stack.imgur.com/CKhFd.jpg
(Enlarge the imgur image to see difference.)

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

enter image description here

Improve this question
10
  • 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
    – Simon Hayter
    Aug 13, 2013 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, 2013 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?
    – Simon Hayter
    Aug 13, 2013 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, 2013 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.
    – Simon Hayter
    Aug 13, 2013 at 15:42

5 Answers 5

Reset to default
4

I had the same issue and it is still not 100% perfect but with this approach I was able to increase the quality. I have to mention that we scaled the images with CSS (transform:scale(value)):

Maybe this helps:

 filter: none; 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px); 
-ms-filter: blur(0px);
 filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');

The images are still a little blurry in Safari though.

Source: -webkit-transform: scale / blurry images / user: rcro

Improve this answer
0
2

try to set these styles..

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
Improve this answer
2
  • Are those documented anywhere? Do you set them all at once, or is the crisp-edges one that is effective?
    – Stephen Ostermiller ♦
    Feb 9, 2016 at 14:04
  • each one has different effect, try one by one which looks better.
    – kiran bhandare
    Feb 10, 2016 at 4:53
1

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)?

Improve this answer
8
  • 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, 2013 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.
    – MrWhite
    Aug 13, 2013 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, 2013 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
    – MrWhite
    Aug 13, 2013 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?
    – MrWhite
    Aug 13, 2013 at 21:48
1

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.

Improve this answer
1
  • 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.
    – Matthew C
    Aug 14, 2013 at 16:03
1

I've been experiencing the same issue but tried changing the resolution of my 'problem image' to 100 dpi in Photoshop. I'm now scaling in Safari and my blurriness has gone! So it looks like scaling works fine in Safari as long as the DPI of the original image is set to 100 dpi. Eureka! Many thanks to the person who said typical browsers have a dpi of 100 :-)

Improve this answer

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