Making CPU rasterization look the same as GPU rasterization

[Roman Petrenko]

In my HTML page, I have an image element which is significantly smaller (272 * 181) than the source image (1095 * 730). When I make a screenshot of the page using puppeteer connected to a normal Chrome on macOS 10.15.6, the image quality looks good:

However, if I launch Chrome with --disable-gpu-rasterization flag, the image on the screenshot looks more pixelated (you might have to zoom in to notice it):

My questions:

1. Would it be possible to make the image look good even with GPU rasterisation disabled? With some extra launch flags maybe?

2. Why does it happen? Does Chrome load a downscaled version of the image into memory? Would somebody be able to point me to the code that does that?

3. Is it possible to reproduce the pixelated version of the image when rendering it with Skia? (I'm working on a project which needs the images rendered by Chrome and Skia to look exactly the same, so bringing either closer to the other would work).

PS: the original image:

[Roman Petrenko]

Ok, I did some research and here is what I found:

When CPU rasterization is used, Chrome avoids keeping big images in memory when they are not really needed. If the image is going to be rendered at a size much smaller than the original size, it will be resized to be a power of 2 times smaller than the original, but not smaller than the rendered size. This logic is implemented here and used here, and was first introduced in this commit after two issues were raised: (1, 2).

Example: the element size is 240*240, the image size is 1000*1000. It will be resized to be made 2^2 = 4 times smaller, so it becomes 250*250.

Unfortunately, there is no way to turn off the behavior described above in Chrome as this logic doesn’t depend on flags or precompiler directives.

However, as Chrome uses Skia for image resizing, it was easy to adapt this logic for my project.