WordPress（Page Speed対応） - 変更後のサイズで画像を提供する

難易度

★すごく簡単

概要

ブラウザがページをレイアウトをするとき、画像のような置換要素（hr、isindex、applet、button、embed、iframe、ilayer、img、input、layer、object、select、spacer、textarea　など）の周りではフロー（要素の大きさ、位置などの計算）が発生します。

表示する画像のサイズと実際の画像のサイズが異なると、実際の画像サイズで表示した後、表示したいサイズにする為に、リフロー（要素の大きさ、位置などの再計算）とリペイメント（描画）が発生していまいます。実際の画像ファイルが60×60ピクセルならば、30×30サイズのようなサイズを指定しないのが望ましく、画像を作りなおして実際の画像とマッチしたサイズを指定するのが最適です。

また、マークアップの際には、画像サイズも合わせて指定しましょう。