Chrome (DeveloperTools)デベロッパーツールでJavaScript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

【PageSpeedInsights】css instead of images (画像の代わりにCSSを利用する)

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

(Visited 1 times, 1 visits today)