読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

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


難易度

★すごく簡単

概要

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

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

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

注意点

特になし

確認方法

サイトを開き、目視確認

参考サイト

ブラウザ動作の理解-リフローとリペイント及びその最適化 link http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technology/reflow-and-repaint-in-browser/

画像のサイズを指定する link http://t32k.github.com/speed/rendering/SpecifyImageDimensions.html