Web Browser Wednesday

Right now I am using Firefox 2 as my primary browser because some of my extensions don’t play nice with the pre-release version of Firefox 3. That’s a real shame too because the rendering engine (Cairo) that Firefox 3 offers is really amazing. The only thing is that a lot of people will never think twice about the great things Cairo brings to the table.

Firefox Anti-Aliased Corners

In the example above you can see that Firefox 3 renders the corners much better than Firefox 2 by eliminating the jaggedness of them. In my opinion it does a pretty fantastic job, but there is also one not so subtle change that I want to present to you: image scaling.

To test the image scaling I’m going to use Firefox 2, a nightly build of Firefox 3, Opera 9, and Internet Explorer 7. I created a simple website that forced images to scale themselves by using a width (in pixels) that I specified. Here are the different scenarios that I did:

Image Scaling: 500px to 400px

In the image above (click to enlarge) I shrunk an image (original unscaled image here) from being 500 pixels wide to being just 400 pixels wide. As may of you probably know that would cause text to be unreadable in many browsers, but Firefox 3 and Opera 9 peaked through the clouds to show how remarkable their rendering engine is! Those were the only two that produced readable text.

 Image Scaling: 800px to 400px

This test was much more strenuous because it took an image that was originally 800 pixels wide and scaled it to half the original size. Most of the text was unreadable in all the browsers since the scaling was so drastic. But, what I really wanted to show here was how badly Firefox 2 and Internet Explorer 7 scale images. If you strain your eyes a little bit at least you can still make out most of the words in Firefox 3 and Opera 9…and I would say that Opera 9 wins this test as well.

Image Scaling: 500px to 550px

This test is different than the other two because I wanted to scale an image to be larger. I took a 500 pixel image and made it 550 pixels. All of the browsers were still readable but you could tell that making the image just a little bit larger would have made the text unreadable in Internet Explorer 7 and Firefox 2. Opera 9 still did a really good job but it had a blurry effect to the image, so for this round I would give the crown to Firefox 3 who’s “upscaling” was definitely the best.

Those are really the only three tests that I performed on the images, but it quickly became obvious what the results were going to be had I decided to scale more images. The point that I wanted to make was that Firefox 3’s Cairo rendering engine will make more of a difference than you think, and that Opera also does a truly amazing job scaling images. I have a strong feeling that Firefox 3 will be another nail in the coffin for Internet Explorer…and with IE 8 still 18 to 24 months away Firefox has plenty of time to gain some ground.