写真を少し切り抜いて保存し直しただけなのに、ファイルサイズが元より大きくなってしまった、ということがあります。画像の見た目はほとんど変わっていないのに、なぜ大きくなるのでしょうか。原因は、画像そのもの以外に保存される情報と、圧縮の設定にあることがほとんどです。ここでは、Photoshop などの画像編集ソフトで起きやすい原因と、Web 向けに軽く書き出す方法を紹介します。

メタデータが増えている

画像のファイルには、画素のデータのほかに、メタデータ (画像についての付加情報) が入ります。

  • Exif: カメラの機種、撮影の日時、露出の設定、位置情報 (GPS) など
  • XMP: 編集に使ったソフト、作成と更新の日時、編集の履歴など
  • 小さなプレビュー画像 (サムネイル)

編集ソフトで保存すると、元のメタデータを引き継いだうえに、ソフトが自分の情報を書き足すことがあります。Photoshop では、別の画像からコピーして貼り付けることを何度もくり返すと、元になった文書の情報がメタデータにたまり、ファイルが大きくなる場合があることも知られています。

位置情報は、撮影した場所を他人に知られる原因にもなります。Web に載せる画像からは、メタデータを取り除いておくのが安心です。

カラープロファイルが埋め込まれている

カラープロファイル (ICC プロファイル) は、画像の色をどの色の範囲で表しているかを示すデータです。保存するときに「カラープロファイルを埋め込む」設定になっていると、ファイルの中に入ります。sRGB のプロファイルなら数 KB ほどですが、プロファイルによってはもっと大きいものもあります。

Web の画像は、sRGB で作っておくのが基本です。ブラウザーは、プロファイルの無い画像を sRGB として扱うことが多いので、sRGB に変換したうえで、プロファイルを埋め込まずに書き出しても、ほとんどの場合は色が大きくずれません。一方、Adobe RGB などで作った画像からプロファイルだけを外すと、色がくすんで見えるので、先に sRGB へ変換します。

圧縮の設定が元と違う

ファイルサイズにいちばん大きく効くのは、圧縮の設定です。

  • JPEG の品質: JPEG は、品質の設定が高いほどファイルが大きくなります。元の画像が低い品質で保存されていたものを、高い品質で保存し直すと、画質は元より良くならないのに、ファイルだけが大きくなります。一度圧縮したときにできたブロック状のノイズも、細かな模様として忠実に記録しようとするためです。Photoshop の「別名で保存」の JPEG は、品質を 0〜12 の段階で指定します
  • 色の間引き: JPEG では、色の情報を間引いて小さくする処理 (クロマサブサンプリング) がよく使われます。高い品質の設定では、この間引きを行わないソフトもあり、そのぶん大きくなります
  • PNG の色数: 色数を 256 色以下に減らした PNG (インデックスカラー) を開いて編集し、フルカラーの PNG として保存すると、大きくなります。透明度の情報を加えた場合も同じです
  • 形式の変更: 写真を PNG で保存すると、JPEG よりずっと大きくなります。PNG は、色の数が少ないイラストや画面の写しに向く形式です

JPEG は保存し直すたびに少しずつ画質が落ちます。編集の途中は PSD などで保存し、最後に一度だけ書き出すのが基本です。

Web 向けに書き出す手順

  1. 表示する大きさに縮小する: 画面に表示する幅に合わせて縮小します。高精細な画面向けには、表示の幅の 2 倍程度までにしておきます
  2. sRGB に変換する: 作業の色空間が sRGB でなければ、書き出す前に変換します
  3. 形式を選ぶ: 写真は JPEG、WebP、AVIF、イラストや画面の写しは PNG や WebP、ロゴやアイコンは SVG が向いています
  4. メタデータを含めない: Photoshop の「書き出し形式」などでは、含めるメタデータを選べます (選べる項目は版によって違います)
  5. 品質を見ながら決める: 品質の数字を少しずつ下げ、拡大して見ても気にならないところで止めます

WebP と AVIF は、同じくらいの画質の JPEG よりファイルを小さくしやすい形式で、現在の主要なブラウザーは対応しています。古いブラウザーにも配慮するなら、picture 要素で、対応している形式をブラウザーに選ばせます。

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="夕暮れの港の写真" width="1200" height="800">
</picture>

width と height を書いておくと、画像の読み込み前から表示の場所が確保され、ページのがたつきを防げます。

コマンドで処理する道具もあります。たくさんの画像をまとめて書き出すときに便利です。

# メタデータを確かめる (ExifTool)
exiftool photo.jpg

# 幅 1600 px より大きければ縮小し、メタデータを除いて品質 80 で保存する (ImageMagick)
magick photo.jpg -resize '1600x>' -strip -quality 80 photo-web.jpg

# WebP に変換する (cwebp)
cwebp -q 80 photo-web.jpg -o photo-web.webp

-strip はカラープロファイルも取り除くので、sRGB 以外の画像は先に変換しておきます。ブラウザーの中で画像を圧縮し、仕上がりを見比べられる Web アプリもあるので、品質の数字を決めるときに使ってみるとよいでしょう。

まとめ

  • 保存し直して大きくなる主な原因は、メタデータ、カラープロファイル、圧縮の設定 (JPEG の品質や PNG の色数)
  • 低い品質の JPEG を高い品質で保存し直しても、画質は良くならず、ファイルだけが大きくなる
  • Web 向けには、表示の大きさに縮小し、sRGB にして、メタデータを除いて書き出す
  • 写真は JPEG・WebP・AVIF、イラストは PNG・WebP、ロゴは SVG。新しい形式は picture 要素で出し分ける

参考