I actually noticed another new Firefox 3 awesomeness yesterday while writing my post Firefox 3 is Awesome.
Three of Deb’s images I used were too big for the width of my blog’s main column, which is 500 pixels. So instead of using HTML like this:
<img src="http://www.flickr.com/bigimage.jpg">
I used HTML like this:
<img src="http://www.flickr.com/bigimage.jpg" width="500">
This basically tells the browser to try to proportionately resize the image so that it’s 500 pixels wide. Because the source image is bigger than this, the operation is analogous to making a thumbnail of a photograph: in other words, we should get a picture that still looks good.
Until now, though, this wasn’t the case; in Internet Explorer 7 and Firefox 2, resizing one of Deb’s 600-pixel-wide images on the browser-side results in an image like this:
Grody. In Firefox 3—and Safari 3, actually—the results are much nicer:
In Firefox 3, this is thanks to the integration of an awesome open-source graphics library called Cairo—not coincidentally the same library that powers Enso.
Ultimately, this feature really makes web design a lot easier. In the past, I’ve had to manually use Photoshop or some similar tool to resample images on the server-side; this made playing around with different designs and layouts a lot harder, because it meant I always had to go through the resampling step to see what displaying the image at a different size on the page would look like. It also made shooting off a quick blog post with a properly-sized image that much more tedious. Now it’s as easy as it always should’ve been—by setting the size attributes on the <img> tag or in the CSS.
(I should note, though, that there are some reasons not to use this kind of feature: since all web browsers don’t yet support it, it means that the image won’t look so good for some users; and depending on the context, you may be wasting bandwidth and increasing load times by sending images to a user that contain more pixel data than they actually see. But at the very least, for those who do prototyping and design work in the browser, I think this feature is an unquestionable boon.)
My name is Atul Varma, and I'm the co-founder of a small Chicago company called 
Our smooth scaling code also really improves how images look when you use the zoom function to scale them up or down. Especially on Windows, where we added bilinear filtering … the difference over Firefox 2 and IE7 is night and day.
so around when I are we expecting Firefox 3 to come out???
“so around when I are we expecting Firefox 3 to come out???”
There’s no set date. Expect it in the first half of June. If you’re okay with using pre-release versions, Firefox 3 RC1 (Release Candidate) is out:
http://www.mozilla.com/en-US/firefox/all-rc.html
img { -ms-interpolation-mode: bicubic }
does the job in IE7
And now that scaling works, something needs to be done about rotation - rotated images in <canvas> still look horrible. Well, you cannot have everything…
Blimey, nice tip j.j!
I know this post refers to image scaling only, but I think the scaling (page zoom) in Firefox is a little too awesome. Quality is high at the expense of speed. Running Sam Ruby’s canvas penrose tiling test at 150% zoom, Firefox takes four times as long as Opera does. The results do look better in Firefox, but the slight increase in quality isn’t worth the performance cost. I like to browse the web at 150%, and the slow performance on Firefox have made me switch to Opera for the time being.
I hope I don’t sound too negative. There is a lot of great stuff in Firefox and it’s a major step forward. I’m happy that page zoom finally got implemented.
i hated the page zoom in IE7. the one in FF3 is OK, but when i heard page zoom, i was hoping for an iPhone style thing. maybe it doesn’t make much sense on the desktop, but it does look nicer. the ff3 zoom is a tad slow, and for someone like me with a 1920×1200 15.4″ screen, i zoom everything, which means that quite often things get really misplaced when everything gets resized. i was hoping things would keep their placement relative to each other.
it’s not page zoom; it’s just resizing non-text elements.
it’s going to be the first thing i turn off in ff3, because when i want to read text i don’t need the google reader logo growing with me.
other than that, i’ve been using ff3 beta for a bit and quite enjoy it, esp the improved javascript speeds. wonderful! i haven’t gotten used to the awesomebar yet–keep trying to remember hard-to-type urls as opposed to page names.
Opera did it.
I’d also like to say that this wasn’t meant to make web designers lazier.
Is there some way to disable this “awesome” feature (such as in the CSS for images / classes) so that it works the same was as it used to? I ask because I have a site, http://sim.urbandead.info that displays a 100×100px image at 1500×1500px. The image represents a game’s map, with each pixel being one “block”, and I want them hard edged, not fuzzy.
BTW, I did this not so save bandwidth (the image would be about the same number of bites at any size, due to PNG compression) but because the image is generated from a database, and the PHP code that generates it is simpler to write (and faster) if I’m only setting one pixel at a time.
BTW, people who do “pixel art” also commonly used this “trick”. It would be pretty sad if Mozilla ruined it for those folks by not including some setting to NOT use “smooth” re-sampling when scaling an image.
We have the same problem, as Seb Wiers on our site at http://bahnschranke.tt4u.de .
It is a site for pixel art: railway vehicles in small scale. The Zoom function rescales the pictures to let people see the individual pixels. The smooth re-sampling results in a blurred picture. We would like to disable it, and to return to the previous, simple algorithm. Is there a style setting or other way to do that ?
Is it possible to disable the image scaling when you zoom a web page up? I have eyesight problems and like the text scaled up, but prefer the graphics to remain the same size (because otherwise, I end up with horizontal scrollbars.
–
David W. Fenton
David Fenton Associates
http://dfenton.com/DFA/
David -
Go to the “View” menu, then “Zoom” -> “Zoom Text Only”.
Can you add bicubic resampling for those of us who are image processing snobs?
Ok it’s all cool and stuff, but this smoothing feature has destroyed my pixel font images. :/
I hate this image filter and wish they would include an option to disable it, at least for specific formats such as gif.
This has ruined so many pixel art forums and has caused me to use IE on occasion, you hear that!? IE!! D:
TakaM,
> wish they would include an option to disable it
future Firefox versions (after 3.5.x) support CSS “image-rendering”.
See https://developer.mozilla.org/En/CSS/Image-rendering
j.j.
It’s a VERY bad idea to do this. If you want a thumbnail, make a thumbnail. People who are still on dialups (yes there are lots of them still, some areas are too far out for dsl in larger countries like the US and Canada), are NOT going to thank a ‘web designer’ who loads a series of 2048×1536 images to produce a list of tiny thumbnails! Also, if you pay for web hosting by bandwidth, you’re not going to thank yourself in the long run either.
@Martin - I think most people here are talking about scaling up rather than scaling down. For example, say I had a pixel art 16×16 icon, that I wanted to blow up to 256×256, with bi-linear interpolation it will be insanely blurry, while in older days when most browsers used bi-cubic by default this was never a problem. That 16×16 (1kb) image would be nice a crisp even at 1024×1024 - now we are forced to increase file sizes for users. Fortunately Mozilla and Microsoft realized what they did:
https://developer.mozilla.org/En/CSS/Image-rendering
Hopefully Opera/Apple/Google catches on.