とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

webサイトの画像の形式。png、jpg、svg...使い分けはどうするのが正解か

webサイトの画像の形式。png、jpg、svg...使い分けはどうするのが正解か

webサイトの画像はさまざまな形式で

掲載されています。

一般的なものとしては、PNG、JPEG、GIF、SVG。

そのほか最近では APNG、WebPという画像形式までてきました。

 

それぞれの使い分け、おさらいしましょう。

詳細は本記事の最下部に掲載した参考サイトを

見ていただくのが良いと思いますが、ざっくり

まとめます。

 

PNG

写真の切り抜き、色数が多いイラスト。透過が必要な画像で使用。 

JPEG

写真で使用。 

GIF

256色以下のアイコン、ロゴなどのイラストで使用。

簡易なアニメーション画像で使用。 

SVG

ロゴやアイコン、パス図形的なイラストで使用。

ベクターデータなので拡大縮小しても劣化しない。

解像度に依存せずに劣化させたくない箇所で使用。

CSSやJavaScriptでアニメーションつけたりも。

APNG

アニメーションするPNG

Mozillaが開発した画像アニメーションのフォーマット。

LINEのアニメーションスタンプに使用されている。 

WebP

Googleが開発した画像フォーマット。アニメーション可能。

 

以上です。

 

ちなみにAPNGとWebPとは、サポートブラウザから

考えても、APNGに軍配があがりそうですね。

まだ使う機会はそれほどないかもしれませんが、

頭にいれておくと良いと思います。

 

参考サイト:

webtan.impress.co.jp

www.asobou.co.jp

grow-group.jp

www.vanfu-vts.jp

liqd.jp

ics.media

 

www.webtech.co.jp

qiita.com