Image Zoom Test

100px 200px 300px
.jpg
.gif
.png

Instructions

You will need a browser capable of zooming images, such as Opera 9 or Internet Explorer 7. Three images have been saved at sizes 100, 200 and 300 pixels. They are displayed here using a fixed width and height of 100 pixels for each image. This causes the larger images to be reduced in size. Zoom in and see which images stay sharp and which do not.

What You Should Observe

Firstly, anything over 100% zoom will cause the smallest image to blur. This is because it's already displayed at its maximum size of 100 pixels. However, since the other images are larger than they are shown, they should remain sharp until you exceed their actual size. So anything up to 200% zoom should show the 200 pixel image sharply. But after that, the browser will start to blur it. Likewise the 300 pixel image will stay sharp until you go over 300% zoom.

Browser Problems Noted

Internet Explorer 7

Opera 9

Firefox 2

Although Firefox 2 can't enlarge images on zooming, it is useful to note how it displays the images compared to the other browsers tested here. I was able to further test Firefox using Chris Pederick's Web Extension Toolbar, which has a zoom function. The results show:

What's The Point?

This all started as a possible way to maintain sharpness in images when zooming in. I thought that if I could change my smaller images for ones twice the size, but show them on the page at half the size, then they would stay sharp right up to 200% zoom. Of course using larger images will add to your page load time, but if you only have a few, it might be worth it. Just keep in mind the differences between each browser.

Details

Coded by Chris Hester 5 December 2006 · Last updated 5 December 2006