What algorithm do browsers commonly use when scaling images with CSS?

Question

I am trying to get canvas to render scaled images with the same visual fidelity as CSS does.

According to my tests (done in Chrome Version 43.0.2357.130), it does not seem to be Lanczos3, even though my tests with ResampleScope indicate that it should be.

See Here:

Code used to produce these results:

"CSS":

<img src="temp.png" style="width:200px;height:200px">

"canvas drawImage":

ctxNative.drawImage(img, 0, 0, 200, 200);

"canvas transform":

ctxTransform.transform(200 / img.width, 0, 0, 200 / img.height, 0, 0);
ctxTransform.drawImage(img, 0, 0, img.width, img.height);

"bicubic" (code for bicubic at the bottom)

"bicubic #2"

"downsample alg."

"lanczos3"

Answer 1

Here is perhaps a useful links on the matter considering Firefox:

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Thus, sometimes CSS does control the image resize process, but most of the time it doesn't.

According to my tests the image scaling quality varies a lot depending on the state of the browsers internal optimisations, for example, when running in CSS transformations which are considered as "accelerated" the sourcebitmap of NxN may be scaled only once to fixed size, let's say into 200x200 and after that this bitbuffer is scaled to some other dimension MxM, which loses quality since there are two passes and the result could be blurred, if the first buffer size is not big enough, which means you can not determine the result based on the source bitmap only.

This is to say that the resulting image quality may not depend on the original picture quality or size, at least if GPU transformations are used.

In other cases, if there are no restrictions based on CSS rules or the browser does not obey then, it can apply smoothing to images the way it sees best - it could first transform the image using some simple algorithm and if there is enought processor time it could apply second filtering pass to the image to make is sharper using more sophisticated algorithm if it is realistic on the current GPU / device configuration.

I'm sure you are familiar with the subject, but here is a list of possibilities on how to scale an image, so there is plenty of algorithms to choose from: https://en.wikipedia.org/wiki/Image_scaling

To get more realistic take, you can go straight to the Chrome's source code, https://code.google.com/p/chromium/codesearch#chromium/src/skia/ext/image_operations.h&sq=package:chromium&type=cs&rcl=1435318317

// Quality Methods
//
// Those enumeration values express a desired quality/speed tradeoff.
// They are translated into an algorithm-specific method that depends
// on the capabilities (CPU, GPU) of the underlying platform.
// It is possible for all three methods to be mapped to the same
// algorithm on a given platform.

// Good quality resizing. Fastest resizing with acceptable visual quality.
// This is typically intended for use during interactive layouts
// where slower platforms may want to trade image quality for large
// increase in resizing performance.
//
// For example the resizing implementation may devolve to linear
// filtering if this enables GPU acceleration to be used.
//
// Note that the underlying resizing method may be determined
// on the fly based on the parameters for a given resize call.
// For example an implementation using a GPU-based linear filter
// in the common case may still use a higher-quality software-based
// filter in cases where using the GPU would actually be slower - due
// to too much latency - or impossible - due to image format or size
// constraints.
RESIZE_GOOD,

// Medium quality resizing. Close to high quality resizing (better
// than linear interpolation) with potentially some quality being
// traded-off for additional speed compared to RESIZE_BEST.
//
// This is intended, for example, for generation of large thumbnails
// (hundreds of pixels in each dimension) from large sources, where
// a linear filter would produce too many artifacts but where
// a RESIZE_HIGH might be too costly time-wise.
RESIZE_BETTER,

// High quality resizing. The algorithm is picked to favor image quality.
RESIZE_BEST,

The code has enumeration for at least following filters: RESIZE_BOX, RESIZE_HAMMING1, RESIZE_LANCZOS2, RESIZE_LANCZOS3,

I suppose you can also find the implementations of those filters in image_operations.cc https://code.google.com/p/chromium/codesearch#chromium/src/skia/ext/image_operations.cc&sq=package:chromium&type=cs