2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
画像を書き出してcssで縮小するとChromeでぼやけてしまうケースがあります。
今回はChrome固有のこのバグを対処する方法をご紹介します。
目次
img {
image-rendering: -webkit-optimize-contrast;
}
指定なし
CSSの指定あり
指定ありの右側のほうが文字がくっきりしました。
image-rendering: -webkit-optimize-contrast;
はimage-rendering: crisp-edges;
のChrome用のベンダープレフィックスです。
プロパティ | 効果 |
image-rendering: auto; | ブラウザに依存。初期値。 |
image-rendering: crisp-edges; | 拡大縮小しても滑らかにしたりぼかしたりしない。 |
image-rendering: pixelated; | ドット絵のような処理をする。 |
※ただし、文字がギザギザしてしまう場合があるので要注意です。
画像を書き出し、cssで縮小させるときに2で割り切った数値から1pxでもズレるとぼやけてしまいます。
例)1600px で書き出した画像を縮小させる
804pxに縮小
800px(1/2)に縮小
この数ピクセルの誤差で画像がぼやけてしまいます。
また、縮小をした際に小数点が入ってしまう大きさに指定をした場合もぼやけてしまいます。
× 横幅1600pxで書き出し→1/3サイズに縮小→533.333…px
○ 横幅1600pxで書き出し→1/4サイズに縮小→400px
○ 横幅1600pxで書き出し→等倍で使用→1600px
Chrome固有のバグなので、今後アップデートの際に解消されるかもしれませんが現状では、「image-rendering」もしくは「画像を1/2サイズに縮小」することでしか対応は難しいです。
また、Chromeはシェア率がトップなブラウザでもありますし、コーディングの際には画像のぼやけが発生していないか細かくチェックしていく必要があります。
こちらもおすすめ
RECOMMEND
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design