Webで使う画像ファイルについて

先日、長女の運動会で日焼け止めを塗り忘れ、手の甲だけ日焼けしている池島です。

ブラウザが年々進化して、UIが向上したり、表示が速くなったりしていますが、進化した機能の中に、表示できる画像ファイルの形式が増えたことがあります。
使える形式が増えたことで、どれを使うか迷うような場面も出てきました。

使える画像のファイル形式と、それぞれの利点、欠点などをまとめてみます。

GIF

初期から使える形式で、安心して使えます。
近年はPNGの方がよく使われるようになり、出番は少なくなりましたが、アニメーテッドGIFにできるので、ローディング中のアニメーションアイコンに使われたりしています。

○ 古いブラウザでも表示できる。
○ ちょっとしたアニメーションが作れる。
× 背景を透過させる場合は、指定したマットカラーが透明部分に適用され、背景色がマットカラーと違う場合はギザギザの縁が見えてしまう。
× 256色に限定される。
× 色数、ピクセル数が多いと、ファイルサイズが大きくなりがち。

JPEG

写真などに使うフォーマットですね。
これも、古くから使われている安心感があります。
デジカメの標準保存フォーマットになっていることも多いので、撮影してそのまま使ったりもできます（基本的に、サイズ調整やレタッチをしますが。）

○ 古いブラウザでも表示できる。
○ 写真で使うなら、ほぼこれしかない。
× 背景を透過できない。
× ファイルサイズを落としすぎると、ノイズが発生する。画質とファイルサイズが折り合うところを見極めないといけない。

PNG

過去、GIFのライセンス問題があった時期に、急速に普及したような気がします。
現在では、ほとんどの環境・ブラウザで利用できます。
アニメーションPNG（APNG）もありますが、対応ブラウザが少なく、まだ一般的ではありません。

PNG8

ほぼ、GIFと同じ特徴を持っています。
現在は、GIFよりもPNGを使うことが多いですね。

○ GIFより小さいファイルサイズで書き出せることが多い。
× アニメーションPNGに対応した環境が少ないため、静止画でしか利用できない。

PNG24

○ フルカラー対応。
○ アルファチャンネルをサポートしている。
× 画質や色数を調整できないので、ファイルサイズが大きくなりやすい。

SVG

最新のブラウザなら、全てサポートしている状況になりました。
アイコンやロゴなど、ベクトルで描いているものは、全部SVGにしてしまいたいところですが、なかなかそういうわけにもいきませんね。

○ ベクトルデータをそのまま扱えるので、拡大・縮小したり高解像度ディスプレイでもきれいに表示できる。そのため、解像度別にファイルを用意する必要がない。
○ XMLデータとして、インラインに直接書き込める。
○ インラインで書いた場合、CSSやJavascriptで色を変えたりアニメーションさせたりできる。
○ フルカラー対応。
× インラインで書き込む場合のXMLが複雑で、解読し難い。
× 全ての機能がサポートされているブラウザが、まだ少ない。
× 写真のような画像は扱えない。

アイコンフォント

Webフォントアイコンと言ったりもします。
画像のファイル形式ではありませんが、アイコンなどの簡易な図柄を表示する手段として、併記します。

SVGからアイコンフォントを生成できるジェネレーターのサイトもあり、GulpやGruntなどを使って自動で生成する方法もあります。
繰り返し使うアイコンや矢印、テキストと並べて利用する場合などに利用するといいと思います。

○ サイズや色をCSSで設定でき、フォーカス時などの色・サイズ変更も簡単。
○ 拡大・縮小してもきれいに表示できる。
○ テキストとベースラインを揃えやすい。
× 単色のみ。
× SVGからフォントに変換したり、CSSでフォントの設定をしたりと、使うまでの手順が多い。

Flash

HTML5 + CSS3の普及で、すっかり陰に潜んでしまいました。
どこもかしこもFlashが使われ、勢いのあった時代が懐かしいです。
Androidのブラウザも、標準対応しなくなってしまいました。

○ アニメーションが自由自在で、動画の埋め込みも簡単にできる。
○ 複雑なスクリプトを組むことができ、データベースと連携させたり、動的なコンテンツ作成が可能。
× プラグインが必要。スマートフォンはほとんど対応していない。
× 保守にコストがかかり、再利用しにくい。
× 作成ツールやActionScriptを使えるようになるまでの学習コストがかかる。

どのファイル形式にしようか迷うとき

Web制作に携わっているとき、どのファイル形式にしようか迷うことが多々あります。
いろいろな考え方があり、プロジェクトごとの違いもあると思いますが、個人的な見解を書いておきます。

GIF or PNG8

今時は、PNGを使うのが一般的。
ファイルサイズの制限が厳しい場合を除き、PNG24で書き出した方が良さそう。

PNG8 or PNG24

背景色が固定で変化しない、可能な限りファイルサイズを落としたい、などの理由がない限りはPNG24にしておいた方が、汎用性が高く無難。

JPEG or PNG24

写真の背景を透過させたり、一部を透明にしたいなど、アルファチャンネルが必要ならPNG24。そうでないならJPEG。

PNG or SVG

ベクトルデータが元になっているなら、ぜひSVGを使いたい。
古いブラウザもターゲットになっているなら、PNGを解像度別に用意する。

SVG or アイコンフォント

繰り返し使うアイコンや、テキストと混在させて使うような場合はアイコンフォント。挿し絵や図表のような使い方ならSVG。

まとめ

Webブラウザでできることが増えて、嬉しい反面、置いて行かれまいと必死について行っています。
昔は、できないことが多くていろんな裏技を使ったりもしたけれど、あまり難しいこともなくてよかったなあ・・・などと思ってはいけませんね。

SVGはできることが多く、可能性が広がります。その機能を使いこなして、ステキなWebページ制作に活かしていきたいです。

デロイト トーマツ ウェブサービス株式会社(DWS)

デロイト トーマツ ウェブサービス株式会社はアマゾン ウェブ サービス（AWS）に 専門性や実績を認定された公式パートナーです。