画像を表示する予備知識

まずは予備知識

画像とひとことで言っても、デジタルカメラで撮影した画像や、イラストレータやフォトショップなどプロ用のソフトで作成するオリジナルのものなど色々とあるかと思いますが、ホームページなど、インターネットで表示する画像は、印刷用の画像と違いネットワークを介して表示するため、画像の大きさ(縦横サイズと容量両方の意味)を適当に変換しなくてはならないという制約があります。

デジタルカメラで撮影した画像は、印刷することを前提でつくられ、大きい用紙に印刷した場合、細部まで精密印刷できるようになっています。
つまり、画像データ容量が大きいということです。
そのままでホームページで表示する場合は特に注意しましょう。

一般的には
• 縦横サイズのピクセル数が大きいーーー＞画像データ容量が大きい
　縦横サイズの横幅がホームページの横幅より大きいとレイアウトが崩れるおそれがあります。
• 縦横サイズがピクセル数が少ないーーー＞画像データ容量が少ない

ピクセルとは画像上での長さの単位で、センチメートル、ミリメートルみたいなもの

容量とは画像の重量みたいなもので、
• 綺麗な画像ほど解像度が高く、容量が大きい
• きめの粗い画像ほど解像度が低く、容量が少ない
という特徴があります。

まとめると以下のような結論になります。
• 画像データ容量が大きいーーー＞インターネットで表示するのに時間がかかる
• 画像データ容量が少ないーーー＞インターネットで表示するのに時間がかからない

インターネットで表示するのに時間がかかるホームページはどうなるかというと、
(1) イライラして誰も見なくなる。（一世代前のパソコンではそうでもないが、二世代前では特に遅い。表示するのに時間がかかる。）
(2) SEOの評価が下がる。
(3) 検索順位が下がる。
(4) さらにSEOの評価が下がる。
(5) 検索順位が圏外まで弾かれる。
という悪循環に陥ります。

推奨するおおよその目安ですが、一応覚えておいて下さい。
【推奨画像サイズ】

データ容量＝200KB 以内(小さければ小さいほど良い)
画像の幅、又は高さ＝500 ビクセル以内
解像度＝72dpi

画像の大きさと容量を知る方法は こちらをクリック 

じゃあ、画像データ容量が少なくするにはどうしたらいいの？

縦横サイズのピクセル数を500ビクセル以内に調整しましょう。

その方法は、

Windowsのpaint機能を使うのがお手軽でしょう。

少し専門的になりますと、家電量販店で売っている素人用のフォトショップや無料のGIMPを使ってもいいでしょう。