css - ページ全体の CSS 背景画像

Question

HTML ページとして使用する大きな画像がある場合background-image、ページ全体の読み込みを速くするにはどうすればよいですか? 大きな背景画像を使用するためのベスト プラクティスは何ですか?

ありがとう

Answer 1

ベスト プラクティスは、背景画像を小さくすることです。繰り返される背景画像がある場合は、最小の繰り返し単位に制限するようにしてください。CSS は、画像を x 方向と y 方向の両方で自動的に無限に繰り返します。'

繰り返しのない背景画像がある場合、明らかに画像をトリミングして小さくすることはできません。その場合、画像全体が繰り返しなしでスクリーン全体を埋めるようbackground-size:coverに設定することができます。background-repeat:no-repeatここでのベスト プラクティスは、PNG の代わりに JPEG などの高圧縮ファイルを使用することです。

Answer 2

画像をできるだけ圧縮します。あなたのボトルネックは、ワイヤーを介したデータ転送です。ページは、CSS の読み込みが完了して「準備が整う」まで待機するため、転送する必要があるバイト数が少ないほど良いです。あるいは、Akamai などの CDN に静的アセットを保存することもできます。これにより、ユーザーに非常に近い場所から非常に高速にサービスが提供されます。