CSS | image-rendering Property - GeeksforGeeks

17 Dec, 2019
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.Example:<!DOCTYPE html><html><head>  <title>    CSS | image-rendering  </title>  <style>    .image-crisp {        /* Using the crisp-edges      value for demonstration */      image-rendering: crisp-edges;    }      .image-auto {      image-rendering: auto;    }  </style></head><body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | image-rendering  </b>  <p>    Comparing the 'crisp-edges'    value with the 'auto' value    in Firefox  </p>  <div class="container">    <img class="image-crisp"      src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"      width="250px">    <img class="image-auto"      src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"      width="250px">  </div></body></html>Output: Comparing the crisp-edges value with the auto value
Example:
<!DOCTYPE html><html><head>  <title>    CSS | image-rendering  </title>  <style>    .image-crisp {        /* Using the crisp-edges      value for demonstration */      image-rendering: crisp-edges;    }      .image-auto {      image-rendering: auto;    }  </style></head><body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | image-rendering  </b>  <p>    Comparing the 'crisp-edges'    value with the 'auto' value    in Firefox  </p>  <div class="container">    <img class="image-crisp"      src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"      width="250px">    <img class="image-auto"      src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"      width="250px">  </div></body></html>
Output: Comparing the crisp-edges value with the auto value
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.Example:<!DOCTYPE html><html><head>  <title>    CSS | image-rendering  </title>  <style>    .image-auto {      image-rendering: auto;    }      .image-crisp {      image-rendering: crisp-edges;    }  </style></head>  <body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | image-rendering  </b>  <p>    Comparing the 'auto' value    with the 'crisp-edges' value    in Firefox  </p>  <div class="container">    <img class="image-auto"       src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"      width="250px">    <img class="image-crisp"       src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"      width="250px">  </div></body></html>Output: Comparing the auto value with the crisp-edges value
Example:
<!DOCTYPE html><html><head>  <title>    CSS | image-rendering  </title>  <style>    .image-auto {      image-rendering: auto;    }      .image-crisp {      image-rendering: crisp-edges;    }  </style></head>  <body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | image-rendering  </b>  <p>    Comparing the 'auto' value    with the 'crisp-edges' value    in Firefox  </p>  <div class="container">    <img class="image-auto"       src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"      width="250px">    <img class="image-crisp"       src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"      width="250px">  </div></body></html>
Output: Comparing the auto value with the crisp-edges 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.Example:<!DOCTYPE html><html>  <head>  <title>    CSS | image-rendering  </title>  <style>    .image-crisp {        /* Using the crisp-edges      value for demonstration */      image-rendering: crisp-edges;    }      .image-pixelated {      image-rendering: pixelated;    }  </style></head>  <body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | image-rendering  </b>  <p>    Comparing the 'crisp-edges'    value with the 'pixelated'    value in Firefox  </p>  <div class="container">    <img class="image-crisp"       src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"      width="250px">    <img class="image-pixelated"      src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"      width="250px">  </div></body></html>Output: Comparing the crisp-edges value with the pixelated value
Example:
<!DOCTYPE html><html>  <head>  <title>    CSS | image-rendering  </title>  <style>    .image-crisp {        /* Using the crisp-edges      value for demonstration */      image-rendering: crisp-edges;    }      .image-pixelated {      image-rendering: pixelated;    }  </style></head>  <body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | image-rendering  </b>  <p>    Comparing the 'crisp-edges'    value with the 'pixelated'    value in Firefox  </p>  <div class="container">    <img class="image-crisp"       src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"      width="250px">    <img class="image-pixelated"      src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"      width="250px">  </div></body></html>
Output: Comparing the crisp-edges value with the pixelated value
initial: It is used to set the property to its default value.Example:<!DOCTYPE html><html><head>  <title>    CSS | image-rendering  </title>  <style>    .image-crisp {      /* Using the crisp-edges      value for demonstration */      image-rendering: crisp-edges;    }      .image-auto {      image-rendering: initial;    }  </style></head><body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | image-rendering  </b>  <p>    Comparing the 'crisp-edges'    value with the 'initial'    value in Firefox  </p>  <div class="container">    <img class="image-crisp" src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"     width="250px">    <img class="image-auto" src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"     width="250px">  </div></body></html>Output: Comparing the crisp-edges value with the initial value
<!DOCTYPE html><html><head>  <title>    CSS | image-rendering  </title>  <style>    .image-crisp {      /* Using the crisp-edges      value for demonstration */      image-rendering: crisp-edges;    }      .image-auto {      image-rendering: initial;    }  </style></head><body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | image-rendering  </b>  <p>    Comparing the 'crisp-edges'    value with the 'initial'    value in Firefox  </p>  <div class="container">    <img class="image-crisp" src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"     width="250px">    <img class="image-auto" src="https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"     width="250px">  </div></body></html>
Output: Comparing the crisp-edges value with the initial value
inherit: It is used to set the property to inherit from its parent element.
Supported Browsers: The browsers supported by image-rendering property are listed below:
Chrome
Firefox
Safari
Opera
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript