画像の表示が遅い・・・
ホームページを見ている時、「小さい画像なのにジワジワ表示されるな〜」ってページありません?
例えばこんなページ おでん! (見たら戻ってきてね〜)
画像がリサイズされていない
原因は、ホームページに使う画像を、リサイズ(画像を拡大・縮小すること)していないからです。
- 画像のピクセル数(ファイルサイズ)が大きい
- 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画像を 同ピクセルで表示
上の画像のほうが汚く(斜めの線がガタガタに)なってると思います。ブラウザによっても違いはありますが、画像の表示が遅くその上画像が汚いホームページのできあがり…です。
画像補間
ブラウザの画像処理は上手じゃないんです。画像のリサイズ時には画像補間するものとしないものがあり、一般的な画像処理ソフトではリサイズ時に画像補間しますが、ブラウザでは単純に間引いて表示するだけなので、斜めの線などがガタガタになってしまうのです。
リサイズしてください
なんだか長くなってしまってごめんなさい。表示させるピクセル数=画像ピクセル数にしましょう。
「じゃあどうやるの?」ってわけで、それが書きたかったんですが、枕が長くなってしまったので別ページで説明します。
フリーウェアを使った画像のリサイズ