CSS properties - image-rendering

revision:

image-rendering property

- specifies the type of algorithm to be used for image scaling. This property has no effect on images that are not scaled.

CSS syntax : image-rendering: auto | smooth | high-quality | crisp-edges | pixelated | initial | inherit;

Property values:

auto : let the browser choose the scaling algorithm. This is default

smooth : use an algorithm that smooth out the colors in the image

high-quality : same as smooth, but with a preference for higher-quality scaling

crisp-edges : use an algorithm that will preserve the contrast and edges in the image

pixelated : if the image is scaled up, the nearest-neighbor algorithm is used, so the image will appear as being composed of large pixels. If the image is scaled down, it will be the same as auto

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.imageRendering="pixelated"

example: image-rendering property

image-rendering: auto;

Smiley

image-rendering: crisp-edges;

Smiley

image-rendering: pixelated;

Smiley

image-rendering: smooth;

Smiley

image-rendering: high-quality;

Smiley

Original image: Smiley

code: 
                    <div>
                        <p>image-rendering: auto;</p>
                        <img class="image" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                        <p>image-rendering: crisp-edges;</p>
                        <img class="image crisp-edges" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                        <p>image-rendering: pixelated;</p>
                        <img class="image pixelated" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                        <p>image-rendering: smooth;</p>
                        <img class="image smooth" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                        <p>image-rendering: high-quality;</p>
                        <img class="image high-quality" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                        <p>Original image: <img src="../../pics/smiley.png" alt="Smiley" width="32" height="32"></p>
                    </div>
                    <style>
                        .image {height: 10vw; width: 10vw; image-rendering: auto;}
                        .crisp-edges {image-rendering: -webkit-optimize-contrast; /* Chrome, Edge, Opera, and Safari */image-rendering: crisp-edges;}
                        .pixelated {image-rendering: pixelated;}
                        .smooth {image-rendering: smooth;}
                        .high-quality {image-rendering: high-quality;} 
                    </style>