Webサイトにアップロードする画像には、.jpgや.pngなどいろんな形式がありますが、どの拡張子が正解なのでしょうか？
実は、掲載したい画像が
- 図なのか？
- 写真なのか？
さらに写真の中でも、
- 自然の風景なのか？
- 人工の建造物なのか？
それにより、適したファイル形式が変わります。
こちらの記事では、web業界で仕事をしている私が、サイト運営者に向けてWebサイトに最適な画像ファイル形式についてお伝えます。
- 目的ごとに、選ぶべきファイル形式
- ファイル形式ごとに、変換・圧縮すると起きること
目次
画像ファイル形式ごとの特徴と用途
さっそく結論から言うと、以下の表の「用途」を参考に、ファイル形式を選択してください。
| 拡張子 | 呼び方 | 用途 | 表現方法 | 圧縮特性 | 背景透過 |
|---|---|---|---|---|---|
| .jpg .jpeg |
ジェーペグ | 写真(自然物) 色彩豊かな イラスト |
ラスタ | ○ 不可逆 |
× |
| .png | ピング ピーエヌジー |
図 イラスト 写真(人工物) |
ラスタ | ○ 可逆 |
○ |
| .tiff | ティフ | 印刷物 | ラスタ | × | ○ |
| .bmp | ビットマップ ビーエムピー |
使わない | ラスタ | × (基本は) |
× |
| .webp | ウェッピー | web上 SEO対策 |
ラスタ | ○ 可逆 |
○ |
| .svg | エスブイジー | 図・グラフ | ベクトル | ○ | ○ |
| .gif | ジフ | アニメーション | ラスタ | ○ 可逆 |
○ |
.jpg/.jpeg(ジェーペグ)の用途
デザインの分野で最も使われるのがこちらの.jpg形式です。
画像ファイルの中で最も高精細な画質を出すことができます。
フルカラー(約1670万色)を表現することができるので、主に自然の写真や高精細なイラストなど、色彩にグラデーションのあるものに向いています。
しかし、
- 背景透過ができない
- 一度画像を圧縮してしまうと元に戻せない「不可逆圧縮」
というデメリットもあります。
本来は、作成した団体（Joint Photographic Experts Group）の頭文字をとって「jpeg」が正しい表記です。
一方、MacやLinuxでは「4文字以上でもOK」だったので、「.jpeg」が使用されていました。
現在ではWINDOWSでも4文字以上の拡張子が許されているので、どちらも問題なく利用できますが、昔のなごりで「.jpg」と「.jpeg」が混在して使われています。
.png（ピング）の用途
.pngは、イラストや人工物の写真などに最適なファイル形式です。
- 圧縮率も高く、軽量化しやすいので
- 画像の透過ができる
というメリットがあり、使いやすいフォーマットなので、web上でメインに使用されることが多いです。
しかし鮮明さは.jpegに少し劣る（と言ってもかなり高精細ですが）ので、
自然の風景や、グラデーションが細かいイラストにはまだ.jpegが有利です。
.gif（ジフ）の用途
.gifは、アニメーションなど連続した画像の再生が可能なファイル形式です。
サイト上にYoutubeなどを埋め込んでも動画の表現は可能ですが、
.gifを使えばクリック不要で再生されます。
ただし、1フレームあたりの画像の解像度はあまり高くできないため、5秒程度で終わるアニメーションがおすすめです。
.tiff（ティフ）の用途
.tiffは「圧縮できない」という特性を持つファイル形式です。
意図的に圧縮させたくない画像、例えば解像度を落としたくない印刷物などでよく使われます。
圧縮できないぶん、ファイルサイズは重くなるので、速度が求められるwebでの掲載には向いていません。
.bmp（ビットマップ）の用途
.bmpファイルは、今ではほとんど使われることがなくなった画像のファイル形式です。
windowsで使われたファイル形式で、画像も重く、圧縮も基本的にはできません。
.pngや.jpgと比較すると、特にメリットのないファイル形式です。
ただ、私が以前努めていた会社では、令和の時代でもWindowsXPを使っていたので（工場のインフラソフトなので、更新が少ないため）バリバリ.bmp形式でファイルを保存していました。
メールに添付したりする場合は、.pngなどの形式に変換してからの方がいいですね。
SVG（エスブイジー）の用途
.svgファイルは、他の画像ファイルと違い、ベクトル形式で画像を表現しています。
いくら拡大でもジャギー（拡大すると現れるギザギザのこと）が発生しないのが特徴で、アイコンやグラフなどの画像に適しています。
便利なファイル形式ではあるのですが、あまり日常的に使う人は少なく、玄人向けのファイル形式という印象です。
Webp(ウェッピー)の用途
.Webpは、Googleが開発した次世代画像ファイル形式です。
webで高速に表示されるため、サイトスピードを上げるためのSEO施策として有効です。
つい最近（2020年9月）までSafariのブラウザで非対応だったため、訪問ユーザーのブラウザが
- Chromeなら.webp
- サファリなら.png
という表示の分岐が必要でした。
しかし、現在では.webpでもSafariで問題なく表示されるようになったので、これから普及していくと予想されます。
圧縮ツール・変換ツール
私がよく使う、軽量の圧縮・変換ツールをご紹介します。
圧縮ツール
jpeg・PNG圧縮
https://www.websiteplanet.com/ja/webtools/imagecompressor/
GIF圧縮
https://gifcompressor.com/ja/
変換ツール
HEIC → jpg 変換
https://heic2jpg.com/
※.HEICはiphoneの撮影写真の画像フォーマットです。
jpg → png 変換
https://jpg2png.com/
png → jpg 変換
https://png2jpg.com/
jpg | png → webp変換
https://lab.syncer.jp/Tool/Webp-Converter/
Exifデータの削除
メタデータとは、撮影場所や保存したソフトの情報など、画像に関する様々な情報が記載されたデータです。
iphoneの設定によっては、撮影した場所が画像に埋め込まれてしまうため、Web上投稿してしまったことで
- いつどこにいるかバレてしまう
- 自宅の場所がわかってしまう
など、プライバシーの観点からも削除した方が良いデータです。
（SNSにアップした画像は、アプリ側で自動的にメタデータを削除しますので心配はありません）
削除した方がファイル自体は軽くなりますので、表示速度もわずかに上がります。
メタデータの削除にはこちらのツールを使用します。
https://lab.syncer.jp/Tool/Exif-Remove/
Web制作の場合の最適なファイル形式
サイトに訪問したユーザーの満足を高めるためには、
- なるべく早く表示されること
- 鮮明でわかりやすい画像であること
この２つが求められます。
表示速度を早くするには、画像の容量を小さくする必要があります。
かといって、圧縮しすぎると画像の解像度が下がります。
両者のバランスをうまくとるためには、ファイル形式ごとの得意不得意を生かす必要があります。
画像検索を意識したファイル形式
Google画像検索では、サポートしているファイル形式が指定されています。
Google 画像検索では、BMP、GIF、JPEG、PNG、WebP、SVG の形式の画像をサポートしています。
基本は.pngでOK。できれば.webpの使い分けを
webサイトで使う画像は、基本的には.pngで良いと思っています。
サイトの特性にもよりますが、基本的にはそこまで鮮やかな画像は必要なく、ユーザーに伝えたいことが伝われば問題ないからです。
ただ、風景画を集めた写真サイトや、高精細なイラストを掲載するサイトでは、.jpgを検討しても良いと思います。
検索（SEO）の目線では、ページの表示速度が大事なので、次世代フォーマットの.webpも使いたいところです。
ワードプレスを使ったサイトだと、以下のプラグインで一括最適化できるのでおすすめです。
