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.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
          width="250px">
        <img class="image-auto"
          src=
          width="250px">
      </div>
    </body>
    </html>

    chevron_right

    
    

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

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
          width="250px">
        <img class="image-crisp" 
          src=
          width="250px">
      </div>
    </body>
    </html>

    chevron_right

    
    

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

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
          width="250px">
        <img class="image-pixelated"
          src=
          width="250px">
      </div>
    </body>
    </html>

    chevron_right

    
    

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

  • initial: It is used to set the property to its default value.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
         width="250px">
        <img class="image-auto" src=
         width="250px">
      </div>
    </body>
    </html>

    chevron_right

    
    

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

  • 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



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.