Webサイトで利用する画像は、GIFやJPEG、PNG・SV・TIFF・BMPなど、さまざまな画像形式があります。最近では、次世代の画像フォーマット「WebP」などが新しく登場しています。今回は、それぞれの画像の特徴と目的に応じた使い方、そしてネットで使用する際にベストな画像形式などをまとめているので、ぜひ参考にしてみてください！
画像形式と拡張子
パソコンで画像データを扱うとき、ファイル名の後ろに「.jpg」などの記号がついていますが、こちらが拡張子と呼ばれるものです。そのファイルがどの画像形式なのか、拡張子を見れば分かります。
・JPEG （ジェイペグ）
写真に最適な画像形式で、ファイルの拡張子は「.jpg」です。JPEGは、フルカラーである1,677万色を表現することができ、風景写真や繊細なグラデーションがある画像に適しています。JPEGには「不可逆圧縮（一度圧縮すると元のサイズには戻せない形式）」という特徴があります。これは、写真加工などで画質を下げて保存をしてしまうと、元の画質には戻せなくなるという特徴であり、画像加工の前に必ず元データをとっておく必要があります。
・GIF （ジフ）
主に簡易的なアニメーションや、画像の連続表示に最適な画像形式で、ファイルの拡張子は「.gif」です。
GIFの特徴はデータ容量が非常に小さく、256色までしか表現できないので、複雑な色の表現には適していませんが、1つのGIFファイルに複数の画像データを挿入し、簡易的なアニメーション動画を作ることが可能です。
・PNG （ピング）
PNGはGIFの代わりに開発された経緯があり、Webサイトのロゴやアイコンなどによく利用されています。ファイルの拡張子は「.png」です。JPEG同様1677万色を表現でき、可逆圧縮（圧縮しても元のサイズに戻せる形式）のため、保存を繰り返しても画質が劣化しません。RGB（PCの画面表示で使用される色の設定）のみ対応しており、CMY（印刷物に使用される色の設定）には対応していないので、印刷物の利用には不向きです。
・SVG （エスブイジー）
SVG（Scalable Vector Graphics)は、その名(Vector)のとおり、ベクタ形式のデータで、ファイルの拡張子は「.svg」です。JPEGやPNGは、ラスタ形式の画像ファイルで、点（pixel）で画像を表現しているため、拡大すると荒い画像になりますが、SVGはベクター形式なので、拡大縮小でデータが劣化することがありません。
※ベクター形式とは？
画像や文字などの情報を数値化して記録しており、ブラウザがその場で描画してくれます。解像度を気にすることも、拡大縮小でデータが劣化することもありません。
・TIF（ティフ）
印刷に向いている画像形式で、画像データには”タグ”と呼ばれる、詳細な画像情報が含まれており、再現性に優れた高解像度な画像です。ファイルの拡張子は「.tif」です。ファイルサイズが大きく、Webでは扱えない形式です。またJPEGと同じく「不可逆圧縮（一度圧縮すると元のサイズには戻せない形式）」ですが、非圧縮で保存が可能で、圧縮方法を選択できるといった特性を持ちあわせています。
・BMP （ビットマップ）
Windows OSのパソコンの標準的に使用されており、高画質で圧縮する為、画像が劣化することはありませんが、ファイルの容量は大きくなります。拡張子は「.bmp」です。現在では他に画像が劣化せずに圧縮出来る拡張子があるので、あえてBMP形式を採用する意味はなくなっています。
・WebP（ウェッピー）
Googleが開発した画像形式で、JPEGやPNGよりも2〜3割程度、データサイズが軽くなります。拡張子は「.webp」です。非可逆圧縮でありながら、透過も可能な所が特徴的です。Core Web Vitals を測定する、PageSpeed Insights（ページスピードインサイト）でもWebPが推奨されていますが、現時点では表示出来るOSやブラウザが限定されているので、表示できないブラウザに対してはJEPGやPNGでの代替画像の準備が必要となります。
Webサイトで利用する場合
Webサイトで利用する場合、写真とアイコンなど使用用途に合わせて扱う画像形式を変えます。近年では、SVGのブラウザ対応が追いついてきたので、多くのWebサイトで利用されており、レスポンシブサイトでは、ロゴやアイコンのサイズが拡大・縮小しても、綺麗に表示することができます。
・写真の場合→JPG
・ロゴ、アイコンの場合→PNG or SVG
・写真で透過させたい場合→png
・色数の少ないイラスト→ PNG or SVG
・簡易アニメーション→GIF
Webサイトで画像を扱う場合は、ファイルのサイズに注意しましょう。撮影したオリジナルの画像をそのままアップすると、容量が大きく、読み込みに時間がかかってしまい、ページスピードが遅くなってしまいますので、必ず適正なサイズにしてから利用しましょう。
まとめ
Webサイトでは適切な画像を選んで、ファイルサイズをなるべく軽くできるようにしましょう。画像を軽くすることにより、読み込みスピードの負担が軽減され、UXが向上します。Webサイトやネット関連でお困りごとがあれば、ぜひplus archにご相談ください。
