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.)