Web Browsers War – Image Rendering
In the first part of this benchmark, the topic was text rendering. As you may remember, the winner was the new version of Internet Explorer – 8 beta 2, followed by Firefox, Opera and Chrome. Safari was the looser regarding text rendering due to its weight of letters (normal text looks like bold on Safari), and also due to its too blurry text. In this second part of the benchmark, we will see how browsers behave around images.
For this first test we will use standard shapes – circle and star -, and we will see how they are rendered when they are scaled. The testing system is the same as in the first part – Windows XP SP3. First for the circle test we will use 2 types of circles – one with rough edges and one with anti-aliased edges.
1. Testing Primitives – Circles
The first test is to scale the image from its initial size of 80px, and try to see how it will be look at 160px in all browsers. Because in our posts we have certain pictures size constraints, we will display only half of the circles.
1.1 Rough Circle – Scale 200%
In this first image we have one clear winner and that is Opera. Opera’s rendering engine takes our image with rough edges, scales it and then the image has the same clear edges. Also Safari does a good job adding just a little blur. The rest of the browsers have a pretty distorted rendering. Let’s see how an anti-aliased circle will be displayed.
1.2 Anti-Aliased Circle – Scale 200%
It seems like now Opera has the same approach, but in this case its rendering is the worst of all. Also Safari has a pretty pixelized rendering. Firefox has a better approach than the previous 2 but it has too much blur and the circle looks like it has some kind of glow around. The best rendered image in this test is in Chrome and Internet Explorer. Both have a good representation of a scaled anti-aliased circle.
2. Testing Primitives – Star
On the star test we will only cover the anti-aliased part. With this test we want to see how the sides of the star are rendered since they don’t create 90 or 45 degrees. Those type of angles (45,90 degrees) are easy to scale and in most cases the scaled image will look close to the original. Let’s see how different angles are rendered in a scaled anti-aliased star.
2.1 Anti-Aliased Star – Scale 200%
This test has the same result as the previous one, only that now Opera has blurry edges. The winners are Chrome and Internet Explorer. Safari has the same pixelized rendering and Firefox the same blurry star.
2.2 Anti-Aliased Star – Scale 9%
Because we sometimes scale pictures to lower values for avatars or other things, we made also a test for scaling down images. Based on the same primitive – star -, we’ve tested how a star of 620px looks at 67px.
As you can see, the worst result is rendered in Firefox. There is nothing that says anti-aliased in this scaled down version of the star. The second worst image is provided by Opera but with many improvements compared to Firefox. The winners are the other 3 competitors – Chrome, Safari and Internet Explorer which share a similar result in scaling down the original image.
3. Transparent Stacked Stacked
For this test I’ve created 3 transparent PNG’s and I’ve placed them one over the other: Red – Green – Blue. This test was made due to some issues regarding transparency on previous browsers.
It looks like now, the latest versions of the most important browsers – Internet Explorer, Firefox, Safari, Opera and Chrome – have the same approach on transparency. It is a good thing since IE 6 had many glitches regarding this topic.
4. Conclusion
For this phase of our Web Browsers War benchmark we have 2 winners: Chrome and Internet Explorer. It seems like these two browsers have the best capabilities when we speak of images. On the second place we have Safari and Opera with similar image rendering engine and in the last place is Firefox.
Chrome 
IE
Safari
Opera
Firefox 
Of course that these tests are not covering all the features regarding the rendering process. We only want to show the behavior of main web browsers in common images operations. Stay tuned because there are other steps in our benchmark. Hopefully we will have better results in the future test. Cheers!
PS: You can check the first part of the benchmark here: Browsers War – Text Rendering
Andy Gongea is a passionate UI/UX designer with a great appetite for technology and trends. Currently he owns, a future wife, a loan that comes with a monthly fee and some strange ideas about user interface and user interaction. Cheers!22 Responses to “Web Browsers War – Image Rendering”
Additional comments powered by BackType
That’s a very interesting comparison…. I’m surprised Firefox did so poorly.
OMG.. IE no.2
well… nobody watch a site at 200% right?
I’m also incredibly surprised that IE did so well, as it has never given me results like that before. Are you sure you didn’t mix up some of the result screenshots
I’ve had nothing but headaches with IE image scaling, and now refuse to let the browser handle scaling; if we need images resized, we either manually resize them with a “real” image editor, or let the server run it through imagemagick (or similar).
Scaling images is difficult as it totally depends on what image you’re scaling (down is easy, you can use the same algorithm for everything but up is quite hard) – as you can see Opera scales pixelated images well and IE scales anti-aliased images well. Completely different approaches are required.
I’m not surprised Firefox did so poorly though – after all, it really isn’t all it’s cracked up to be. I find Opera and Safari to be quite superior to Firefox, but that’s just me. Firefox’ strong point has always been the extensions, anyway.
Thanks for your comments.
@Alison – I was surprised to see Firefox as the worst renderer, but that’s the way it is.
@Jordan – Good approach – image resizing should be done only in dedicated software, but it looks like scaling in browsers is still used.
@Ionut – Nu era vorba de site-uri, ci doar imagini.
@Simon – I also like Opera and Firefox.
I doubt this, especially the result for firefox and IE.
I’m not sure about the version you used for the testing but here is my testing page, which might indicates that firefox is not that bad and IE is not that good:
http://qi.jiahui.googlepages.com/image_resize_test.html
Maybe some hidden settings to affect this?
This is incredibly stupid and misguided. You should *NEVER* rely on browser scaling. It makes no sense to judge something based on how well it does something so idiotic.
I think this is a matter of opinion. On 1.1 I’d show IE and Firefox as the winners. 1.2, definitely Chrome. 2.1, they all suck. 2.2 Agreed, Chrome, Safari, and IE. However, these are all still subjective scoring based on preference (I can’t stand jagged edges when scaling up).
@old9 The testing versions are the latest browsers. I will set-up a page for testing and if everyone has doubts or suggestions – shoot.
How about how they do it the Acid 3 test, far more important I think.
Latest webkit build gets a full 100/100.
http://acid3.acidtests.org/
Yes Joe, in the upcoming tests we will gather all major benchmark tests and we will show you the results.
@Andy Gongea: you don’t watch images at 200% either
IE, for me, is the slowest browser of them all. Running an older HP w/ an Athlon 3200+ 2.19 Ghz w/ 1GB ram
How does the latest webkit nightly build do? It should perform closer to the chrome results…
Is this useful to anyone but browser teams responsible for writing the image scaling code? For web developers/designers, this behavior is what it is for each browser – there’s no way to affect it other than to render your own scaled versions of images.
The only time it really makes sense to rely on browser scaling is if you want to render the same graphic at different sizes without having to download a different image for each size. In that case you typically use an image at the largest resolution needed and scale *down* so, really, the most important test is the 9% star test. (I literally cannot remember the last time I intentionally relied on a browser to scale an image up. Seriously. The results are so uniformly shoddy that it’s just never a good idea.)
One last point: You’re testing a b&w vector graphic here, which is a bit of an edge case in the real-world. Most graphics will be some sort of photo or graphic where the edges are much less distinct. For those, the browser differences will be much harder to detect, especially when scaling down.
I appreciate how this test might encourage browser developers to improve the scaling algorithms being used but, frankly, you’re really splitting hairs here. The algorithms are all good enough that I would much rather the teams spend their time on something more important. Like support for CSS3 or SVG.
My $0.02.
I don’t think the point is that anyone is going to view sites at 200%, just like nobody drives a car with their head under the hood, but you still might have to look under their before you buy.
I think this is a fascinating test that can be taken for what it’s worth.
And I’m sure that everyone who commented knows that there are more reasons than rendering for choosing a browser.
Thanks for the hard work!
Scaling is very important in my opinion! Surfing on my 50″ 1080p TV sitting 3,5 meters from it is a pleasure in Firefox since it scales everything, including pictures, without distorting the page horribly. Chrome does not, it’s only advantage is it’s speed.
I’ve just discovered that the Chrome browser causes severe banding when it displays jpegs with black and white gradients. I checked the same images in Firefox and IE and they both display the photos normally.
As someone selling my black and white photographs on the web, this is a big problem. I can see it in any b&w image with a smooth blend of tone. Chrome seems to do well with color images, but shows a posterized version of the image in BW.
Firefox ‘should’ now fare much better with the release of 3.6
Image scaling is VERY important – especially for the web developer to be able to control it, it’s not splitting hairs at all. 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 and now offer a solution:
https://developer.mozilla.org/En/CSS/Image-rendering
Hopefully Opera/Apple/Google catches on.
I totally agree with Vaughn. I save a lot of bandwith on my site by scaling images. It is important that they are scaled using nearest-neighbour algorithm and not bi-cubic as that creates a unwanted blurry effect.
I’m glad Microsoft and Mozilla fixed this issue. Still waiting for others though.