画像の表示サイズ
今回はブログやウェブサイトの制作に関する初心者向け記事です。
記事タイトルの名付け方に悩みました。
わかっている人にはわかりきっている内容ですが、素人には何のことやら？と言う内容だからです。
ページ内の画像の表示サイズの話です。
スマートフォンだと画面が小さいので正確な説明はできません。
正しく理解するためにはパソコンの大きな画面で読んでください。
理解済みの人は、読む必要すらありませんが。
まずは、1枚目の画像。
これのHTMLは、
<img width="640" height="480" src="●●●" />
●●●の部分はこの画像のURLです。
画像を左クリックしても、何も起こりません。
単に画像を表示しているだけだからです。
画像の寸法は、横640ピクセル、縦480ピクセルです。
そのサイズの画像をそのまま表示しているだけです。
ここで画像を右クリックするとメニューが表示されるので、新しいタブで画像を開いてみてください。
すると、上記の画像とまったく同じ画像が同じサイズで、ウェブブラウザの別のタブに表示されますよね。
まさに上記の画像をそのまま別のタブで開いただけだからです。
では、2枚目の画像を見てください。
さっきの1枚目の画像と同じに見えますよね。
HTMLは、
<img width="640" height="480" src="■■■" />
です。
では、この画像も、さっきと同じように、 右クリックして、別のタブで開いてみてください。
今度は画像のサイズが全然違うことに気付きますよね。
実は2枚目の画像は、ホントのサイズはものすごく大きい（横4032ピクセル、縦3024ピクセル）なんです。
それを、横640ピクセル、縦480ピクセルに縮小して表示しているわけです。
大きな画像を小さく表示しているんですね。
このように、ウェブページに表示する画像は、同じように見えても実態が違うことがあります。
そして、どちらが望ましいかと言えば、1枚目の画像表示です。
なぜなら、2枚目の画像は、小さく表示されてはいるものの、実際は大きなサイズなので、ページの読み込みに時間がかかるからです。
当然、検索エンジンからも嫌われるので、アクセス数を稼ぐ観点でも良くありません。
ブログに画像を小さく載せるときは、元の大きなサイズの画像を小さく表示して載せるのでは無く、あらかじめ載せるサイズの画像（小さな画像）を作っておいて、それを載せる方が望ましい、と言うわけです。
表示サイズ ＝ 実サイズ
が望ましいわけです。
実際に、色んなウェブサイトやブログを見て回っていると、これができていないケースが少なくありません。
読み込み速度で損しています。
画像リンク
他によくあるのが、小さな画像をクリックしたら大きな画像になるページ。
いわゆる画像リンクですね。
例えば、これ。3枚目の画像。
この3枚目の画像は小さすぎて見にくいですよね。こう言うのをサムネイルと呼ぶことが多いです。
このサムネイルにマウスカーソルを持って行くと、マウスカーソルの形が、手の形になりますよね。
つまり、このサムネイルはリンク（クリックすると別のページの移る）になっていることがわかります。
良ければ左クリックしてみてください。すると、新しいページに本来の大きな画像が表示されます。
理屈で言えば、サムネイル用の小さな小さな画像と、本来の大きな画像との2種類をあらかじめ用意しておいて、サムネイル表示のときには小さな画像を表示すれば、読み込みスピードは上がるんです。
ところが、上記の3枚目のサムネイルは実は、2枚目と同じで、大きな画像を小さく表示しているだけなんです。
試しに3枚目のサムネイルを右クリックしてメニューから新しいタブで画像を開いてみてください。
大きな画像で表示されたでしょ。
なので、このサムネイルの作り方は望ましくありません。
この悪い見本のHTMLは、
<a href="大きな画像URL">
<img src="大きな画像URL" width="160" height="120" />
</a>
です。
imgタグには、本来はサムネイル用の小さな画像URLを入れるべきです。
こちらの4枚目の画像を見てください。
さっきの3枚目のサムネイルと同じに見えますし、同じ動作（左クリックすると元の大きな画像を表示）をしますが、ちゃんとサムネイル用の小さな画像をあらかじめ用意しておいて、それを使っています。
試しに、この4枚目のサムネイルも右クリックしてメニューから新しいタブで画像を開いてみてください。
今度は小さな画像で表示されたでしょ。
HTMLは、
<a href="大きな画像URL">
<img src="サムネイル用の小さな画像URL" width="160" height="120" />
</a>
です。
と言うわけで、今回は、HTML初心者向けの記事でした。
この記事自体も、例題として、2枚目の画像や3枚目の画像で悪い見本（小さく見せる画像なのに大きな画像を使っている）があるので、アクセス数を稼ぐ観点では損していますが、まあ、そう言う記事なので仕方無いです。
