Integer scaling (pixel-perfect scaling) for scaling images with no blur at integer scales like 2.0 (200%)

[Marat-Tanalin]

Images, backgrounds, and videos are unreasonably blurry in browsers even at integer scales such as 2.0 (200%) which is typical e.g. for 24-inch 4K monitors. Integer (pixel-perfect) scaling turns each logical pixel into a square group of integer number of physical pixels of the same color not affected by colors of adjacent pixels.

Would be nice to have integer scaling as a browser-wide feature. SmartUpscale extension (addon) is an attempt to force blur-free pixel-perfect scaling at integer scales while still using interpolation at fractional scales, but it can only do this for embedded images, and not for backgrounds, and performance is lower than could be with native implementation built into browser.

Are such features in the goals/scope of the project? Thanks.

[trickypr]

I get the reason why you would want nn (or more correctly pixelated) to be your default image-rendering method. However, there is a good reason why browsers implement biliniear or something similar as the default. It works really well for natural landscapes etc. The kind of place where JPEG compression artifacts are barely noticeable.

If you want to change the default rendering method, it should be as simple as adding this to a stylus style:

* {
  image-rendering: pixelated;
}

Alternatively, if you think it is valuable, I can add a pref that changes what the default render method is.

[Marat-Tanalin]

The whole point of my proposal and how SmartUpscale works is preventing unreasonable blur at integer scales by conditional selection of what algorithm to use: pixelated is only used at integer scales when it does not result in distortion, and default blurry scaling is used at fractional scales. Also, SmartUpscale has an option for the maximum scale to use pixelated at, which allows to prevent visible pixelation at e.g. 3.0+, but still prevent unreasonable blur at 2.0.

It’s not about forcing pixelated for all images.

I would be totally fine with enabling the feature via a pref without GUI. So we would need two prefs like these:

• pulseBrowser.imageRenderingPixelatedAtIntegerScales.enabled (boolean);
• pulseBrowser.imageRenderingPixelatedAtIntegerScales.maxScale (integer like 3 or 4).

(The pulseBrowser. prefix is optional, just would probably be useful to prevent any conflicts with Firefox own prefs.)

[trickypr]

Thanks for the clarification. I might look into this after my semester has ended