9

I've been working on something that relies heavily on large images being scaled down with CSS/JavaScript. Before Safari 5.1 came out, I noticed that the images were nice and smooth in Safari, but kind of jagged in Chrome. Now Safari 5.1 seems to be just as bad as Chrome.

The image-rendering CSS property doesn't seem to make a difference. Most posts online about it seem to be from people wanting nearest-neighbor smoothing instead of bicubic, while I need the opposite: getting my images to be smoother.

I attached two images. One shows scaling in Safari and the other one in Firefox. If you look at the model's arm on the left you can see the difference there especially.

Safari image scaling Firefox image scaling

Bart S.
  • 131
  • 2
  • 8
  • If you post links to, or the `src` of, the images somebody will likely, and happily, edit them into the question for you. – David Thomas Aug 14 '11 at 21:27
  • Thanks, I just posted them on my own (got the right privileges). – Bart S. Aug 14 '11 at 21:49
  • I wasn't able to reproduce this behavior in Mac - Safari 5.1 (6534.50) – Joonas Aug 15 '11 at 12:56
  • I'm having a [problem with this](http://stackoverflow.com/questions/7127182/webkit-jquery-superbgimage-full-browser-images-not-anti-aliasing) in a current project. What's weird is that the [site for a jQuery plugin](http://demo.andreaseberhard.de/superbgimage/demo.html) I'm using does NOT have this problem, while mine does and uses nearly identical markup/JS/styling. Both in Safari 5.1. – Matt Stein Aug 19 '11 at 20:55
  • Not sure how accurate your comparison was meant to be though both images have different size ratios. If this is the case with the output in webkit I would check the method you're using for resizing. If the css, jquery plugin or jquery lib is using percentages I would avoid that route. I find Chrome handles decimals differently sometimes. In my opinion a clean re-size with preserved ratio shouldn't really depend on jquery for modern browsers. If possible can you show us some css code? – frontsideup Aug 20 '11 at 19:39
  • Usually images in Safari only look jaggy while resizing the browser window. Can you try making a page with just the resized image and no javascript to see if maybe there's something going on with that. Also just open a large image in a window by itself and keep it zoomed out. Does the rendering switch back and forth between smooth and jagged when you resize the window? If not, maybe try reinstalling the latest OS X combo update. As a side note, I believe recent versions of Chrome use Bicubic filtering by default, thank god. – Chad von Nau Feb 18 '12 at 14:15

2 Answers2

2

I'm guessing using CSS3 transform may produce better result because it uses hardware acceleration. So I created a fiddle that scale some images with both css width and height and CSS3 transform (click here to see) to check it out and make sure but I don't have a good eye or maybe monitor, I didn't saw any difference between css scaled or -webkit-transform: scale() scaled versions. Please look at fiddle and let me know if you saw any difference.

Fiddle: http://jsfiddle.net/EWf25/1/embedded/result/

Mohsen
  • 64,437
  • 34
  • 159
  • 186
  • CSS Transforms do often look smoother because of the hardware acceleration, but unfortunately, they are not useful for layout purposes. The image is resized visually, but not within the flow of the document. – Chad von Nau Feb 18 '12 at 14:04
0

Try these values for image-rendering:

optimizeQuality
optimize-contrast
-web-kit-optimize-contrast
Rodrigo
  • 674
  • 8
  • 19