読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

コンピューター上で利用できるグラフィック形式

GIF(Graphics Interchange Format)

  • GIFは色数が256色に限定されており、写真のような色数の多い画像には向きません
  • GIFの大きな利点は透明色(Transparent)を指定できること(最近ではPNG
  • GIFは水平方向に連続する同じ色を圧縮します(つまり、横方向のストライプは圧縮率が高く、縦方向のストライプは圧縮率が低くなります)
GIF形式が向いている用途
  • べた塗りの多い画像
  • アニメーション画像

JPEG(Joint Photographic Experts Group)

  • JPEG非可逆圧縮形式なので元の画質と全く同じ状態には戻すことができません(代わりに高い圧縮率でファイルサイズを抑えることができます)
  • JPEGの圧縮方式は8×8画素のブロックに分割され、そのブロック単位で圧縮が行われます(そのため急激な色の変化やベタ塗りは苦手です)
  • 圧縮率を上げすぎるとファイルサイズを抑えることができますが、代わりにブロックノイズが発生するので注意が必要です
JPEG形式が向いている用途
  • 写真などのフルカラーまたはモノクロ写真

PNG-8/24/32(Portable Network Graphics)

  • PNGJPEGなどの非可逆圧縮と違い、圧縮による劣化がない可逆圧縮形式です
  • PNGには、PNG-8、PNG-24、PNG-32と3つの種類があり、PNGはWebサイトで使われる一般的なラスター形式で透過処理が利用できる唯一の形式です
  • PNGの仕様で定義されていても、PhotoshopIllustratorなどのツールによって書き出しのオプション指定ができない場合があります
  • GIFは横方向のストライプのみに対して圧縮率が高くなりますが、PNGはフィルタ形式の選択により、縦方向のストライプの圧縮率を上げることもできます
Photoshopからの書き出しについて
  • PhotoshopではPNG書き出しの細かな指定ができません
  • Photoshopの「Webおよびデバイス用に保存」のダイアログではPNG-32のことをPNG-24と表記しています
  • Photoshopの場合、PNG-24(Photoshop上の表記)はPNG-32を指しています(オプションの透明部分からチェックを外すと本来のPNG-24となります)
JPEG形式が向いている用途
  • べた塗りの多い色数の限られた画像
  • 透明度(アルファチャネル)を指定したい画像