【技術・テクノロジー】

今こそ押さえておきたい!HTML5時代の画像形式とは?

  1. html5
  2. SVG
  3. 画像
今こそ押さえておきたい!HTML5時代の画像形式とは?

こんにちは。フロントエンドエンジニアのaxcelworkです。
三度目ましての方も、そうでない方もよろしくおねがいします。

前回の記事の最後で画像について考えると言ったな。







あれはウソだ。







いや、言い過ぎた。すまない。

Webサイト制作を行う上で、今こそ押さえておきたいHTML5時代の画像(静止画)の形式についてまとめていきたいと思います。ばぶぅ。

【速報】押さえておきたい画像の形式

それぞれの画像形式、それぞれの特徴

まずは画像形式についておさらいをしてみましょう。
現在使われているのはJPEG・GIF・PNGのおおむね3つです。というかブラウザ対応してるのが上記の形式なんですね。
TTFやBMPもありますが、使いづらいので淘汰されました。

最も使われている(だろう)JPEG形式

ジェイペグ(Joint Photographic Experts Groupの略です)と呼びます。
親しみを込めてペクジェと呼んでいる方もいます。

次に使われている(だろう)GIF形式

ジフ(Graphics Interchange Formatの略です)と呼びます。
ギフと呼ばれたり、ジフと呼ばれたりしていましいたが、ちょっと前に ジフ で落ち着きました。
過去に特許関連で揉めていましたが、現在は自由に扱えます。

GIFの代替手段として開発されたPNG形式

ピング(Portable NetWork Graphicsの略です)と呼びます。
GIFに特許問題があったため、置き換わる画像形式としてW3Cが開発・策定を行いました。

PNG形式にはPNG-8とPNG-24の2つがあります。

新たな画像形式、SVG形式

上述の3つ以外にも、新たにSVG形式があります。
エスブイジー(Scalable Vector Graphicsの略です)と呼びます。
SVGは2001年9月から存在してはいましたが、各ブラウザで対応が進みようやく表舞台に出てきたところです。

SVGはInternet Explorer 9以上、最新のモダンブラウザで表示可能です。
最近の事例ではロゴをSVGにしている企業が多いです

ベクター形式と見慣れない言葉が出てましたね。
少し寄り道をしましょうか。

画像形式にはラスター形式とベクター形式があります。

試しに適当なSVGをテキストエディタ(メモ帳)で開いてみてください、文字列が並んでいますよね。
SVGは「アンカー」を文字列として記録しています。極論テキスト情報なので軽い場合が多いです。同じ色数のGIF・PNGと比べると圧倒的に軽いんじゃないでしょうか。

【朗報】これからの時代はこれで間違いない!

アイコン・ロゴなど写真じゃない画像はSVG!
現在のレスポンシブデザインとスマホファーストを考慮すると、拡大縮小が必然的に発生するので、写真以外の画像はすべてSVGにしたいところです。
CSS3やアイコンフォントがあるので、ある程度の装飾は画像を使わなくても表現できます。
ただし、クロスブラウザやレギュレーションがある場合はPNG形式を使用します。
SVGが使えない場合はPNG!
所感ですが、最近はほとんど何もかもPNGにする傾向があります。
約1670万色+透過なので、写真だろうがアイコンだろうがすべてPNGで対応。
GIF形式にするメリットは薄れているので、GIFは使わないかなと思います。特にレギュレーションで縛られてない限りですが。
大きい写真はJPEG!
バカでかい写真画像はJPEGが安定しています。
大きいPNGだとファイルサイズも比例して大きくなっていくので、大きい写真はJPEGと覚えておきましょう。

【悲報】容量軽くしてとディレクターに言われたんだが……

安心してください。圧縮ツール揃ってますよ。

何でもかんでもPNG。荒れないし良いと思います。でも、ファイルサイズが大きいんですよね。

「このJPEG見てくれ。こいつをどう思う?」
「すごく……大きい……です。でもファイルサイズも大きすぎなので軽くして下さい。」

なんていうことありますね。ファイルサイズが大きいままだとサーバにもブラウザにも負担をかけてしまいます。
PhotoShopから書き出してもファイルサイズが減らない……ありますあります。

圧縮ツールを使うことで、画質は(ほぼ)そのままファイルサイズを軽くすることが可能です。Compressor.io が一時期有名でしたね。

これら圧縮ツールは不要な情報(メタ情報)や、近い色同士が隣接している場合ドットを統合したりするなどして、容量の削減をしています。

圧縮ツールは様々なものが出ているので適材適所で使用しましょう。

代表的なWebサービス
  • Compressor.io
  • JPEGmini
  • TinyPNG

まとめ

ということでHTML5時代の画像について特徴をまとめました。
SVGの台頭により、画像形式の縮図が変わってきそうです。
これからもスマホファーストは加速していくので、画像の拡大縮小は避けて通ることができません。
今はすべてSVGにしているところは少ないですが、これからはSVG時代の幕開けだと思います!