Scaling Images in Firefox 3

After making the post about smooth corners in Firefox 3 yesterday, I began to wonder what other smoothnesses (which should be a word) the next version of Firefox might have in store.

As I mentioned yesterday, the Cairo graphics library will power the rendering of web pages in Firefox. Functions such as resizing an image, are now performed by this new library.

In current web browsers, if you have an image that is 100 pixels by 100 pixels, but you tell the browser to resize it to 85×85px (by specifying the height and width in the HTML <img> tag), the results were ugly. The browser would resize the image, but not with any of the smoothness that you would see if you had resized the image in an application like Photoshop or the Gimp.

Now, in Firefox 3.0 Alpha 1, resizing an image like this actually produces a smoothly size image. This isn’t something I would recommend doing, but it is another nice example the improvements coming in the Firefox rendering engine.

Here’s an example of a PNG image version of the Firefox logo. There is only one source image used for all of these variations. This source image is 128 pixels by 128 pixels. The top row shows how Firefox 2 resizes the image, and the bottom row shows how it’s done in Firefox 3.0 Alpha 1.

Firefox image resizing comparison

I had the good fortune of meeting Carl Worth, a lead Cairo developer, a few years ago in Boston. He was a gentlemen and was more enthusiastic about tessellation than anyone I’ve ever met. It’s nice to see his hard work will be helping to improve such a widely adopted application as Firefox.

When a developer of a mapping application was considering a lower-quality view to make his maps render faster, Carl suggested that if Cairo was too slow, then it should be fixed, not worked-around. I understand that they’ve since made good progress on performance.

Of course, this only affects Firefox on Windows (and Linux, I guess) - on the Mac it already smoothly scales images
Ah, it's like a mac!

I think it's about time this kind of scaling has been implemented - However not suggesting that images should be scaled like that in a web page, they should of course be made to fit.

Other graphical implementations in Firefox 3 seem exciting too, but there's still the problem of cross-browser...

Are there any reasons apart from other browsers that means you shouldn't use this?
Awesome stuff. I've always been wondering why browsers are scaling images (not only inside a page, but when you're viewing an image alone too) so... crappily (at least on Windows that is).

Nice that there's going to be a change -- though it's still long to release.

> In current web browsers... the results were ugly

Smooth image resizing has been part of Opera for a long time already :)
Nice to see it in Firefox at last...

Boris Dimitrov []
Is anyone aware of a javascript solution to obtain smooth scaling with the current versions of Firefox-PC and IE-PC? As noted above, Firefox already does this correctly on Mac, but not on PC.

I would like to encourage everyone to size "img" elements using "em" units. That way, images and text will scale together. Pages will look the same on any display device, regardless of screen size and pixel density. A real world example of scale-invariant layout is http://www.inasinglestroke.com/

That's pretty sweet:) Can't wait til Firefox 3 comes:)
I've developed a solution that should work for most browsers (supporting JavaScript and Flash).
You can read about it here:
http://www.stainlessvision.com/smooth-image-scaling

It's not ready for a usable release yet - keep an eye out for something soon though.

Harry Roberts []
Cool, that's a nice new feature to add.
Is there a way to disable this and go back to the sharp scaling method?
Thomas Güttler []
Hi, thank you for the good news. But I think the example image is not the best.
It is much more impressive if you use a black and white PNG file which
contains thin lines.
Post a Reply
:
:
(optional)
:
(optional)
Your email address will be displayed with your reply.
:
Are You Human?: