JPG・GIF・PNG・SVG｜WEB制作で使用する画像の拡張子

ホームページで使用する画像の処理・拡張子

こんにちは、金沢でホームページ制作を行っています、ソラノデザインの角田です。

今回はホームページ制作における、「画像」についてのあれこれを記事にまとめました！

そもそも拡張子って？

拡張子とは、「ファイルの種類」を差別化するための物です。

画像データの末尾に付与されています。

たとえば「sample_image.jpg」の拡張子は「jpg」。

「sample_music.mp3」の拡張子は「mp3」….といった具合ですね。

ホームページ制作で使用する画像の拡張子

まず、前提として、ホームページで使用する画像の拡張子には下記の4つがあります。

• jpeg（ジェイペグ）
• gif（ジフ）
• png（ピング）
• svg（エスブイジー）

これらの画像形式にはそれぞれ特徴があります。

背景が透明かどうか、パスで描画できるか….などですね。

画像の形式を適切な物にする事で、ホームページの見た目はもちろん、表示速度などのパフォーマンスも向上します。

では、上記4つの拡張子について、比較的よく使用される拡張子順に、特徴を見ていきましょう！

JPEGとPNGについて

JPEGとPNGは主に「写真」に使用します。イラストではなく「写真」ですね。

ちなみに「JPEG」と「JPG」はどちらも機能面は同じですので、本記事では「JPEG」と表記させていただきます！

JPEGとPNGはフルカラーの約1677万カラーで画像を表現しているため、写真のような繊細な画像データをホームページに使用する際、この2つの拡張子が選択肢に上がります。

実際に制作に使われるのはJPEGが多いですね。

理由としては、ファイルサイズが「JPEG」のほうが軽いからです。

しかしJPEGはPNGとは違い、「不可逆圧縮」という特徴があります。

これは簡単に言うと、「一度画像サイズを小さく圧縮してしまうと元に戻せない」という意味です。

しかしホームページでは、何度も画像サイズを変更することは滅多にないので、JPEGが採用される傾向にあります。

もちろんリサイズや圧縮する場合、「元データ」の管理は必要です。

一般のホームページ制作会社であれば、制作に使う画像と元画像は別ファイルに保管しているはずですので、制作を依頼される方はご安心ください。

PNGについて

ではPNGはどういったタイミングで使用すればいいのでしょう？

実はPNGには、背景が透明で合ったり、半透明のものを表現できるんです。

例をあげてみましょう。

まず、↑が「JPEG」のサンプルです。画像はきれいに表示できますが、透明・半透明は不可能です。

そして↑が、「PNG」のサンプルです。

今回JPEGの例ではグレーで塗り潰されていた部分を、透明にしてみました。

例えば背景色を赤にした場合、PNGは、↓のようになります。

右下の部分が透明になっているのが視覚的にもわかりやすいはずです。

PNGはこういったタイミングで使うんですね。

GIFの使い方

GIFは256色でしか表現できない画像形式です。

しかしその分ファイルサイズは軽く済むので、シンプルなイラストやアイコンで、256色での表現で事足りる画像に使用されます。

そしてPNGと同じで、背景の透明化にも対応しています。

GIFならではの特徴といえば、「GIFアニメーション」でしょう。

GIFは簡単なアニメーションを画像内で表現する事ができるのです。

実際にサンプルを見てみましょう。他サイトから拝借しました、フリー素材のGIFアニメーションです。

複雑なアニメーションの場合はSVGや動画を使用した方が無難ですが、

こういったシンプルなアニメーションはGIFで表現するのがベストですね。

SVGについて

最後にSVGについて紹介します。

SVGは「ベクターデータ」と呼ばれる形式で、他の拡張子とは特徴が大きく違います。

大きな特徴としては、

・パスで描画されている

・拡大 / 縮小しても画像がぼやけない

・写真には使えないが、イラストやアイコンに使える

の３つでしょうか。

「どういった角度で、どういった色の線を、どういった塗り潰しを」といったデータが保存されている「SVG」では、「画像」が保存されているデータと言うよりは、「形のデータ」が保存されています。

少しわかりづらいですが、画像を表現するための設計書が保存されているようなイメージです。

スマートフォンでの拡大・縮小を行っても、どれだけ画素数が高いPCでも表示が乱れないため、アイコンやイラストは近年SVGを使用する事が主流です。

ソラノデザインのアイコン（空色の雲のアイコン）もSVGで出力していますね。

例えば、下の２つの画像は拡大率が違うだけの同じ画像ですが、画像がぼやけたりはしていません。

こういった画像の場合に、SVGが使えるんですね。

またこちらは次回別途記事にまとめますが、SVGには「SVGアニメーション」といった、GIFアニメーションとは別のアニメーション表現があります。

以上、ホームページ制作で使用する画像の拡張子について、簡単な紹介でしたが、

さまざまな画像形式をもっと深く学習する事で、よりよいホームページ制作を実現できます。

ホームページにおいて、「画像」の持つ力は大きいです。

デザインやプログラミングだけでなく、「画像」にもこだわり、より良いホームページ制作を実現しましょう！