Bilinear Filtering Even In Firefox

Browser-scaled images look bad, either sometimes or all the time (though in one particular case they can be made to look good all the time - more on that later). This fact leads many never to use them, but there are times when they must be used. An example is a full em-sized page.

A user ups their browser text size so that they can see the text on a page clearly. It stands to reason that the images, especially if they carry important informational content (think graphs), should also be presented in a larger format. Thus is the philosophy of full em sizing set out, and thus comes the obligation to let the user scale the images. But how to stop them looking awful?

Browser-scaled images look bad because they usually use the simplest image scaling algorithm there is: the excision or multiplication of lines. If we have a image that is a sequence of one pixel lines spaced one pixel apart, and one of those lines is excised to shrink the image, the pattern is obviously and painfully ruined. Likewise the multiplication of a line in order to stretch the image leaves one line glaring over its brethren with its double-wide girth. To consider what may be done, look at the cases of shrinking and stretching separately.

The only way to improve the shrinking of an image is to blur it, so that adjacent lines are more similar and so line removal is less glaring. This has the unfortunate consequence of damaging the image for rending at default size.

The only way to improve the stretching of an image is to render it larger, for example twice as large in each axis. This has the unfortunate consequence of making the default image size look bad because of line removal as it is shrunk.

On their own, each of these techniques is useless in the quest to make images look good at more than one size. But both applied at once, in exactly corresponding degree, provide an image that looks just as good in all sizes from default upwards.

To experiment with this in Waxpad, check the option to optimise for all sizes under the graphics menu, and any scaled background images in your document will be given the treatment.

The one case of images looking good at all sizes? In Internet Explorer 5.5 or greater, when using the proprietary AlphaImageLoader filter. Try it in Waxpad - it's graphics > rendering > advanced > transparency. When this is on, a scaled image will be rendered using the filter when you load your page in Internet Explorer.


Back to Waxpad
Waxpad Article: Scaled Image Optimisation