WordPress（Page Speed対応） - 画像のサイズを指定する

難易度

★すごく簡単

概要

すべての画像の幅と高さを指定することで、不要なリフロー（要素の大きさ、位置などの再計算）やリペイント（描画）が減り、レンダリング（画面への表示）をより速く行うことができます。

ページを表示するときには、少なくとも1回リフロー（要素の大きさ、位置などの再計算）とリペイント（描画）が行われます。

テキストのカラーや背景などが変更になるとリペイント（描画）が発生します。
要素の位置が変わるとリフロー（要素の大きさ、位置などの再計算）が発生します。
リフローが必要な処理には、その後に必ずリペイメント（描画）が発生します。

ブラウザにとっては、リフローとリペイメントを両方行うことが一番の負荷となります。例としては、「ユーザーがボタンを押したら、ページ上部にあるdivを拡大し、ページの残りを下に押しやる」なんて動作です。

「ゆっくりと…」さんのサイトにとても分かりやすい例えがありました。

[js]var bstyle = document.body.style; // キャッシュ

bstyle.padding = "20px"; // リフロー、リペイント bstyle.border = "10px solid red"; // さらにリフロー、リペイント

bstyle.color = "blue"; // 位置は変化しないので、リペイントのみ bstyle.backgroundColor = "#fad"; // リペイント

bstyle.fontSize = "2em"; // リフロー、リペイント

// 新しい DOM 要素の追加 - リフロー、リペイント document.body.appendChild(document.createTextNode('dude!'));[/js]

画像のサイズを指定するのも、この内容に基づいてのことになります。

ブラウザがページをレイアウトをするとき、画像のような置換要素（hr、isindex、applet、button、embed、iframe、ilayer、img、input、layer、object、select、spacer、textarea　など）の周りではフロー（要素の大きさ、位置などの計算）が発生します。画像にサイズが指定されていない場合、ブラウザは画像のダウンロードが終わった後でなければサイズが不明な為、リフロー・リペイントを行うことができません。 HTMLのimgタグまたはCSSですべての画像にwidthとheightを明示することで、ブラウザは画像がダウンロードされる前であってもレンダリング（画面への表示）を開始することができるようになります。

また、表示する画像のサイズと実際の画像のサイズが違うこともよくないです。実際の画像サイズで表示した後、表示したいサイズにする為に、リフロー・リペイメントが発生するからです。実際の画像ファイルが60×60ピクセルならば、30×30サイズのようなサイズを指定しないのが望ましく、画像を作りなおして実際の画像とマッチしたサイズを指定するのが最適です。