【PageSpeedInsights】css instead of images (画像の代わりにCSSを利用する)
PageSpeedInsightsで指摘された箇所で、画像の代わりにCSSを利用するというリンク先に
英語記事しかなかったので書きます。
イメージ画像を使う際の問題
・ファイルサイズ
時にファイルサイズは全体のコードファイルのサイズよりも大きくなることがあります。
これはダウンロードとレンダリング時間に影響を与えます。
・メンテナンス
多くの開発者はPhotoshopを持っていないしスキルがありません。またデザイナーは画像変更や、開発者を助けるための多くの時間を割けない
CSSの文字を変えることよりも画像の編集は多くの時間を割きます
・パフォーマンス
HTTPリクエストの数とレンダリング時間を減らせます
ファイルは編集データなどheaderの情報を比較、チェックしなければなりません。
CSSコードでそれらの全てを削減できます
画像の代わりにCSSで記述できる箇所
多くのエフェクトは主要ブラウザで動きます
イメージ画像の代わりにCSS記述しましょう。
・ドロップシャドー
・グラデーション
・背景透過
・border-radius
・tex-shadow
・opacity
などで代わりにCSS記述できます。
参照
・https://www.allwebpromotion.com/ways-for-using-css-instead-images-for-design-effects/
・https://robertnyman.com/2010/04/21/using-css-instead-of-images-when-coding-your-web-design/