非天マザー by B-CHAN

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

Webサイトでは同じ大きさに見える2枚の画像も実はサイズが違ってたりする話

ウェブの画像の取り扱い

パソコンでもスマートフォンでもインターネットのWebサイトを見る事が多いと思いますが、画像に関するちょっとした知識をお教えします。
Webサイトを作っている人なんかは知っていると思いますが、一般の人は知らない事も多いようです。
パソコンで次の2枚の画像を見比べてみてください。
画像1
小さな画像


画像2
大きな画像


両方とも同じ画像に見えますよね。
両方とも、横320ピクセル(画素)、縦240ピクセルの大きさで表示しています。
しかし、実は使われている画像の実際のサイズは違います。
Webサイトには表示する画像の大きさを自由に設定できる機能があります。
実際には小さな画像なのに大きく表示することもできますし、逆に大きな画像を小さく表示する事もできます。
上記の2枚のうち、画像1は実際に横320ピクセルの画像をそのまま横320ピクセルの大きさで表示しています。
一方の画像2は実際には横1024ピクセルという大きな画像を横320ピクセルに縮小表示しているだけです。
試しに、Windowsパソコンの人は、画像の上で右クリックをして、出てきたメニューから「名前を付けて画像を保存」を選び、デスクトップに保存してみてください。
Macの人は画像の上で右クリックをして、「イメージをデスクトップに保存」を選びます。
こうやって2枚の画像をそれぞれデスクトップに保存してみてください。


Windowsの場合
Windowsで画像保存


デスクトップに保存


Macの場合
Macで画像保存


デスクトップに2枚の画像を保存できたら、それぞれの画像をダブルクリックして開いてみてください。
画像1の方は小さい事がわかると思います。
画像2の方は大きいですよね。
このようにWebサイトで表示されている画像というのは実際の画像の大きさと異なる事があると言う事です。
例えば、表示されているのは小さな画像なのに、読み込むのにとても時間がかかるようであれば、実は大きなサイズの画像を小さく表示しているだけという可能性があります。
Webサイトを作っている人でも知らない人がいるようで、ページの中で、小さな表示で良い箇所に大きな画像を選んでしまっていて、読み込みに非常に時間がかかるページができてしまっている事例をときどき見かけます。
そういう場合は、あらかじめ小さな画像を作っておいて、それを指定してやればページの読み込みは早くなります。
逆に小さな画像を大きく表示すると、画素が間延びして表示されるので、次の様に非常に粗い画像になります。
小さい画像を大きく
上記は、本当は横320ピクセルしか無い画像を横800ピクセルで表示しています。


元々が大きい画像を大きく表示すると、当たり前ですが、次の様にキレイに表示されます。
大きい画像を大きく


Webサイトが画像に詳しい人なら当たり前の事かも知れませんが、知らなかった人は、Webや画像の奥深い世界をちょっと垣間見られた事だと思います。


関連記事
斜めに写ってしまった写真をちょっとだけ回転してまっすぐにするためのiPhoneアプリ
iPhoneでキレイな写真を撮りたいなら、標準のカメラでは無く、これを使おう