ユーザーが iPhone で撮った写真をアップロードする。ファイルは HEIC で、約 1.8 MB。<img> タグはこれに依存できない。HEIC は Chrome、Firefox、Edge でネイティブ対応していないからだ。そこで画像は 3.4 MB の JPG になるか、目に見える差がない約 1.2 MB の WebP になるか、どちらかになる。この差こそ、HEIC で届く写真に WebP が答えとなる理由だ。
このガイドでは、HEIC を WebP に変換する方法、フォーマット間のサイズ比較の実際、ブラウザツールからビルドに組み込めるシェルコマンドまで、選択肢を解説する。
なぜ HEIC ではなく WebP か
HEIC は写真の保存に優れており、同等品質の JPEG のおおよそ半分のサイズになる。だが、配信フォーマットとしては Web の役に立たない。Chrome、Firefox、Edge、Safari はすべて何年も前から WebP に対応している。一方、HEIC に対応しているのは Safari と一部のベンダー固有の環境だけだ。ユーザーがアップロードした画像に HEIC を当てにすることはできない。変換パイプラインが存在するのは、まさにそのためだ。
WebP は HEIC と同じ領域をカバーする。モダンな圧縮技術を土台にした非可逆フォーマットで、可逆モードとアルファ透明度も備える。写真の場合、同じ見た目の品質で WebP と JPG を比べると、WebP はおおよそ 25 〜 35% 小さくなる。画像の多いページでは、これは無視できない節約だ。
サイズ比較
同じ 12 MP の写真、同じ見た目の品質：
| フォーマット | サイズ | 対応ブラウザ | 備考 |
|---|---|---|---|
| HEIC | ~1.8 MB | Safari のみ | iPhone の元フォーマット |
| JPG | ~3.4 MB | すべて | 基準 |
| WebP | ~1.2 MB | すべて | 非可逆、アルファ対応 |
| PNG | ~24 MB | すべて | 可逆、写真向けではない |
WebP が JPG や PNG に対してどの位置にいるのか、背景を知りたい場合はWeb 画像フォーマットガイドに完全な比較が載っている。
方法 1：ブラウザで変換する
最も簡単なのは、デバイス上だけで完結するツールだ。HEIC to WebP コンバーターは WebAssembly で HEIC をローカルでデコードし、WebP ファイルを書き出すので、写真がマシンの外に出ることはない。品質を設定し、フォルダ全体を変換し、結果を ZIP でダウンロードできる。一度きりの変換や、コマンドラインに慣れていないデザイナーや編集者に向いている。
方法 2：コマンドラインで変換する
パイプラインなら、定番の組み合わせは libheif と libwebp だ。macOS で Homebrew を使う場合：
brew install libheif webp
その後、heif-convert と cwebp で変換する：
heif-convert input.heic output.png
cwebp -q 82 output.png -o output.webp
または ffmpeg で中間ファイルを省く：
ffmpeg -i input.heic -c:v libwebp -quality 82 output.webp
どちらのコマンドも品質引数に対応している。cwebp は最も幅広い制御オプションを持ち、可逆モードや、最も遅くて最も小さな出力になる -m 6 を備える。フォルダ単位ならループで処理する：
for f in *.heic; do heif-convert "$f" "${f%.heic}.png"; cwebp -q 82 "${f%.heic}.png" -o "${f%.heic}.webp"; done
これで、サーバー側でアップロードを処理するシェルスクリプトや CI ジョブに組み込める。
WebP で品質とフォーマットを選ぶ
出力に最も影響するのは次の 2 つの判断だ：
- 非可逆か可逆か。
cwebp -losslessか、可逆フラグ付きの-q 100は全ピクセルを保持するが、ファイルは大きくなる。スクリーンショット、ロゴ、平坦な色とテキストで構成されるものに使おう。写真には非可逆を使う。 - 品質の数値。
-q 82は写真の適切なデフォルトだ。見た目はきれいで、JPG よりずっと小さい。高品質が目的なら、-q 90はバイト数は増えるが、ソースに近づく。これは JPG の品質設定と同じトレードオフで、品質を落とさない HEIC to JPG 変換が詳しく解説している。
WebP はアルファも扱える。透明度チャンネルを持つ HEIC 画像は変換を乗り切れる。JPG なら落とされてしまう情報だ。
新しいフォーマットについて
AV1 ベースの後継である AVIF は、サイズの点で一般的に WebP を上回り、現在は主要ブラウザすべてでサポートされている。新しいパイプラインを組んでいて、デコーダーを自由に選べるなら、AVIF を WebP と比較して自分の画像で試す価値はある。トレードオフはエンコード速度とツールの成熟度だ。だから WebP がほとんどのチームで安全なデフォルトであり続ける。Web 画像フォーマットガイドには、各フォーマットの適材適所がさらに詳しく載っている。
まとめ
Web サイトに載せるものは、HEIC を WebP に変換しよう。どこでも対応しており、同じ品質の JPG より小さく、ブラウザツールか 2 コマンドのシェルパイプラインで変換できる。元の HEIC を原本として保管し、アップロード時かバッチジョブで変換し、読み込み時間の計算はフォーマットに任せよう。
