画像を保存する時、どのファイル形式を選べば良いか迷った経験はありませんか？
きちんと使い分けする事でウェブに最適化出来ます。
ファイル形式または保存形式とは「JPG」や「PNG」「GIF」などの事。それぞれに特徴があります。
ここではウェブで使う画像に焦点を当てて解説しています。
画像の保存形式の使い分けが必要な理由や考え方を極力シンプルにまとめました。
ブログをやっている方やグラフィックデザイナーは是非参考にしてくださいね。
「ウェブで使う」としたのは、紙媒体でのファイル形式とウェブで使えるファイル形式に違いがある為です。
また、どちらでも共通で使えるファイル形式であっても、気を付けるポイントは違います。
この記事の目次
大前提、画像は大きく分けると2種類
画像の種類は大きく２つに分けられます。
ベクター画像とラスター（ビットマップ）画像です。
大きな違いは、劣化するか、しないかです。
誤解を恐れず、ものすごくシンプルに説明します。
ベクター画像
アプリの画面上で縦座標と横座標を指定することにより、直線や円などの図形を描く事が出来ます。つまり、描かれたものを数値化して記録しています。座標間を線で繋いで表現しているんですね。
数値化してあるから拡大、縮小しても数値を計算し直せば良いだけなので、画像が劣化しないんです。
代表的なものにAdobeのイラストレーターがあります。ベクター画像を扱う事が多いアプリです。
ラスター画像
コンピュータの画面はピクセルと呼ばれる小さな点の集まりで出来ています。ピクセル一つ一つに色の種類や濃さの情報を持たせてあって、写真などはそれらが集まって表現されているんです。
めちゃくちゃ拡大すれば点の集まりである事が分かります。
この小さな点の集まりが多い程、高解像度になる訳です。ただしサイズを拡大縮小など、何らかの加工をさせると劣化するんですね。
「.jpg」だと加工しなくてもファイルを保存し直すだけでも僅かに劣化するそうです。
代表的なものにAdobeのフォトショップがあります。主に写真などラスター画像を扱う事が多いアプリです。
ウェブでよく使うファイル形式5種類
実はもっと沢山あるのですが、ブラウザとSNSでは対応しているものが違う事もあります。よく使う代表的な物だけ絞って表にしました。
| 拡張子 | 特徴 | |
|---|---|---|
| JPG | jpg | ○ フルカラー1670万色 ○ 非可逆圧縮 ○ 背景の透過は不可 |
| PNG | png | ○ フルカラー1670万色 ○ 可逆圧縮 ○ 背景透過も可能 |
| GIF | gif | ○ 256色まで ○可逆圧縮 ○ 背景透過も可能 ○ 簡単なアニメーションも可能 |
| SVG | svg | ○ ベクター形式なので劣化に強い ○ CSSで編集も可能 |
| WebP | webp | ○ JPG・PNG・GIFの良いとこ取りで超軽量。 |
ウェブでの使い分けと考え方
印刷用の画像と違い、ウェブでは様々な使い方をします。それを踏まえた上で適切なファイル保存形式を選ぶ必要があります。
なぜ使い分けるの？
- 画像を軽量化し、ウェブで最適化する為。つまり、ページ読み込みを少しでも早くする事でSEO対策になるから。
- 画像を加工する事で、ウェブサイト上で動きを付けたり、見せ方を演出したいから。
- SNSなどのサービスで対応しているファイル形式が限定されているから。
こういった事を気にしながら画像を加工したり、保存したりして最適化していきます。
ウェブで気にすべきデータサイズに関する事
ウェブだと圧縮とか軽量化という言葉が良く出てきます。ファイル形式と同じくらい重要な事なので説明しますね。
非可逆圧縮の画像形式とは
人の感覚では分からない程度に情報を減らし圧縮する事で、劣化を目立たなくしています。
Photoshopなどアプリを使えば圧縮率を変更できます。目で見て劣化が気にならない程度に圧縮率を変更するのがポイント。
ちなみに、何度もファイルを編集・加工すればそのたびに劣化していきます。
可逆圧縮の画像形式とは
圧縮前のデータと、圧縮後のデータが完全に等しいもの。データ上での法則などを見つけて冗長性を排除するしくみで圧縮しています。なので劣化は特に気にしなくても大丈夫です。
じゃあ、全部PNGで良くない？
写真でも写っている内容によって圧縮効果は違うんですね。圧縮の仕組み上、色の階調が複雑な場合はJPGの方が良い場合かもしれません。試して結果が良い方を選べば良いかと思います。
PNGファイルでもツールを使えばしっかり軽量化出来ます。
JPG – ジェイペグ
特徴は？
非可逆圧縮、背景透過は出来ません。
適している画像は？
アイキャッチやサムネイル、バナーとして写真を見せたい時で、色の階調が多い写真がおすすめ。写っている内容によってはPNGでも。
圧縮率は目で見て劣化が目立たない程度にしましょう。それでもデータが大きければPNGでも試して見るのが良いと思います。
背景が透けているものは透過出来ず白くなります。
PNG – ピング
特徴は？
可逆圧縮、背景透過も可能です。
適している画像は？
JPGとおなじく、アイキャッチやサムネイル、バナーとして写真を見せたい時ですね。切り抜いた商品画像とか。
色の階調が複雑過ぎない写真がおすすめ。JPGと比較して決めてもいいですね。
あまりサイズが変わらない様なら、PNGをツールで圧縮した方が軽量化できるかも。
あと、背景が透けている画像を使うときはPNGを使いましょう。
切り抜きしたり、ウェブサイトで動きを付けたりして他の要素と重ねたりする場合ですね。
透過ファイルとか透過PNGなんて言ったりします。
GIF – ジフ
特徴は？
可逆圧縮、256色までしか使えませんがその分軽量。
適している画像は？
256色という色数の少なさから、単調なべた塗りのイラストやロゴなどがおすすめ。単純なアニメーションも出来ます。
アニメーションGIFって言います。SNSでも見かけますよね。
SVG – エスブイジー
特徴は？
ベクターデータなので拡大、縮小しても劣化しません。もちろん軽量。
CSSで色を変えたり動きを付けたりも簡単です。
適している画像は？
装飾としてアクセント的に使うアイコンなど。
WebP – ウェッピー
特徴は？
WebPは、アニメーションを含む非可逆および可逆画像圧縮の両方をサポート。
WebPの可逆画像はPNGと比較してサイズが26％小さく、WebPの非可逆画像はJPG画像よりも25〜34％小さくなります。
WebPは通常、画質を損なうことなく圧縮出来るだけでなく、透過画像（アルファチャンネル）にも対応しています。
ブラウザが対応している事や、Photoshopが完全サポートするなど利用環境が整ったので、今後はウェブでの主要な画像フォーマットになっていくかもしれません。
まとめ
画像形式には特徴があり、用途に合わせて使い分ける事が大切です。特に画像データサイズに関してはSEOにも関わる重要な問題です。
もちろん画質にも影響しますので、グラフィックを扱うなら知っておくべき事柄です。
note
ブログやウェブサイト制作だけでなく、SNSにアップする事もよくありますよね。知ると知らないとでは大違いですよー。