Webサイトにアップロードする画像には、.jpgや.pngなどいろんな形式がありますが、どの拡張子が正解なのでしょうか?
実は、掲載したい画像が

  • 図なのか?
  • 写真なのか?

写真の中でも、

  • 自然の風景なのか?
  • 人工の建造物なのか?

それにより、適したファイル形式が変わります。
こちらの記事では、web業界で仕事をしている私が、サイト運営者に向けてWebサイトに最適な画像ファイル形式についてお伝えます。

この記事でわかること
  • 画像の内容や目的で、どんなファイル形式を選べばいいか?
  • ファイル形式ごとに、変換・圧縮はどうすればいいか?

最適なファイル形式の選び方

サイトに訪問したユーザーの満足を高めるためには、

  • なるべく早く表示されること
  • 鮮明でわかりやすい画像であること

この2つが求められます。
表示速度を早くするには、画像の容量を小さくする必要があります。
かといって、圧縮しすぎると画像の解像度が下がります。
両者のバランスをうまくとるためには、ファイル形式ごとの得意不得意を生かす必要があります。

画像ファイル形式ごとの特徴と用途

さっそく結論から言うと、以下の表の「用途」を参考に、ファイル形式を選択してください。

拡張子 呼び方 用途 表現方法 圧縮特性 背景透過
.jpg
.jpeg
ジェーペグ 写真(自然物)
色彩豊かな
イラスト
ラスタ
不可逆
×
.png ピング
ピーエヌジー

イラスト
写真(人工物)
ラスタ
可逆
.tiff ティフ 印刷物 ラスタ ×
.bmp ビットマップ
ビーエムピー
使わない ラスタ ×
(基本は)
×
.webp ウェッピー web上
SEO対策
ラスタ
可逆
.svg エスブイジー 図・グラフ ベクトル
.gif ジフ アニメーション ラスタ
可逆

.jpg/.jpeg(ジェーペグ)の用途

デザインの分野で最も使われるのがこちらの.jpg形式です。
画像ファイルの中で最も高精細な画質を出すことができます。
フルカラー(約1670万色)を表現することができるので、主に自然の写真や高精細なイラストなど、色彩にグラデーションのあるものに向いています。
しかし、

  • 背景透過ができない
  • 一度画像を圧縮してしまうと元に戻せない「不可逆圧縮」

というデメリットもあります。

.jpgと.jpegに違いはない
「ジェーペグ」には、.jpgと.jpeg、2つの表記があります。
どちらも同じ形式なのですが、歴史的な背景により両方が使われています。
本来は、作成した団体(Joint Photographic Experts Group)の頭文字をとって「jpeg」が正しい表記です。
しかし、以前のWindowsでは「拡張子が3文字まで」という制限があったため「.jpg」ととする必要がありました。
一方、MacやLinuxでは「4文字以上でもOK」だったので、「.jpeg」が使用されていました。
このような理由で、「.jpg」と「.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で問題なく表示されるようになったので、これから普及していくと予想されます。

圧縮ツール・変換ツール

私がよく使う、軽量の圧縮・変換ツールをご紹介します。

圧縮ツール

PNG圧縮
https://compresspng.com/ja/
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/

おすすめの記事