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

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

ファイル形式

Web画像

インターネット上で使える画像の種類は

  • JPEG (Joint Photograph Experts Group)
  • GIF (Graphics Interchange Format)
  • PNG (Portable Network Graphics)
です。


Web画像は最終的には、四角いビットマップデータ(GIF・JPEGPNG形式)として書き出します。

JPEG

  • Joint Photograph Experts Group
  • 拡張子「.jpg」


JPEGに適した画像内容
  • JPEG非可逆圧縮画像形式です
  • 24ビット(1670万色)まで扱うことができる
  • 多くの色数を必要とする写真などの表現に向いている
  • アイコンやアニメ調の平坦なイラストなどをJPEGで保存するとにじんだように汚くなる


JPEG不可逆圧縮
  • GIFがデータを“整理する”ことで圧縮するのに対し、JPEGはデータを“捨てる”ことで圧縮している
  • JPEGJPEGのまま圧縮し続けると、画質が非常に悪くなる

GIF

  • Graphics Interchange Format
  • 拡張子「.gif」


GIFに適した画像内容
  • GIFは最大8ビット(256色)までの色を扱うことのできる圧縮画像形式
  • 256色以上必要ないロゴ、リンクボタン、アイコン、アニメ調のイラストなど、 特に単色ベタ面を多く含む平坦な画像に向いている
  • 写真やスケッチなどの多くの色数を必要とする画像には不向き


GIFのファイル容量を抑えるには
  • GIFのファイル容量を抑えるには、色数を減らす
  • 水平方向(横方向)に同じ色が連続するよう、1ピクセル単位で画像を修正する
  1. 画像の面積を小さくする
  2. 使用する色数を減らす
  3. 使用する色数が同じでも、各単色面の面積が大きくなるようにする
  4. できるだけ水平方向(横方向)に同じ色のピクセルが連続するようにする
  5. GIF画像は1ピクセル単位で制作・修正するものだと覚悟する


GIFは透明色の指定ができる
  • 画像に使われている色のうちの1色を指定して透明にすることがでる
  • WEB上に掲載する画像は全て輪郭が四角形ですが、 GIFの背景を透明にすることで見かけ上は四角形以外の輪郭の画像が可能となる


GIFはアニメーションにできる
  • GIFアニメはコマ画像をパラパラマンガの要領で表示させる
  • 滑らかな動きを表現するのにはあまり向いていないが、アイコンやボタン画像などのアクセントの動きを加えるのには最適
  • 特別なプラグインは必要ない

PNG

  • Portable Network Graphic
  • 拡張子「.png
透過PNGの場合

PNG(ピング)の特徴
  • フルカラーにも8bitカラーにもすることができる
  • 圧縮率が高く同じ内容のGIF画像より10%〜30%程度ファイルサイズが小さくなる
  • 圧縮によってデータが捨てられてしまうことがない可逆圧縮形式を採用しているため高画質
  • 複数の透過色を指定できる


PNGの短所
  • フルカラーにするとJPEGよりファイルサイズが大きくなる
  • アニメーションにできない
  • ブラウザ側の対応が完全ではない

他の画像形式

この3種類以外でも、特殊なものに

  • SVG(Scalable Vector Graphics、XMLによって記述されたベクターグラフィック言語)
  • SWF(Shockwave Flash、フラッシュムービー形式:静止画、プラグインが必要)
  • PDF(Portable Document Format、閲覧用アプリが必要)
広告を非表示にする