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.sstatic.net/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

MrWhite
  • 43,224
  • 4
  • 50
  • 90
Matthew C
  • 191
  • 1
  • 1
  • 6

5 Answers5

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

Community
  • 1
grindking
  • 141
  • 3
2

try to set these styles..

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
kiran bhandare
  • 21
  • 1
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)?

MrWhite
  • 43,224
  • 4
  • 50
  • 90
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.

Zistoloen
  • 10,056
  • 6
  • 36
  • 59
FFT
  • 111
  • 1
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 :-)

Matt Gourd
  • 11
  • 1