HTML-CSS 入門講座

HTML-CSS 入門講座

Appendix-2
画像型式と品質・サイズ

目次

A2.1 はじめに

A2.1.1 概要

  • 「画像型式と品質・サイズ」は、複数ある画像ファイル形式の特徴と最適な使用用途を理解するために画像の品質と画像ファイルのサイズについて説明します。
  • 対象となる画像ファイル形式は、以下の通りです。
(1) GIF
GIF(ジフ)は、Graphics Interchange Format の略称で、拡張子は、gif が使用されます。256 色までの色が使用でき可逆圧縮型式の保存形式です。背景の透過やアニメーション画像を使用することができます。
(2) JPEG
JPEG(ジェイペグ)は、Joint Photographic Experts Group の略でJPEGという画像形式を作った組織そのものの名前からきています。拡張子は、jpg または jpeg です。JPEGは、フルカラー(1677 万色)を扱うことができ圧縮率を指定することができます。写真などに適していますが非可逆圧縮型式のため圧縮率の指定値によっては大幅な画像劣化が発生することがあります。
JPEG の画像比較は、高画質(画質優先)、中画質、低画質(ファイルサイズ最小)で実施しました。
(3) PNG-8
PNG(ピング)は、Portable Network Graphics の略称で、拡張子は、png が使用されます。ウェブで使われるために生まれた画像形式です。PNG-8 は、256 色までの色が使用でき GIF と同様の仕様です。
(4) PNG-24
PNG(ピング)は、Portable Network Graphics の略称で、拡張子は、png が使用されます。ウェブで使われるために生まれた画像形式です。PNG-24 は、フルカラー(1677 万色)の可逆圧縮型式を採用しているため色数が多くても画像の劣化はありません。背景の透過設定も使用することができます。単に PNG というと、こちらを保存形式を示します。
  • 検証で使用した画像ファイルは、以下の通りです。画像サイズは、すべて 256✕256 ピクセルです。
(1) イラスト
イラストなどで色数が少なく境界が明確な画像です。
イラスト
(2) グラデーション
グラデーションなどを使用した色数の多い画像です。
グラデーション
(3) 写真
写真などの色数の多い画像です。
写真

A2.2 画像品質比較(イラスト)

A2.2.1 画像比較

  • イラスト画像を各ファイル形式で保存して画像比較を行いました。

PNG-24

イラスト(PNG-24)元画像

イラスト(PNG-24)PNG-24

画像切替

PNG-8

イラスト(PNG-24)元画像

イラスト(PNG-8)PNG-8

画像切替

GIF

イラスト(PNG-24)元画像

イラスト(GIF)GIF

画像切替

JPEG 高画質

イラスト(PNG-24)元画像

イラスト(JPEG 高画質)JPEG 高画質

画像切替

JPEG 中画質

イラスト(PNG-24)元画像

イラスト(JPEG 中画質)JPEG 中画質

画像切替

JPEG 低画質

イラスト(PNG-24)元画像

イラスト(JPEG 高画質)JPEG 低画質

画像切替

A2.2.2 画像比較(拡大)

  • イラスト画像を各ファイル形式で保存して縦 2 倍×横 2 倍の画像で画像比較を行いました。

PNG-24

イラスト(PNG-24)(拡大)元画像

イラスト(PNG-24)(拡大)PNG-24

画像切替

PNG-8

イラスト(PNG-24)(拡大)元画像

イラスト(PNG-8)(拡大)PNG-8

画像切替

GIF

イラスト(PNG-24)(拡大)元画像

イラスト(GIF)(拡大)GIF

画像切替

JPEG 高画質

イラスト(PNG-24(拡大))元画像

イラスト(JPEG 高画質)(拡大)JPEG 高画質

画像切替

JPEG 中画質

イラスト(PNG-24)(拡大)元画像

イラスト(JPEG 中画質)(拡大)JPEG 中画質

画像切替

JPEG 低画質

イラスト(PNG-24)(拡大)元画像

イラスト(JPEG 高画質)(拡大)JPEG 低画質

画像切替

A2.2.3 画像比較(劣化度)

  • イラスト画像を各ファイル形式で保存してツールでの劣化度比較を行いました。
  • 黒色で塗られている部分が劣化が発生している部分です。

