今回のゲストは京都市立動物園の象さんです。
![]() |
487X475ピクセル 29.3KB 今回は象さんなので、画像もちょっとデカ目です。今回はこれが基本。 |
![]() |
244X238ピクセル 29.3KB(元は487X475ピクセル) サイズを見てください。あれれ?表示サイズは小さくなっているのに容量は基本と変わってませんね。 これは表示する画像は基本と同じなのに表示サイズだけを縮小しているからです。 |
![]() |
244X238ピクセル 9.20KB こちらは画像自体を縮小したものです。上の画像と見比べてみましょう。見た目はほとんど変わりませんね。でも容量は約3分の1になっています。 |
このように見た目はほとんど変わらないのに、容量が数倍違うと言う事は表示時間も数倍違うと言う事になりますね。
たかが数秒でも枚数が増えたりテレホの時間になったら数十秒になってしまいます。邪魔くさいけどみんながんばろう。チャンチャン。
![]() |
100X238ピクセル 9.20KB(元は244X238ピクセル) <img src="images/small5.jpg" width="100" height="238"> この例は極端ですが時々見かける間違い。表示サイズの横幅指定が実際は244ピクセルなのに100ピクセルと間違っているために『ほっそり象さん』になっています。 |
![]() |
244X100ピクセル 9.20KB(元は244X238ピクセル) <img src="images/small5.jpg" width="244" height="100"> こちらは縦幅指定が238ピクセルなのに100ピクセルと間違っているために『ぺちゃんこ象さん』になっています。これが我が子の顔だったらと思うと『とうちゃん情けなくって涙が出てきます』 |
画像を表示するときに、表示サイズの指定(widthとheight)をしなければ自動的に表示サイズを整えてくれるのでこんな歪な形にはなりません。
しかし表示サイズの指定があれば、webブラウザーは画像を読み込む前に画面レイアウトが整えられるので、画像が読み込まれるたびにレイアウトが変わるような事が無くなり、体感的にも速く感じます。