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.
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:
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.
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.
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.
This is just one of the hundreds of CyberNotes we have done. You can find more of them by visiting our CyberNotes category, or by subscribing to our CyberNotes feed. We also have a full feed available if you want to receive all of our articles in your reader!
Tags: CyberNotes, Firefox, Freeware, Software
Related Posts:
- CyberNotes: Your Week in Review with Sunday’s Summary
- New Features I’ve Found in Firefox 3 so far
- Your Week In Review With Sunday’s Summary
- Your Week in Review with Sunday’s Summary
- Your Week in Review with Sunday’s Summary
The way the image scales to larger, suggests to me that the parameters for the scaling algorithm are tweaked on Fx3 to render blow-ups better than shrinks, and vice-versa on Opera. Now if they could only both use heuristics to get it right both times…
That would definitely be nice, but I’m just grateful that Mozilla got around to fixing this. It always frustrates me when websites trust the browser to scale the image properly just because they don’t want to take the time to make a readable thumbnail. Maybe someday it won’t be necessary to make thumbnails, but Internet Explorer probably won’t catch up anytime soon so I wouldn’t be expecting that.
Hmm… Firefox3 is the best in scaling up, and Opera is the best in scaling down.
To get best results,
For enlargement should be used BICUBIC algorithm.
For reduction should be used BILINEAR algorithm.
But [cairographics.org] (graphics engine used in Firefox 3 beta) is under active development, so it will become better in time.
I never actually looked at what algorithms they used…thanks for pointing that out. I wonder if the developers realize the quality difference? Maybe I’ll drop them a quick email.
Yeah, using Cairo for the GFX backend has a lot of benefits.
For more on why Bicubic is better for enlargement, and bilinear for reduction, see their respective wikipedia articles.
[en.wikipedia.org]
[en.wikipedia.org]
Bicubic:
“It preserves fine detail better than the predominant bilinear algorithm.”
Bilinear:
“…is rather accurate until the scaling of the texture gets below half or above double the original size of the texture.”
I just love seeing equations like the ones shown in those articles.
Here is a nice explanation with pictures:
Bicubic Resizing vs Bilinear
[nickyguides.digital-digest.com]
BTW, Adobe Photoshop also have those options in “Image Size” dialog window. Here is explanation from Adobe:
According to [bugzilla.mozilla.org] Firefox 2 uses the operating system’s native functions to scale images. According to [bugzilla.mozilla.org] Firefox 3 uses the nearest neighbour algorithm for downsampling and “a better one” for upsampling.
Hmm, I always thought that Windows XP scaled images just fine so I wonder what Windows is doing that makes it so bad. I’m just glad that Firefox 3 will be a lot better.
Yes, I know, Firefox 2 results are almost 1-to-1 like IE 7.
“Nearest Neighbour” is the WORST algorithm! MS Paint uses this algorithm for resizing. It is so bad, that it had to die in Pentium times, I can’t understand why there STILL EXISTS software which uses this stupid algorithm in our modern world.