Question : web browsers and resizing of images

[Reverend]

I had asked an identical question about this quite a while back and forgotten what the answer(s) was (I remember Simon and Colourless commented but can't remember what they actually said).

Let's say I have a 1024x768 image to display in a web browser (we'll take IE as example). However, if I were to specify that the image is to be displayed at a larger or lower resolution, can anyone tell me how a browser resizes the image? Is it straight bicubic resampling or something else?

There's a reason for asking : Does anyone think what I have in mind to be particularly useful?

 

[Fruitfrenzy]

Almost certainly the browser does simple subsampling for down scaling and replication for up scaling. That is what IE does on my system anyway and it looks terrible.

edit: Having now tried your test, the up scale looks OK. If I use a lower resolution it doesn't scale down but you maybe didn't expect it to.

My original comment was referring to the scaling IE does if you view an image bigger than your display. In some cases the browser scales it down to fit but it always does it badly.

 

[3dcgi]

My laptop has a 1024x768 resolution so it didn't need to scale the image. I use Mozilla and I'm not sure what scaling algorithm it uses, but it doesn't seem to be the highest quality. Although the only scaling I've seen is scaling down to fit in the window, not up.

This suggestion is more work for you, but avoids the scaling issues on the reader's end. Why not store multiple resolutions on the server end and use JavaScript to load the proper image? Since the author scales, or creates natively, these multiple resolutions he can check the quality. My past tests have shown that a Sinc filter does a good job upscaling. Slightly better than bicubic because to my eyes the resulting image sometimes looks a little crisper.

 

[Reverend]

Why not store multiple resolutions on the server end and use JavaScript to load the proper image? Since the author scales, or creates natively, these multiple resolutions he can check the quality.

So you're saying use a single image (say 1024x768) and re-size them to various resolutions using an image editing app and, using another JS (which I already have for such a purpose), load the proper image resolution depending on user's desktop? Hmm...

So then, the next question would be :

a) if I "downsize" the original 1024x768 image to say 800x600 (to fit a 800x600 desktop), what would be the best method/app? Bilinear resampling?
b) if I "upsize" the original 1024x768 image to say 1600x1200 (to fit a 1600x1200 desktop), what would be the best method/app? Bicubic resampling?

 

[pcchen]

So then, the next question would be :

a) if I "downsize" the original 1024x768 image to say 800x600 (to fit a 800x600 desktop), what would be the best method/app? Bilinear resampling?
b) if I "upsize" the original 1024x768 image to say 1600x1200 (to fit a 1600x1200 desktop), what would be the best method/app? Bicubic resampling?

a) depends on what effect you want. If you want to show the result of a game running fullscreen, the best way is to capture the screenshot on 800x600 instead of resampling it (which may cause some "antialiasing effect"). Otherwise, box filtering is a standard way for downsampling. Bicubic is just marginally better.

b) The same as a), except bicubic interpolation is much better than bilinear.

 

[3dcgi]

I'm not sure about downscaling, but bicubic, lanczos, and sinc filters are the best I've found for upscaling. I prefer Lanczos/Sinc the best. I can't tell the difference between them. Bicubic is probably good enough though and you can use Photoshop for scaling in that case.

Here is a good imaging program to test on some images. There is a command line tool that can scale images.
http://www.imagemagick.org/