画像の表示が遅い・・・
ホームページを見ている時、「小さい画像なのにジワジワ表示されるな〜」ってページありません？
例えばこんなページ おでん！ （見たら戻ってきてね〜）
画像がリサイズされていない
原因は、ホームページに使う画像を、リサイズ（画像を拡大・縮小すること）していないからです。
- 画像のピクセル数（ファイルサイズ）が大きい
- HTMLで画像よりも小さいピクセル数を指定している
- 小さい画像なのに画像の表示が遅い
先ほどのページを、リサイズした画像で作ると、こんな風になります。
ちゃんと作ったページ 正しいおでん！ （見たら戻ってきてね〜）
画像のピクセルとは？
JPG画像やGIF画像は、ピクセル（点）という細かな点の集まりで絵を表示しています。
- ピクセル数は、一般に横の点の数×縦の点の数（例えば1600x1200ピクセル）と書きます
デジカメなどで使う「○○○万画素」は縦横のピクセルを掛け算したもの
例：1600x1200ピクセル 1600x1200＝1,920,000≒200万画素 - 画素数が多い＝精細な描画が可能（可能であって、必ずしも精細な画像であるとは限らない）
- 画素数が多い＝ピクセル数が多い＝ファイルサイズが大きい
- ファイルサイズが大きい＝ファイルの送信に時間がかかる＝画像の表示が遅い
ホームページとは？
蛇足かもしれませんが、ホームページとHTML、ブラウザの関係は…
ホームページを作るとは？
- HTMLという言語で書いたHTMLファイルと、JPG画像やGIF画像ファイルを作る
- HTMLファイルをサーバに置く
- 画像ファイルもサーバに置く
ホームページを見るとは？
- （閲覧者）ブラウザにURLを入力する
- （閲覧者のブラウザ）サーバに「HTMLファイルをちょ〜だい」って言う
- （サーバ）置いてあるHTMLファイルをブラウザにそのまま送る
- （閲覧者のブラウザ）HTMLファイルを受け取り、読み取る
- （閲覧者のブラウザ）サーバに「HTMLファイルに書いてある画像ファイルもちょ〜だい」って言う
- （サーバ）置いてある画像ファイルをブラウザにそのまま送る
- （閲覧者のブラウザ）画像ファイルを受け取り、読み取る
- （閲覧者のブラウザ）HTMLと画像をミックスして画面に表示させる
- （閲覧者）ホームページが見える
HTMLでの画像サイズ指定とは？
さてそういうわけで、サーバは 置いてある画像ファイルをブラウザにそのまま送る のです。
表示が遅いページ おでん！
- 画像ファイルは、1600x1200ピクセル ファイルサイズは244KB
- HTMLファイルには <img src="oden.jpg" width="400" height="300"> と書いてある
- HTMLに書かれた画像サイズと、実際の画像サイズが違う
- ブラウザが画像処理をし、画像を小さく表示する
- 画像ファイルは大きい＝ファイルの送信に時間がかかる＝表示されるのが遅い
- ブラウザでの画像処理時間が必要＝表示されるのが遅い
表示が早いページ 正しいおでん！
- 画像ファイルは、400x300ピクセル ファイルサイズは13KB
- HTMLファイルには <img src="oden.jpg" width="400" height="300"> と書いてある
- HTMLに書かれた画像サイズと、実際の画像サイズは同じ
- ブラウザは画像処理せず、画像をそのまま表示する
- 画像ファイルは小さい＝ファイルの送信に時間はかからない＝表示されるのが早い
- ブラウザの画像処理時間は不要＝表示されるのが早い
遅い上に汚い
画像の表示が遅いだけでは無いんです、画像が汚いのです。
1000x200ピクセル 9.9KBのGIF画像を 550x110ピクセルで表示 元画像 （見たら戻ってきてね〜）
550x110ピクセル 4.9KBのGIF画像を 同ピクセルで表示
上の画像のほうが汚く（斜めの線がガタガタに）なってると思います。ブラウザによっても違いはありますが、画像の表示が遅くその上画像が汚いホームページのできあがり…です。
画像補間
ブラウザの画像処理は上手じゃないんです。画像のリサイズ時には画像補間するものとしないものがあり、一般的な画像処理ソフトではリサイズ時に画像補間しますが、ブラウザでは単純に間引いて表示するだけなので、斜めの線などがガタガタになってしまうのです。
リサイズしてください
なんだか長くなってしまってごめんなさい。表示させるピクセル数＝画像ピクセル数にしましょう。
「じゃあどうやるの？」ってわけで、それが書きたかったんですが、枕が長くなってしまったので別ページで説明します。