PNG-24

イラスト(PNG-24)(劣化度)元画像

イラスト(PNG-24)(劣化度)PNG-24

画像切替

PNG-8

イラスト(PNG-24)(劣化度)元画像

イラスト(PNG-8)(劣化度)PNG-8

画像切替

GIF

イラスト(PNG-24)(劣化度)元画像

イラスト(GIF)(劣化度)GIF

画像切替

JPEG 高画質

イラスト(PNG-24)(劣化度)元画像

イラスト(JPEG 高画質)(劣化度)JPEG 高画質

画像切替

JPEG 中画質

イラスト(PNG-24)(劣化度)元画像

イラスト(JPEG 中画質)(劣化度)JPEG 中画質

画像切替

JPEG 低画質

イラスト(PNG-24)(劣化度)元画像

イラスト(JPEG 低画質)(劣化度)JPEG 低画質

画像切替

A2.2 画像品質比較(グラデーション)

A2.3.1 画像比較

  • グラデーション画像を各ファイル形式で保存して画像比較を行いました。

PNG-24

グラデーション(PNG-24)元画像

グラデーション(PNG-24)PNG-24

画像切替

PNG-8

グラデーション(PNG-24)元画像

グラデーション(PNG-8)PNG-8

画像切替

GIF

グラデーション(PNG-24)元画像

グラデーション(GIF)GIF

画像切替

JPEG 高画質

グラデーション(PNG-24)元画像

グラデーション(JPEG 高画質)JPEG 高画質

画像切替

JPEG 中画質

グラデーション(PNG-24)元画像

グラデーション(JPEG 中画質)JPEG 中画質

画像切替

JPEG 低画質

グラデーション(PNG-24)元画像

グラデーション(JPEG 高画質)JPEG 低画質

画像切替

A2.3.2 画像比較(拡大)

  • グラデーション画像を各ファイル形式で保存して縦 2 倍×横 2 倍の画像で画像比較を行いました。

PNG-24

グラデーション(PNG-24)(拡大)元画像

グラデーション(PNG-24)(拡大)PNG-24

画像切替

PNG-8

グラデーション(PNG-24)(拡大)元画像

グラデーション(PNG-8)(拡大)PNG-8

画像切替

GIF

グラデーション(PNG-24)(拡大)元画像

グラデーション(GIF)(拡大)GIF

画像切替

JPEG 高画質

グラデーション(PNG-24(拡大))元画像

グラデーション(JPEG 高画質)(拡大)JPEG 高画質

画像切替

JPEG 中画質

グラデーション(PNG-24)(拡大)元画像

グラデーション(JPEG 中画質)(拡大)JPEG 中画質

画像切替

JPEG 低画質

グラデーション(PNG-24)(拡大)元画像

グラデーション(JPEG 高画質)(拡大)JPEG 低画質

画像切替

A2.3.3 画像比較(劣化度)

  • グラデーション画像を各ファイル形式で保存してツールでの劣化度比較を行いました。
  • 黒色で塗られている部分が劣化が発生している部分です。

PNG-24

グラデーション(PNG-24)(劣化度)元画像

グラデーション(PNG-24)(劣化度)PNG-24

画像切替

PNG-8

グラデーション(PNG-24)(劣化度)元画像

グラデーション(PNG-8)(劣化度)PNG-8

画像切替

GIF

グラデーション(PNG-24)(劣化度)元画像

グラデーション(GIF)(劣化度)GIF

画像切替

JPEG 高画質

グラデーション(PNG-24)(劣化度)元画像

グラデーション(JPEG 高画質)(劣化度)JPEG 高画質

画像切替

JPEG 中画質

グラデーション(PNG-24)(劣化度)元画像

グラデーション(JPEG 中画質)(劣化度)JPEG 中画質

画像切替

JPEG 低画質

グラデーション(PNG-24)(劣化度)元画像

グラデーション(JPEG 低画質)(劣化度)JPEG 低画質

画像切替

A2.4 画像品質比較(写真)

A2.4.1 画像比較

  • 写真画像を各ファイル形式で保存して画像比較を行いました。

PNG-24

写真(PNG-24)元画像

写真(PNG-24)PNG-24

画像切替

PNG-8

写真(PNG-24)元画像

写真(PNG-8)PNG-8

