Maintain Image Quality When Applying CSS Transform & Scale

CSS Web Development Front End Technology

The CSS image-rendering property helps us set an algorithm for scaling our image.

Syntax

The syntax of CSS image-rendering property is as follows −

Selector {
   image-rendering: /*value*/
}

Example

The following examples illustrate CSS image-rendering property.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            height: 200px;
            width: 200px;
         }
         #one {
            image-rendering: smooth
         }
         #two {
            image-rendering: pixelated
         }
         #three {
            image-rendering: crisp-edges
         }
      </style>
   </head>
   <body>
      <img id="one" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
      <img id="two" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
      <img id="three" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
   </body>
</html>

This gives the following output

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            padding: 5%;
            border-radius: 40%;
            height: 20%;
            width: 20%;
         }
         #one {
            image-rendering: pixelated
         }
         #two {
            image-rendering: smooth
         }
         #three {
            image-rendering: crisp-edges
         }
      </style>
   </head>
   <body>
      <img id="one" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
      <img id="two" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
      <img id="three" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
      <br/>
      pixelated, smooth, crisp
   </body>
</html>

This gives the following output