前回の拡張子の解説では、印刷物に適した拡張子をご紹介させていただきました。
今回はWeb表示に適した拡張子をご紹介していきたいと思います。
Webサイトやブログに画像を載せる場合はデータサイズが気になりますよね。
一般的な画像形式といえばJPEGやPNGが代表的ですが、最近ではSVGやWebPも選択肢に入ってくるようになりました。
様々な画像形式がある中で、何を選べば軽くてきれいに表示されるのでしょうか。
今回はそれぞれについて詳しくご紹介していきます。

Web表示に適した拡張子とその特徴

JPEG ：ジェイペグ

印刷物に適した拡張子の時にもご紹介したJEPG。
印刷物での使用の注意点もいくつかありましたよね。
JEPGは写真画像に適しているので、Web表示にも向いている拡張子と言えます。
JPEGは非常にポピュラーな画像形式の1つで、Web黎明期から存在している画像形式です。OSやブラウザに依らず表示サポートがされているので、画像形式の選択肢としてまず間違いありません。JPGと記載されている場合もありますが、違いはありません。 

色数はフルカラーで対応していて、写真やグラデーションの表示に向いています。 
メリットやデメリットは前回の拡張子の記事をご覧ください！

gif：ジフ

「gif」はGIF形式と呼ばれる、最大256色まで保存可能な画像形式のファイルに付けられる拡張子です。主にイラストやアイコンなど、インターネット上で広く使われています。
静止画用途としては色数の少ないイラストやボタン等に向いていますが、レスポンシブデザイン主流の現在では、ボタンはCSSで装飾した方が手間が無い点やWebフォントの登場、後継として開発されたPNGの使い勝手の良さもあり、使い所が限定されてきた感のある画像形式でもあります。 256色以下のイラストやロゴマークなどであれば印刷でも使われることがあります。JPEGとの違いで言うと、グラデーションが変化するような画像はJPEGのほうが得意で、色の境目がはっきりしているような画像はGIFのほうがきれいに印刷されます。
アニメーションはGIFアニメ集やTwitterでも目にする事ができ、現在でもよく利用されています。

●メリット：透明が使用可能なこと、GIFアニメと呼ばれるアニメーションにも使えること、シンプルな画像の場合にファイルサイズをコンパクトにできること

●デメリット：使える色数が少ないため色数の多い写真やイラストなどの階調の表現では劣る点。画質が粗くなり印刷には不向き。

png：ピング

「png」は、PNG形式と呼ばれるフルカラーに対応した画像形式のファイルにつけられる拡張子のことです。JPEG形式とは異なり、圧縮をした後でもデータを復元できる「可逆圧縮」の形式です。PNGは、GIFの代わりに開発された経緯があり、Webサイトのロゴやアイコンなどでよく利用されています。ファイルの拡張子は「.png」になります。
PNGは色数の少ないイラストから写真まで対応できる高い汎用性があり、アニメーションを除けばGIFのほぼ上位互換と言って良い画像形式です。ただデータ容量がやや重めなので、その点注意が必要です。
JPEG同様1677万色を表現でき、可逆圧縮（圧縮しても元のサイズに戻せる形式）のため、保存を繰り返しても画質が劣化しません。RGB（PCの画面表示で使用される色の設定）のみ対応しており、CMYK（印刷物に使用される色の設定）には対応していません。印刷物の利用には不向きです。

●メリット：画質の劣化が全くないことや、透明はもちろん半透明機能も使える。切り抜き加工した画像としてWebで使用できる。

●デメリット：JPEG形式よりもファイルの容量が大きくなってしまうことがある。

PNG形式はインターネットで使われることを目的とした拡張子であるため、印刷には不向きです。印刷所によっては、PNG形式に対応していなかったり、推奨していなかったりすることもあります。

WebP（ウェッピー）

Googleが開発した画像形式で、JPEGやPNGよりも2〜3割程度データサイズが軽くなるようです。拡張子は「.webp」になります。
非可逆圧縮でありながら透過も可能な所が特徴的です。

