How good is Browser Zoom?: http://bit.ly/cmhu2L /by @baekdal .

Written by Thomas Baekdal | Monday, August 11, 2008 | Section: notes

We recently discussed the modern browser's ability to zoom and thus make website more readable. The problem however is, that while it is easy to zoom in on text without losing quality, it is an entirely different thing with images. How good are the modern browsers really at zooming in on images?

Before I show you the result (which is very good), let's briefly discuss the theory behind image scaling.

A bit of theory

Everyone with a digital camera knows that you cannot make pictures bigger and better. You can make it bigger, but you can never exceed the quality and details of the original picture.

This problem is made worse by the fact that there are many different ways to scale an image.

Method 1: Simple scaling

The "poor man's" scaling method is simply to make everything bigger. To zoom in 200% you simply make every pixel twice as big. As a result you end up with a very pixilated image. Not good!

Method 2: Bicubic Scaling (using Photoshop)

A much better way to scale up images is to use the "bicubic" method. It eliminates the pixilated look, and tries to scale the picture by creating new pixels that it thinks will work well. This is a much better method, but it still makes the scaled up image a bit blurry to look at.

Method 3: What we really want

To get the best quality we must abandon the concept of scaling. Instead when a visitor zooms, the browser should request a new "higher quality" image from the server.

This however is not supported by any browser (yet). But the result is spectacular (just look at the hair or the freckles on her nose):

The Browser Tests

How does the browsers compare to these three scaling methods?

We would obviously like to have the perfect image in method 3 (which we cannot get), and we don't want anything like the pixilated look in method 1. But I am very satisfied if it is close to the result we get from scaling up images in Photoshop (method 2).

Firefox 3.0

Firefox is extremely close to Photoshop. It is a bit blurry, and it lacks some of the clarity, but we are talking a tiny difference.

Opera 9.5

Opera is also extremely close. It is actually somewhat better than what you get from Firefox.

Internet Explorer 8.0

Internet Explorer 8 is also very close to what we want. It is not as good as Opera (but close). It is, by all practical terms, the same as Firefox. Technically speaking it is actually a fraction of a fraction of a fraction better than Firefox, but the difference is impossible to see with the naked eye.

Safari 3.0

Finally I also wanted to test Safari. It is a good browser, and "THE" browser on a Mac. But here is a surprise. Safari does not support zooming. It can scale up the text, but not the page itself.

This is actually a bit weird. Zooming is pretty much the most important feature with Safari on the iPhone. Why is the feature missing out in the desktop version (Steve?)

It is pretty good

So there you have it. The modern browsers actually do a pretty good job when it comes to zooming. It is much better than I anticipated.

What we really need is the kind of quality we get using method 3, where a new image is requested when you change the zoom levels. That would be spectacular. But all three browsers come extremely close to the image quality you get from Photoshop, and that is, by all accounts, "good enough".