Re: [csswg-drafts] [css-images-3] image-rendering:pixelated should not force "nearest neighbor" (or similar) when the scale factor is far from an integer (e.g. 150%) (#5837)

Some points by a long-term pixel-perfect integer-scaling enthusiast, a six-year owner of a [4K monitor](https://tanalin.com/en/blog/2015/05/dell-p2415q-review/) used at 200%, and the author of the [article](https://tanalin.com/en/articles/integer-scaling/) about integer scaling and of the [SmartUpscale](https://tanalin.com/en/projects/smart-upscale/) browser extension (the latter tries to do exactly what this proposal is about; has ~800+ users on Firefox and 2000+ users on Chrome):

1. The ability to apply nonblurry scaling at non-integer scales should work for _background_ images too. This would allow applying this approach to _multiple_ background layers, which is currently almost impossible to achieve in a reasonable way.

2. There should be a way to choose a _specific_ scaling algorithm at least for non-integer scales, but preferably for each of both cases. I planned to propose something like this for a while, and this is a possible syntax I thought of:

   ```css
   image-rendering: integer(nearest) fractional(bilinear);
   ```

   So we would have a pair of value functions, each accepting a keyword corresponding to the specific desired algorithm for each of the two cases: fractional scales and integer scales.

3. This is probably obvious, but just in case: the feature should be tied to _physical_ pixels. It should not matter _how exactly_ the specific element is scaled on the page, including HTML attributes (`width`/`height` for `IMG`), CSS declarations like `max-width: 100%`, and CSS transforms (e.g. `transform: scale(2)`).

4. A considerable example of using the hybrid approach with applying nonblurry upscaling at integer scales and a blurry averaging one at fractional scales is DPI scaling (DPI virtualization) in Windows 10. It upscales user interface of applications that are either not declared as DPI-aware or forced by the user to be considered as non-DPI-aware.

5. (This part might be postponed to a next spec level/version.)  
   It might be useful to have a way to limit the maximum scale of the element that nonblurry scaling is applied at. In case of _non_-pixel-art images, nonblurry upscaling makes main sense at scales equal or lower than the pixel density that may be considered as a sort of threshold for single pixels to get noticeable as squares.

   For example, I use a 24-inch 4K monitor at 200% OS-level zoom, so my pixel density is 2.0, and 2×2 solid-color square pixels are almost indistinguishable as squares when using integer scaling with 3D content, photos or videos (e.g. when displaying 1920×1080 aka Full HD in full screen). But at 300% (3.0) scale (e.g. when scaling 720p→4K), 3×3 pixels get quite noticeable as squares, so a way to trigger blurry scaling would be useful to prevent _visible_ pixelation at too high scale levels while using integer scaling solely for the purpose of preventing _unreasonable_ blur when logical pixels-squares are almost indistinguishable.

   Using the possible syntax I provided above, this could be expressed as an _optional_ function inside the `integer()` function:

   ```css
   image-rendering: integer(nearest max-pixel-density(system)) fractional(bilinear);
   ```

   `max-pixel-density(system)` would mean that image-like elements (images, background images, videos, canvas elements) should be scaled with no blur at integer scales _up to the OS-level zoom inclusive_ and scaled with blur otherwise. For example:

   * In case of OS-level zoom of 200%, integer scaling would only be applied at 200%.
   * In case of OS-level zoom of 400% (e.g. with 24-27-inch 8K monitors possible in the foreseeable future), integer scaling would be applied at 200%, 300%, and 400%.

   For what it’s worth, such a limit can be specified in the SmartUpscale extension mentioned above, via the “Maximum image zoom that blur should be prevented at” setting which accepts integer numbers.

   We could probably imagine an extended syntax like `max-pixel-density(system+1)` for more flexibility, but it’s probably enough for now.

Thanks.

-- 
GitHub Notification of comment by Marat-Tanalin
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5837#issuecomment-856322903 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 7 June 2021 23:19:16 UTC