Core Web Vitals を測定する、PageSpeed Insights（ページスピードインサイト）でも、WebPが推奨されていますが、現時点で表示出来るOSやブラウザが限定されており、表示できないブラウザに対してはJEPGやPNGでの代替画像の準備が必要になります。
Core Web Vitals の背景もあり、表示速度が重要視される近頃ではデータ容量が軽い点は非常に魅力的です。 
ただ、表示出来るOSやブラウザが限定的である点や書き出しに手間が掛かる点が課題です。先程記述した様に、表示できないブラウザに対してはJEPGやPNGでの代替画像の準備が必要になるなど運用にも負荷が掛かるので、導入の際は良く検討する必要がありそうです。 

●メリット：データが軽い

●デメリット：書き出しに手間がかかる。表示できないブラウザがある。

SVG（エスブイジー） 

このSVGはベクター形式という、点（座標）と線を結んだ計算式によって画像を描画しています。これまで紹介してきたJPEGを初めとする画像はビットマップ形式と呼ばれる、一言で言えば高精度の点画のようなものでした。 

点（座標）と線で描画されているので滑らかな曲線が表現できる点や拡大縮小を行っても品質やデータ容量が変わらない点（レスポンシブデザインと親和性が高い）がメリットですが、複雑すぎるイラストはJPEGやPNGで表現したほうが良い（軽い）場合もあるので見極めが必要です。つまり、ロゴやアイコンといった簡易なイラストやページ上でサイズ感が激しく変わるイラストにオススメです。

 

Web表示に適した拡張子とその特徴をご紹介しました。
お分かりいただけましたでしょうか？
説明が長くなってしまったので、Webサイトで利用する場合について簡単にまとめなおしてみました！

Webサイトで利用する場合

Webサイトで利用する場合は、写真とアイコンなどで扱う画像形式を変えることもあります。
近年は、SVGのブラウザ対応が追いついてきたので、多くのWebサイトでの利用されています。
レスポンシブサイトでは、ロゴやアイコンのサイズが拡大縮小しても、綺麗に表示することができます。

・写真の場合 JPG
・ロゴ、アイコンの場合 PNG or SVG
・写真で透過させたい場合 PNG
・色数の少ないイラスト PNG or SVG
・簡易アニメーション GIF

Webサイトで画像を扱う場合は、ファイルサイズに注意しましょう。
撮影したオリジナルの画像をそのままアップすると、容量が大きく読み込みに時間がかかるので、ページスピードが遅くなってしまいます。必ず、適正なサイズにしてから利用していきましょう。
あわせて、Web表示に不向きな拡張子ご紹介します！

ブラウザで表示できないものや利用に向いていない画像形式 

パソコンやスマートフォンでは表示出来ますが、ブラウザでは表示できない画像形式や、非圧縮な為にデータ容量が大きく、利用に向いていない画像形式もあるので要注意です。 

代表例として下記が挙げられますが、基本的に見慣れない拡張子の付いた画像形式はWebサイトでは使用せず、JPEGやPNGなどの一般的な画像形式に変換して掲載したほうがいい様です。 

• BMP（ビットマップ）→非圧縮の為にデータ容量が大きい 
• TIFF（ティフ）→Safari以外の主要ブラウザで表示できず、データ容量も大きい
• HEIF（ヒーフ）→主要ブラウザで表示できない 

ちなみに最後のHEIFはiPhoneで撮影した写真の画像形式（拡張子は.heic）です。 
スマホだとあまり拡張子は意識しませんが、独特な画像形式になっていますので要注意ですね。

まとめ

前回の印刷物に適した拡張子に続き今回はWeb表示に適した拡張子をご紹介させていただきました。
印刷物もWebでも用途に合わせた拡張子を選択することが重要ですね！
特にWebサイトでは、適切な画像を選び、ファイルサイズをなるべく軽くできるようにしていきましょう！

Webサイトについてのご相談はこちら