Kevin Powell - Community•10mo ago

CSS `image-rendering: pixelated;` works not as described in docs

W3 states that using pixelated value of CSS image-rendering property has effect only if image is upscaled. However, this is apparently not the case in Chromium and it does not work in Firefox too.

If the image is scaled down, it will be the same as auto — https://www.w3schools.com/cssref/css3_pr_image-rendering.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>image-rendering</title>
</head>
<body>

    <h2>1:1 size</h2>
    <code>image-rendering: auto</code>
    <img src="https://www.w3schools.com/cssref/smiley.gif" style="image-rendering: auto;">
    <code>image-rendering: pixelated</code>
    <img src="https://www.w3schools.com/cssref/smiley.gif" style="image-rendering: pixelated;">

    <hr>

    <h2>upscaled</h2>
    <code>image-rendering: auto</code>
    <img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 100px; image-rendering: auto;">
    <code>image-rendering: pixelated</code>
    <img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 100px; image-rendering: pixelated;">

    <hr>

    <h2>downscaled</h2>
    <code>image-rendering: auto</code>
    <img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 10px; image-rendering: auto;">
    <code>image-rendering: pixelated</code>
    <img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 10px; image-rendering: pixelated;">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>image-rendering</title>
</head>
<body>

    <h2>1:1 size</h2>
    <code>image-rendering: auto</code>
    <img src="https://www.w3schools.com/cssref/smiley.gif" style="image-rendering: auto;">
    <code>image-rendering: pixelated</code>
    <img src="https://www.w3schools.com/cssref/smiley.gif" style="image-rendering: pixelated;">

    <hr>

    <h2>upscaled</h2>
    <code>image-rendering: auto</code>
    <img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 100px; image-rendering: auto;">
    <code>image-rendering: pixelated</code>
    <img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 100px; image-rendering: pixelated;">

    <hr>

    <h2>downscaled</h2>
    <code>image-rendering: auto</code>
    <img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 10px; image-rendering: auto;">
    <code>image-rendering: pixelated</code>
    <img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 10px; image-rendering: pixelated;">

</body>
</html>

2 Replies

Jochem•10mo ago

don't trust w3schools, they're not related to the w3c so they're not "the docs" or anything official there are many, many examples where w3schools is providing demonstrably wrong or incomplete info. MDN is much better, unless you want to read the actual specs from w3.org which are a bit dense and not necessarily always followed to the letter mdn simply says this:

The image is scaled with the "nearest neighbor" or similar algorithm, preserving a "pixelated" look as the image changes in size.

which seems much closer to your experience

.ondram•10mo ago

Thanks!

Gaming

Programming

CSS `image-rendering: pixelated;` works not as described in ~~docs~~

CSS `image-rendering: pixelated;` works not as described in docs