How to Disable Antialiasing for Images and Achieve Sharp Edges?

How to Disable Antialiasing for Images without Smooth Transitions

In image scaling, antialiasing plays a crucial role in smoothing out pixel edges, resulting in a visually pleasing effect. However, in certain situations, you may desire a sharp, non-blurred image without antialiasing.

Problem:

When an image is scaled up using the CSS property "background-size," antialiasing may result in blurry edges, as depicted in the following image:

[Image of blurred image with antialiasing]

Desired Outcome:

Disable antialiasing and preserve sharp edges, as illustrated below:

[Image of a crisp image with sharp edges]

Solution:

To overcome this issue and achieve the desired result, apply the following CSS code to the target image:

img {
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}

This code disables antialiasing in all major browsers, ensuring the preservation of sharp image edges without any smoothing transitions.

The above is the detailed content of How to Disable Antialiasing for Images and Achieve Sharp Edges?. For more information, please follow other related articles on the PHP Chinese website!