CSS Code to Fix blurry image when scaling down

When large images scale down because of container width, an image some times look blurry in different browsers and devices. The issue happens when you resize images using CSS.

Here are 3 methods with CSS Code to Fix blurry image that display image quality in a better way:

Fix blurry Image on transform scale:

img {
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

---

Using image-rendering as pixelated

By default, browsers try to apply aliasing to this scaled image so that there is no distortion, but it makes picture blurry sometimes. Therefore, if we want to preserve original pixelated form, you can apply the following CSS code to your image.

img {
  image-rendering: pixelated;
}

---

Using image-rendering as crisp-edges

In some cases, image-rendering as crisp-edges works well and display it without distortion.

img {
  image-rendering: -moz-crisp-edges;         /* Firefox */
  image-rendering:   -o-crisp-edges;         /* Opera */
  image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

• Next Code

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.