画像のスケーリングでアンチエイリアスを無効にする

画像のスケーリング中にアンチエイリアスを無効にするという課題は、スケーリング時に画像がぼやけたり補間されたりする場合に発生します。 。これは、ブラウザが画像のエッジを滑らかにするアンチエイリアス技術を適用し、その結果、外観が柔らかくなったために発生します。

ありがたいことに、CSS には、アンチエイリアスを効果的に無効にできるさまざまなフラグが用意されています。ただし、image-rendering: -moz-crisp-edges などの推奨フラグにもかかわらず、これらは背景画像には効果がない傾向があります。

この制限を克服するために、次のコード スニペットは機能する包括的なソリューションを提供します。すべての主要ブラウザ:

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                            */

}

このコード スニペットは、Firefox の -moz-crisp-edges、Opera の -o-crisp-edges、Chrome と Safari の -webkit-optimize-contrast など、複数のブラウザ固有のフラグを利用します。さらに、2021 年以降のユニバーサル サポートのためにピクセル化された値を採用し、CSS3 互換性のためにコントラストを最適化します。最後に、Internet Explorer 8 以降の -ms-interpolation-mode:nearest-neighbor が含まれています。

このコードを組み込むことで、シャープなエッジを効果的に保持し、スケーリング中の画像補間を防ぐことができ、鮮明な画像が得られます。必要に応じてピクセル化された外観。