web高速化基本 - 画像編 独自
画像サイズを指定する
ブラウザーで画像ファイルのダウンロードが完了する前にレイアウトを表示できるため、ページの表示にかかる時間は短縮される。
ただし、表示する画像サイズと指定するサイズが同一であること。たとえば、250×250ピクセルの画像を100×100ピクセルで 表示する場合は、元画像を100×100ピクセルにリサイズしておくことで、ブラウザーに余計な処理が発生しないで表示することができる。
以下の方法で、image画像ファイルのサイズを指定する。
1.HTML(theme・テンプレート)でwidth属性とheight属性を指定する
<img src="test.png" alt="画像名" width="100" height="100" />
2.CSSファイルで、プロパティで指定サイズを指定する
img{
width: 100px;
height: 100px;
}
画像には PNG フォーマットを使う
画像フォーマットでGIF (Graphic Interchange Format) や JPEG (Joint Photographic Experts Group) よりは、PNG (Portable Network Graphic)フォーマットを使用することにより、GIF や JPEG より、PNG は最適なファイル・サイズで適切な画質を提供が可能です。
参照(リンクも含む)ファイルや画像を確認する
不適切な参照等により見つからないファイルを探したりする間、リソースを消費し続けるため、必然的にページの処理が遅くなります。
