非天マザー by B-CHAN

iPhoneの使い方、IT、ビジネス、金融、経済、不動産、保険、音楽、映画、ニュース、自己啓発その他。

載せる画像サイズで損しているブログが意外と多い件

画像の表示サイズ

 

 

今回はブログやウェブサイトの制作に関する初心者向け記事です。

記事タイトルの名付け方に悩みました。

わかっている人にはわかりきっている内容ですが、素人には何のことやら?と言う内容だからです。

 

ページ内の画像の表示サイズの話です。

 

スマートフォンだと画面が小さいので正確な説明はできません。

正しく理解するためにはパソコンの大きな画面で読んでください。

理解済みの人は、読む必要すらありませんが。

 

まずは、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枚目の画像で悪い見本(小さく見せる画像なのに大きな画像を使っている)があるので、アクセス数を稼ぐ観点では損していますが、まあ、そう言う記事なので仕方無いです。