画像切替

GIF

写真(PNG-24)元画像

写真(GIF)GIF

画像切替

JPEG 高画質

写真(PNG-24)元画像

写真(JPEG 高画質)JPEG 高画質

画像切替

JPEG 中画質

写真(PNG-24)元画像

写真(JPEG 中画質)JPEG 中画質

画像切替

JPEG 低画質

写真(PNG-24)元画像

写真(JPEG 高画質)JPEG 低画質

画像切替

A2.4.2 画像比較(拡大)

  • 写真画像を各ファイル形式で保存して縦2倍×横2倍の画像で画像比較を行いました。

PNG-24

写真(PNG-24)(拡大)元画像

写真(PNG-24)(拡大)PNG-24

画像切替

PNG-8

写真(PNG-24)(拡大)元画像

写真(PNG-8)(拡大)PNG-8

画像切替

GIF

写真(PNG-24)(拡大)元画像

写真(GIF)(拡大)GIF

画像切替

JPEG 高画質

写真(PNG-24(拡大))元画像

写真(JPEG 高画質)(拡大)JPEG 高画質

画像切替

JPEG 中画質

写真(PNG-24)(拡大)元画像

写真(JPEG 中画質)(拡大)JPEG 中画質

画像切替

JPEG 低画質

写真(PNG-24)(拡大)元画像

写真(JPEG 高画質)(拡大)JPEG 低画質

画像切替

A2.2.3 画像比較(劣化度)

  • 写真画像を各ファイル形式で保存してツールでの劣化度比較を行いました。
  • 黒色で塗られている部分が劣化が発生している部分です。

PNG-24

写真(PNG-24)(劣化度)元画像

写真(PNG-24)(劣化度)PNG-24

画像切替

PNG-8

写真(PNG-24)(劣化度)元画像

写真(PNG-8)(劣化度)PNG-8

画像切替

GIF

写真(PNG-24)(劣化度)元画像

写真(GIF)(劣化度)GIF

画像切替

JPEG 高画質

写真(PNG-24)(劣化度)元画像

写真(JPEG 高画質)(劣化度)JPEG 高画質

画像切替

JPEG 中画質

写真(PNG-24)(劣化度)元画像

写真(JPEG 中画質)(劣化度)JPEG 中画質

画像切替

JPEG 低画質

写真(PNG-24)(劣化度)元画像

写真(JPEG 低画質)(劣化度)JPEG 低画質

画像切替

A2.5 まとめ

A2.5.1 画像品質比較

◎:とても良い、○:良い、△:多少の劣化あり、×:大きい劣化あり

PNG-24PNG-8GIFJPEG
高画質
JPEG
中画質
JPEG
低画質
イラスト×
グラデーション×
写真×

A2.5.2 ファイルサイズ比較

◎:とても小さい、○:小さい、△:大きい、×:とても大きい

PNG-24PNG-8GIFJPEG
高画質
JPEG
中画質
JPEG
低画質
イラスト
7KB

5KB

5KB
×
15KB

7KB

6KB
グラデーション×
41KB

14KB

20KB

7KB

3KB

3KB
写真×
107KB

33KB

36KB

27KB

9KB

6KB

A2.5.3 結論

  • アニメーションを使用する場合は、GIF を選択します。
  • 背景を透過にする場合は、PNG-24 か PNG-8 か GIF を選択します。
  • 色数が少ないイラスト画像は、PNG-8 か GIF か PNG-24 を選択します。
  • 色数が多いグラデーション画像は、JPEG(画質優先)を選択します。
  • 写真は、JPEG(適切な圧縮率)を選択します。
  • 画質を優先する場合は、PNG-24 を選択します。但し、色数が多い場合は、ファイルサイズが大きくなるので注意が必要です。
  • ファイルサイズを優先する場合は、JPEG(サイズ優先)を選択します。但し、画質劣化が発生しますので、必ず、元画像を保管しておいてください。

◎:とても適している、○:適している、△:画像に応じて判断、×:適していない

PNG-24PNG-8GIFJPEG
高画質
JPEG
中画質
JPEG
低画質
アニメーション×××××
背景透過×××
イラスト××
グラデーション×
写真××
画質優先×
サイズ優先××

ロケット本体
PAGE
TOP
ロケット炎