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.
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.
Comments
Jakub Steiner - December 14, 2006 10:24 pm
Smonkin'
David Emery - December 15, 2006 4:29 am
Of course, this only affects Firefox on Windows (and Linux, I guess) - on the Mac it already smoothly scales images
Tom - December 15, 2006 5:14 am
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...
giz404 - December 15, 2006 6:42 am
Nice.
AlastairC - December 15, 2006 2:04 pm
Are there any reasons apart from other browsers that means you shouldn't use this?
Nathan Nash - December 15, 2006 6:51 pm
Looks lovely.
nakke - December 22, 2006 1:27 pm
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.
Loss - January 11, 2007 5:36 pm
> 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...
anayurt - February 18, 2007 7:38 am
:)
Boris Dimitrov - March 8, 2007 10:30 am
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/
John - April 7, 2007 8:04 pm
That's pretty sweet:) Can't wait til Firefox 3 comes:)
Tipster - August 31, 2007 6:15 am
You have spam in the comment above this one. Hopefully you'll get a notification about this new comment!
Tom Hooper - September 9, 2007 12:11 pm
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 - October 17, 2007 5:38 pm
Cool, that's a nice new feature to add.
Miranda - October 19, 2007 2:49 pm
Is there a way to disable this and go back to the sharp scaling method?
Thomas Güttler - March 7, 2008 4:36 am
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.
Pinacolada - June 4, 2008 2:31 pm
Pity to see this smooth scaling gone ugly again in FF3.0b5
And I mean UGLY.
Patrickjdempsey - June 10, 2008 6:08 pm
This looks awesome, but I've just downloaded FF3 RC2 on a Win2000 machine and images seem OK, but the way it renders text is horrific. It actually makes it very difficult to read some fonts like Times New Roman with all those serifs! FF2 seems to handle fonts much better.
Greg - June 18, 2008 12:38 am
I'm echoing Miranda. I work in content that's based on pixel perfect details, with resizing a necessary demon, and I need a way to go back to the old method of scaling. Is there a solution if FF3's menus or config page?
shotgun - July 6, 2008 7:13 pm
Indeed. For the pixel lovers this is an unwanted feature, and should simply be configurable.
Seb Wiers - July 14, 2008 5:35 am
Echoing Greg echoing Miranda. I build http://sim.urbandead.info about 2 months ago, and it makes extensive use of "blocky" up-scaling as a useful design element. Indeed, its an ideal method for me, as I'm literally representing a grid based game map. "Smooth" (resampled) scaling totally wrecks my design, and I'd be very happy to know if there is a CSS attribute I can add to images to force non-resampled image scaling. Otherwise I'll have to actually host (and distibute) larger images- not a huge deal normally, but my images a dynamically generated via PHP and the code to make / modify bigger images will be more complex, and execute more slowly.
Max - July 31, 2008 7:43 pm
I second Greg, Miranda and Seb :) and i desperately want to know how to disable the smooth rendering in firefox3.
Does anyone know if it is possible to get firefox3 to render pictures
like firefox2 did ?
Seb Wiers - August 4, 2008 12:08 am
The best solution I can come up with is to make your images BIGGER than you will ever need, and then scale them down. This is tricky, because the scaling must always give an image where there are no factional pixles. For example, if you want to show an image at 10px, but also 20px and 30px and 40px and 50px, you need to have a "master" that is 600px. In short, your desired display dimensions all need to be factors of your "master" dimensions.
Obviously this leads to some large images (dimension wise), but fortunately png and gif compression shrinks this kind of pixel art down to about the same file size regardless of image scale.
Its still a big pain in the ass- you'd have to go through and manually upsize all the images to fix most pixel art sites. Most of my own images are generated from a database (php gd ftw!!11!) and so I could fix it (for future image generations) with just a few extra code lines, but still haven't bothered. It would be a wretched cludge.
Instead, I know advise visitors that the site is best viewed with any browser EXCEPT Firefox3.
Johann - October 24, 2008 4:45 pm
I scale up images on my QR Code Generator and FF 3 makes them look very bad :-(
Will investigate and talk to the developers, maybe there's a CSS property to turn it off.
mac - November 19, 2008 1:12 am
Scaling images in FF3 Looks great, but after having a few very small images resized smaller i really start to lag. A CSS property to disable would be nice.
sirauron - January 28, 2009 3:34 am
I'm clearly in a minority here, but I'd rather the image smoothing could be turned off. I'd much rather have the jagged edges than the resulting blurriness.
Aparna - February 8, 2009 5:48 am
If I mention right image height and width, then it is okey or not ?
Datamatrix Barcode - February 11, 2009 9:23 am
I solved this problem in the meantime by serving Firefox and Safari images of the correct size. Probably not the best way but hey.
Amrit - March 5, 2009 5:48 pm
If I am not wrong, the resizing problem occurs mostly with gif images. If you re-size a higher resolution pic to a lower one by specifying height and width for a jpg I don't think you see any problems.