CSS image-rendering Property

The image-rendering property is used to set the type of algorithm used for image scaling. This property can be used to modify the scaling behavior when the user scales the image above or below the original dimensions. 

Syntax:

shape-rendering: auto | crisp-edges | pixelated | initial | inherit

Property Values:

• auto: It is used to indicate that the scaling algorithm will be dependent on the user agent. Different browsers may have different algorithms.
• crisp-edges: It is used to indicate that the algorithm will preserve the contrast and edges in the image. It will not smooth out the colors or blur the image due to the use of anti-aliasing. Some of the algorithms used here are nearest-neighbor and other non-smoothing scaling algorithms.  
• initial: It is used to set the property to its default value. 
• pixelated: It is used to indicate that the nearest-neighbor algorithm is used on the image when it is scaled up. When the image is scaled down, the behavior is the same as the auto value. 
• inherit: It is used to set the property to inherit from its parent element.

Example: In this example, we use image-rendering: auto property.

Output: Comparing the crisp-edges value with the auto value 

👁 auto

Example: In this example, we are using image-rendering: crisp-edge property.

Output: Comparing the auto value with the crisp-edges value 

👁 crisp-edges

Example: In this example, we are using image-rendering: pixelated property.

Output: Comparing the crisp-edges value with the pixelated value 

👁 pixelated

Example: In this example, we are using image-rendering: initial prope

Output: Comparing the crisp-edges value with the initial value 

👁 initial

Supported Browsers: The browsers supported by image-rendering property are listed below:

• Chrome 13+
• Edge 79+
• Firefox 3.6+
• Safari 6+
• Opera 15+