かんたんで複雑な、ウェブサービスの作り方を紐解くブログ

jpg / png /svg 画像にはどのファイルタイプを使うべきか?

Design
2021/08/17

ウェブサービスに訪れたユーザーの第一印象に大きく影響する画像。画像には写真、アイコン、ロゴ、イラスト、アニメーションなどさまざまなタイプが含まれます。 そしてこれら画像をウェブサービス内部に掲載していく時に重要となるのが、そのファイル形式です。「JPG / PNG / GIF /SVG」などのファイル形式があり、どのような画像にどのファイル形式を使うべきか迷う時もあるかもしれません。 今回のブログでは、各ファイル形式の特徴と、実際にどれを使うべきか考えてみましょう。

各ファイル形式の特徴

まずは代表的な画像形式である「JPG / PNG / GIF /SVG」のメリット・デメリットをまとめてみます。 [JPGファイル] 人の目には影響の無い範囲で画像の色味を圧縮しつつ、色味の美しい画像ファイルを生成できるファイル形式です。 一方で、透明にはできず背景には白色が適用されること、また繰り返し保存すると画質が低下することなどが使用時のデメリットになります。 [GIFファイル] 1ピクセルに8ビットまでしか利用できないため、結果的に256色のみしか利用できません。また、GIFを進化させた形式としてPNGが登場したことから、現在では基本的に使われなくなってきています。 ただ、GIFでは動くアニメーション画像を簡易に生成できるため、アニメーション画像利用時にのみ、今も広く利用されています。 [PNGファイル] ウェブサイトに特化しているイメージ圧縮フォーマットです。「1ピクセルに8ビットまで利用可能なPNG-8」「1ピクセルに24ビットまで利用可能なPNG-24」の2つの形式が存在し、求める画質やファイルサイズに合わせて最適な手法を選択することができます。 また背景を透過させることができるため、一部透明な部分を持つ画像などにも利用されます。 [SVGファイル] 他の画像が「ピクセルに基づくビットマップ画像」であるのに対して、SVGは「ベクター形式のファイル」となります。 SVGはXML形式で画像の中身が定義されており、ピクセルに紐付かないため、拡大したり大きなサイズで利用しても、画質が乱れることがありません。加えてコードで書かれていることから、ロゴやアイコンなどのファイルサイズも、小さくすることができます。 また、アニメーション画像に対しても利用可能です。 ただ、写真はサポートしておらず利用できません。

最適なファイルタイプ

特徴やメリット・デメリットがわかった上で、次は具体的な画像を元に、どのファイルタイプを使うべきかをまとめてみます。 [写真] 写真の場合は「JPG」一択となります。人の目には分からないレベルで色味を圧縮できること、結果として色彩豊かな写真をファイルサイズを落とした上でウェブサービスに掲載できるため、JPGがベストとなります。 [ロゴ / アイコン] アイコンを利用する場合は、ベクター形式にてコードとして保存されているSVGがベストになります。レスポンシブにより画像を拡大したり、Retinaディスプレイなど解像度の高いディスプレイの場合にも、画質を落とすことなく利用できます。 [イラスト] イラストに関しても、ロゴやアイコンと同様にSVGがベストとなります。また、SVGであれば画像にアニメーションを付与することができるため、アニメーションを含む画像にも最適です。 [アップロード画像] ここまでSVGの良さが際立っていますが、ユーザーがウェブサイトを訪れ自身の画像をアップロードする際などには、SVGは利用できません。理由としてはSVGがコードで書かれているため、Javascriptなどを埋め込むことができ、結果としてセキュリティ上の問題が発生してしまうためです。 そのため、ウェブサービスなどでユーザーが自由に画像をアップロードする場合には「JPG / PNG / GIF」等のみとするべきです。

最後に感想として

いかがだったでしょうか。掲載する画像一つをとっても複数のファイル形式があり、利用する画像に応じて、その中から最適な画像を利用することが求められます。 特にレスポンシブでの画像の拡大縮小、またRetinaディスプレイの浸透により、現在ではSVGの利用範囲も増えてきているといえます。 読んでくださった方、ありがとうございます。