【Web担当者必見！】Webサイトではどの画像形式が最適なの？

「Webに画像を載せたいけど、どの画像形式が良いんだろう…」
「画像ファイルの拡張子、いまいちよくわかっていない…」
という方に向けて今回の記事を書いています。
Webサイトを作ったり運営するなら、画像形式について理解しておくことは必須です。
それぞれの特徴と使い分けの方法を解説していきたいと思います。

画像形式とは？

「画像」とひとことで言っても、Web上でのデータの表示方法はさまざまあります。
それを決めるのが「画像形式」です。

画像形式について説明する前に、まず画像がビットマップ画像とベクター画像に大別されるということを知っておく必要があります。

ビットマップ画像

ビットマップ画像とは、さまざまな色の点が集まってできた画像のことです。

この点は、ピクセルとも呼ばれており、画像の大きさを表す単位になっています。

ビットマップ画像の特徴

• 拡大すると画像が荒くなる
• 多くの色で表現が可能
• 写真は基本ビットマップ画像が適用される

ベクター画像

一方でベクター画像は、点と線、塗りの情報を計算して、コンピュータが再現したものになります。

ベクター画像の特徴

• 画像を拡大してもなめらかで、劣化しない
• 多くの色を使った写真等は不得意
• 点と線、塗りの情報を数値化しやすい単純な図の描画に適する

代表的な画像形式（JPG, PNG, GIF, SVG）

Webで表示される画像形式で使用頻度が高いものとして、JPG、PNG、GIF、SVGの4種類があります。
それぞれの特徴をみていきましょう。

JPGとは

JPGはビットマップ画像形式に分類されます。

正式名称は「Joint Photographic Experts Group」で、ファイルの拡張子は「.jpg」もしくは「.jpeg」となります。

では、JPGの特徴を解説していきます。

豊富な色表現が可能

JPGはフルカラー対応で、1677万7216色の表現が可能です。
写真など、多くの色を使う画像はJPGで保存すると良いでしょう。

非可逆圧縮方式


一度画像を圧縮すると元には戻せないため、保存するたびに画像は劣化していきます。
その分、画像容量が大きい場合には、大幅に容量をカットすることができます。

圧縮率を細かく指定可能

JPGは圧縮率が指定できることも大きな特徴です。
画像のいらない部分を捨てることにより圧縮をしており、”圧縮率の指定”とは、どのくらい捨てるのか割合を決めるといったイメージです。

PNGとは

PNGはビットマップ画像形式に分類されます。
正式名称は「Portable Network Graphics 」で、ファイルの拡張子は「.png」です。
では、PNGの特徴を解説していきます。

256色もしくはフルカラーに対応

PNGはさらに3種類に分類でき、PNG-8、PNG-24、PNG-32があります。この中で、PNG-8は256色、PNG-24とPNG-32はJPEG同様フルカラーに対応しています。

画像の透過が可能

画像の背景透過が可能です。画像の透明度も設定することができます。

可逆圧縮

JPEGとは異なり、可逆圧縮方式のため保存を繰り返しても画像が劣化しません。

GIFとは

GIFはビットマップ画像形式に分類されます。
正式名称は「Graphics Interchange Format」で、ファイルの拡張子は「.gif」です。
では、GIFの特徴を解説していきます。

アニメーション表現が可能

GIFはアニメーションを表現できるのが、他とは大きく異なる特徴です。複数枚の画像を使用し、パラパラ漫画のような原理で数秒のアニメーションをみせることが可能です。

表現できる色の数は256色

使用できる色は256色で、JPEGやPNGと比べると制限があります。

画像の透過が可能

透明度を調節することはできませんが、完全透過は可能です。

SVGとは

SVGはベクター画像形式に分類されます。
正式名称は「Scalable Vector Graphics」で、ファイルの拡張子は「.svg」です。
では、SVGの特徴を解説していきます。

拡大・縮小しても画像が劣化しない

SVGはベクター画像です。
つまり、コンピュータが描画しているため、拡大しても画像が荒く見えることはありません。
そのため、ホームページ等のレスポンシブデザインとの相性が良いです。

