JPG・・・写真、グラデーション GIF・・・単色ベタ面を多く含む平坦な画像

2015 年 4 月 PMC
WEB サイトで使用できる画像の種類
ブラウザ：標準サポート
★JPG･･･写真、グラデーション
JPEG は圧縮画像形式ですが、24 ビット（1670 万色）まで扱うことができます。このため、多くの色数を必要とする写真など
の表現に向いています。また、グラデーションのように色調が連続して変化する画像には JPEG が適しています。反対にアイコ
ンやアニメ調の平坦なイラストなどを JPEG で保存するとにじんだように汚くなります。
※JPEG は不可逆圧縮
GIF がデータを整理することで圧縮するのに対し、JPEG はデータを捨てることで圧縮しています。1 度圧縮したデータ
は元に戻すことができないので、JPEG 形式で圧縮率を上げて保存する際には、必ず元画像のバックアップを残しておくように
してください。
ブラウザ：標準サポート
★GIF･･･単色ベタ面を多く含む平坦な画像、アニメーション
GIF は最大 8 ビット（256 色）までの色を扱うことのできる圧縮画像形式です。256 色以上必要ないロゴ、リンクボタン、アイコン、
アニメ調のイラストなど、特に単色ベタ面を多く含む平坦な画像に向いています。逆に写真やスケッチなどの多くの色数を必
要とする画像には不向きです。コマ画像をパラパラマンガの要領で表示させることでアニメーションを作成することも可能。
※GIF は可逆圧縮
GIF は水平方向（横方向）に同じ色のピクセルが連続する箇所を、数値に置き換えることで圧縮しています。このため、縦ス
トライプと横ストライプの画像では横ストライプの画像の方がファイル容量が小さくなります。
★PNG･･･透過画像（不透明度 0∼100％対応）
ブラウザ：IE7+,IE8 にバグ有
PNG はフルカラーにも 8bit カラーにもすることができます。最大の特徴は複数の透過色を指定できるという点です。ただし、
アニメーションにできない、フルカラーにすると JPEG よりファイルサイズが大きくなる短所があり、すべての面において
PNG が勝っているというわけではありません。画像の内容やサイズに応じて GIF・JPEG 等と使い分けます。（可逆圧縮）
※使いどころに注意
IE8 において、透過 png を Javascript でフェードなどの透明度指定アニメーションを行うと、画像のフチが黒くなるバグがあ
ります。
★SVG･･･ベクタ画像、アニメーション
ブラウザ：IE9+,Android 2.3.x+
SVG（Scalable Vector Graphics）の大きな特徴は拡大縮小しても劣化しないベクタ形式であるという事です（上記３つはラス
タ形式）。XML で記述されているのでテキストエディタでも作成、編集ができ、ほかのデータを取り込むこともできやすく、
アニメーションタグ、JavaScript、CSS によるアニメーションが可能です。ベクタデータは大きさと容量が比例しませんので
表示のさせ方によっては、SVG の方が良いというわけではありません。
※使いどころに注意
IE9 以上、android2.3.x 以上にしか対応していません。ブラウザによって実装されていない機能（ﬁlter 等）もあります。また、
対応していないサーバーがあるのでサーバーの設定が必要な場合があります。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg xml:space="default" width="200" height="200">
<text x="70" y="50" font-size="20pt">
@IT
</text>
<ellipse cx="90" cy="110" rx="60" ry="40" ﬁll="lightgray"
stroke="blue" stroke-width="5"/>
</svg>
参考：http://htmq.com/gazo/index.shtml

Download Report