今さら聞けない？ ホームページ制作に使用する画像の種類

みなさんはホームページにどんな種類の画像を使用しているか気にしたことはありますか？
普段はあまり意識していない方も多いかもしれませんが、一口に画像といっても様々な形式があります。

以前はホームページで使う画像形式といえば、JPEG、GIF、PNGが中心でした。
しかし現在では、WebP、SVG、AVIF、HEICなど、耳にする画像形式も増えてきました。

今回は、現在のホームページ制作で使用される主な画像形式と、その特徴・使い分けについて解説したいと思います。

画像ファイルというと、JPEG、PNG、GIF、SVG、WebP、AVIF、HEIC、BMP、TIFFなど、いろいろな形式があります。

このうち、ホームページ制作でよく使用されるのは、主に以下の形式です。

• JPEG
• PNG
• GIF
• SVG
• WebP
• AVIF

一方で、BMPやTIFFはファイルサイズが大きくなりやすく、Webブラウザでの表示にも向いていないため、通常のホームページ制作ではほとんど使用しません。

また、iPhoneなどで撮影した写真に使われることがあるHEICという形式もありますが、すべてのブラウザで安心して表示できる形式ではありません。
そのため、ホームページに掲載する場合はJPEGやWebPなどに変換して使用するのが無難です。

パソコンに入っている画像がどの画像形式にあたるかは、拡張子を見ることで判断できます。
拡張子とは、ファイル名の一番最後にある「.jpg」や「.png」のようなドット以降の文字列のことです。WindowsやMacの設定によっては拡張子が表示されない場合がありますので、その場合は設定を変更して確認してみましょう。

JPEG（ジェイペグ）の特徴

JPEGとはJoint Photographic Experts Groupの略で、拡張子は「.jpg」または「.jpeg」です。
スマートフォンやデジカメで撮影した写真によく使われるため、なじみのある方も多い形式だと思います。

特徴としては

• 写真の表示に向いている
• フルカラーの画像を扱える
• 不可逆圧縮のため、保存を繰り返すと画質が劣化する場合がある
• 透過には対応していない

などがあります。

写真をきれいに表示しながら、ファイルサイズもある程度小さくできるため、商品写真、人物写真、風景写真などに向いています。

ただし、JPEGは不可逆圧縮という方式で画像を圧縮しているため、何度も保存しなおすと少しずつ画質が悪くなる場合があります。
そのため、画像加工を行う際は元画像を残しておくと安心です。

現在ではWebPやAVIFといった、JPEGよりも軽量化しやすい形式も使われるようになっていますが、JPEGは対応環境が非常に広く、今でもWeb制作でよく使われる基本的な画像形式です。

PNG（ピング）の特徴

PNGとはPortable Network Graphicsの略で、拡張子は「.png」です。
Web上での使用を目的に開発された画像形式で、現在でも多くのホームページで使われています。

特徴としては

• 透過（透明）を使用できる
• 可逆圧縮のため、保存を繰り返しても画質が劣化しない
• 文字やロゴ、図版などが比較的きれいに表示できる
• 写真に使うとファイルサイズが大きくなりやすい

などがあります。

PNGは、ロゴ、アイコン、スクリーンショット、図表、背景を透過させたい画像などに向いています。

JPEGと違って透過を扱えるため、背景になじませたいロゴ画像などでよく使用されます。
一方で、写真をPNGで保存するとファイルサイズが大きくなりやすいため、写真にはJPEGやWebPを使用することが多いです。

GIF（ジフ）の特徴

GIFとはGraphics Interchange Formatの略で、拡張子は「.gif」です。
昔からWebで使われている画像形式のひとつです。

特徴としては

• 最大256色まで扱える
• 透過を使用できる
• アニメーションを扱える
• 写真のような色数の多い画像には向いていない

などがあります。

GIFは、簡単なアニメーション画像として使われることが多い形式です。
いわゆる「動く画像」として見かけるGIFアニメが代表的です。

ただし、現在ではアニメーション表現に動画やWebP、Lottieなどを使うケースも増えています。
そのため、GIFは今でも使えますが、ファイルサイズや画質を考えると、必ずしも最適とは限りません。

SVG（エスブイジー）の特徴

SVGとはScalable Vector Graphicsの略で、拡張子は「.svg」です。
JPEGやPNGのような「点の集まり」で画像を表現する形式とは異なり、線や図形などの情報で画像を表現するベクター形式です。

特徴としては

• 拡大・縮小しても画質が劣化しない
• ロゴやアイコン、イラストに向いている
• CSSやJavaScriptで色や動きを制御できる場合がある
• 写真のような複雑な画像には向いていない

