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