画像の透過が可能

SVGもPNGと同様、画像の透過が可能です。

CSSを用いて変更可能

点と線、塗りの情報が数値化されているSVGでは、後からCSSを用いて色やサイズなどの変更が可能です。

画像形式の使い分け

JPG、PNG、GIF、SVGの4つの画像形式をどのように使い分けるべきか、事例とともにみていきましょう。

色数の少ないイラストの場合

色数が少なく、境界線がはっきりとしたイラストの場合、PNGが適しています。
うまく圧縮して小さな容量でくっきりとした画質で表現することができます。
JPGは連続した色の変化が得意なので、こういった画像は逆に境界線がぼやけてしまいがちです。

複雑な画像(写真)の場合

写真が得意なのは、JPGでしたね。
PNG形式でも画質には問題ありませんが、容量が大きくなり、Webサイトに載せるとそのサイト自体が重たくなってしまいがちです。

表示速度を優先させたい場合は、JPGを選ぶのがおすすめです。

ロゴの場合

Webサイト内のさまざまなページで使用されることが想定されるロゴ。いちいち色んなサイズを用意するのは面倒ですね。
この場合は、拡大しても画像の劣化がないSVGが良いでしょう。

アニメーションの場合

アニメーションを載せる場合は、GIFを使用しましょう。LP(ランディングページ)などは、GIFを使って要素に動きをつけている場合が多いので、注目して見てみてくださいね。

Webサイトに画像を載せる際の注意点

Webサイトに画像を載せる際に注意しておきたいポイントを解説していきます。

画像をトリミングする

撮影した写真、そのままWebサイトにアップしていませんか？
そのままではWebページを重たくしている原因になっている可能性があります。

画像形式はJPGなどに変換し、最適化するようにしましょう。
また、写真に不要な部分があるのであれば、トリミングもしておきましょう。

画像を圧縮する

画像形式の選定、画像のトリミングも行ったら、画像の圧縮をしましょう。
Photoshopを持っている方はメニューバーにあるイメージ＞画像解像度から、解像度を72dpiに設定しましょう。
一般的にPCモニター画面表示用の解像度が72dpiと言われています。
これだけでかなりの画像サイズ縮小になると思います。

また、Photoshopを持っていない方でも、無料で画像を圧縮できるサービスがあります。

Optimizilla
https://imagecompressor.com/

JPG、GIF、およびPNG画像に対応しています。最大で20ファイルの画像を同時にアップロード可能です。

JPEG-Optimize
https://imagecompressor.com/

JPGのみ対応ですが、圧縮とリサイズが同時にできます。

Retinaディスプレイへの対応

Retinaディスプレイとは、Apple製品に搭載されている高解像度ディスプレイのことです。
通常ディスプレイの2倍のピクセル数を表示することが可能で、それゆえ高解像の美しい画像を表現できます。

しかし、注意したいポイントとして、通常解像度のディスプレイではきれいに表示されていた画像が、Retinaディスプレイではぼやけてしまうことがあります。

この場合、Retinaディスプレイ用に通常の2倍の解像度の画像を用意しておくようにしましょう。

Retinaディスプレイ対応の画像にするには、HTML5のsrcsetを使用して切り替えるのが便利です。コードは以下を参照してください。

 

<img src="img/sample.jpg"
     srcset="img/sample.jpg 1x,
             img/sample@2x.jpg 2x"
     alt="sample">

最適な画像形式選びをしよう！

よく見る拡張子、意味を知っておくと今後多くの場面で役立ちます。
画像形式にも気を配り、ユーザーにとって快適なWebサイト作りをしていきましょう。
特にWeb担当者の方、駆け出しWebデザイナーの方はぜひ参考にしてくださいね。

よりWebサイトの表示速度のパフォーマンス向上を勉強したい方は、上記の従来の画像フォーマットより格段に小さく軽くなる、次世代の画像フォーマット「WebP」についての記事も合わせて読んでみてください。