などがあります。

SVGは、会社ロゴ、アイコン、シンプルな図形、地図、チャートなどに向いています。

特にスマートフォンや高解像度ディスプレイでは、画像を拡大してもぼやけにくいというメリットがあります。
レスポンシブデザインとの相性もよく、現在のWeb制作ではよく使われる形式です。

ただし、SVGはコードとして記述できる画像形式でもあるため、外部から入手したSVGをそのまま使用する場合は注意が必要です。
信頼できる素材を使用し、必要に応じて不要なコードを削除してから使うと安心です。

WebP（ウェッピー）の特徴

WebPとはGoogleが開発した画像形式で、拡張子は「.webp」です。
現在では主要なブラウザで対応が進み、ホームページ制作でもよく使われるようになりました。

特徴としては

• JPEGやPNGよりもファイルサイズを小さくしやすい
• 写真にもイラストにも使いやすい
• 透過に対応している
• アニメーションにも対応している
• 古い環境では表示できない場合がある

などがあります。

WebPは、現在のWeb制作では非常に使いやすい画像形式です。
写真であればJPEGより軽く、透過画像であればPNGより軽くできる場合があります。

ページの表示速度を改善したい場合、まず検討したい形式のひとつです。
WordPressでもWebPに対応している環境が増えており、画像軽量化の選択肢として一般的になってきました。

ただし、古いブラウザや一部のシステムでは対応していない場合もあります。
幅広い環境を想定する場合は、JPEGやPNGを代替画像として用意する方法もあります。

AVIF（エーブイアイエフ）の特徴

AVIFとはAV1 Image File Formatの略で、拡張子は「.avif」です。
比較的新しい画像形式で、WebPよりもさらに高い圧縮率が期待できる形式です。

特徴としては

• 非常にファイルサイズを小さくしやすい
• 画質を保ちながら軽量化しやすい
• 透過に対応している
• HDRなどの表現にも対応している
• 画像の書き出しや変換に時間がかかる場合がある
• 古い環境では表示できない場合がある

などがあります。

AVIFは、表示速度を重視するサイトや、大量の画像を扱うサイトでは有力な選択肢です。
ただし、WebPに比べると制作ツールや運用環境によって扱いやすさに差があります。

そのため、すべての画像をいきなりAVIFにするというよりは、WebPとあわせて検討したり、対応ブラウザにはAVIF、非対応ブラウザにはWebPやJPEGを表示するといった使い方が現実的です。

HEIC（ヒーク／ヘイク）の特徴

HEICとはHigh Efficiency Image Containerの略で、拡張子は「.heic」です。
iPhoneやiPadで写真を撮影した際に、この形式で保存されることがあります。

特徴としては

• JPEGよりも少ない容量で高画質を保ちやすい
• スマートフォンではよく使われる
• Webブラウザでの対応は限定的
• ホームページにそのまま掲載するには向いていない

などがあります。

HEICはスマートフォン内で写真を保存する形式としては便利ですが、ホームページに掲載する画像形式としてはまだ扱いに注意が必要です。

お客様から写真を送っていただいた際に「パソコンで開けない」「ホームページにアップロードできない」といったケースでは、このHEIC形式であることがあります。
その場合はJPEGやWebPなどに変換してから使用するとよいでしょう。

ホームページ制作ではどう使い分ければよいのか？

以上、簡単ですが、現在のホームページ制作で使用される主な画像形式について紹介しました。

画像形式にはそれぞれ得意・不得意があります。
どれかひとつが絶対に正解というわけではなく、画像の内容やサイトの目的にあわせて使い分けることが大切です。

私個人的には、現在であれば

• 写真やメインビジュアル、商品画像などはWebP
• ロゴやアイコン、シンプルなイラストなどはSVG

を使うのがよいと思っています。

WebPは画質を保ちながらファイルサイズを小さくしやすいため、写真の多いホームページでは表示速度の改善につながりやすいです。
SVGは拡大・縮小しても画質が劣化しないため、ロゴやアイコンのように様々なサイズで表示される画像に向いています。

もちろん、すべての画像をWebPやSVGにすればよいというわけではありません。
写真の加工元データとしてJPEGを残しておいたり、SVGに向かない複雑な画像はPNGやWebPを使ったりと、状況に応じた判断も必要です。

ホームページに写真やロゴを掲載する際は、ぜひ一度「この画像形式で本当に合っているか？」を考えてみてください。

ちょっとした画像形式の見直しが、ホームページの表示速度や見やすさの改善につながるかもしれません。