ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

誤っていません?画像形式の正しい選択方法

ページ上に画像を貼り付ける際、画像形式の選択を誤っていませんか?選択を誤ると、ファイルサイズが大きくなったり、画像が粗くなったり、デメリットだらけです。適切な選択方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

画像形式を正しく選択できていますか?

次の2つの画像をご覧下さい。同じ内容の絵ですが、何かが異なります。 何が異なるかお分かりでしょうか。

A 画像1a
B 画像1b

明らかに下側(B)の方がボケていて粗いですね。
※かなり極端な例なのですが。

つまり、この画像ではAの方が正しい画像形式を選択できており、 Bの方は、画像形式の選択がおかしいのです。

先ほどの2枚の画像の詳細は次の通りです。

画像 形式 サイズ
A 画像1a GIF 3.7KB
B 画像1b JPEG 3.8KB

両者の違いは画像形式です。上側(A)はGIF形式、下側(B)はJPEG形式です。
つまり、この画像に関しては、JPEG形式よりもGIF形式の方が正しい選択だと言うことです。

後で説明しますが、JPEG形式は圧縮率を選択することができます。 上記の例では、GIF形式のサイズ 3.7KB に近くなるよう圧縮率を高く設定しています。そのために、粗さが目立つわけです。 では、GIF形式と同じように見えるように圧縮率を下げてみるとどうなるでしょうか。

画像 形式 サイズ
A 画像1a GIF 3.7KB
B' 画像1b(dash) JPEG 10.7KB

今度は、JPEG形式の方でも粗さは目立ちませんが、その代わりにファイルサイズがずいぶんと大きくなってしまっています。
つまり、やはりこの画像に関しては、JPEG形式よりもGIF形式の方が正しい選択だと言うことです。

それでは、次の例を見てみて下さい。

A B
画像2a 画像2b

今度はどうでしょうか? どちらも同じように見えますか?
※なんとなく道路の傾きなどが両者で異なるように見えるかも知れませんが、それは目の錯覚です。どちらも(画像形式が異なるだけの)全く同じ写真です。

詳しくは、次のページで! →

  • 1
  • 2
  • 3
  • 5
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます