Web に WebP を使う理由
ページ上の画像は、訪問者の目に入る前にすべてダウンロードされる必要があります。スマートフォンから直接持ってきた大きな JPG は、サイトが遅く感じられる最もよくある原因のひとつで、ページの速度は直帰率と検索順位の両方に影響します。
WebP は、まさにこの目的のために Google が開発した形式です。見た目の画質が同じでも JPG よりかなり小さなファイルになることが多く、PNG のように透過にも対応し、現行の主要ブラウザはすべて表示できます。ブログやネットショップ、ポートフォリオの写真なら、WebP を標準にするのが賢明です。
サイトに合った形式の選び方
| 形式 | ファイルサイズ | ブラウザ対応 | 最適な用途 |
|---|---|---|---|
| JPG | 大きめ | ほぼすべて | メール、印刷、古いシステム |
| WebP | 小さめ | 現行の主要ブラウザすべて | ほとんどのサイト写真 |
| AVIF | 最小 | 最新ブラウザ（一部未対応あり） | 1 KB でも削りたいサイト |
さらに突き詰めたい場合は、上の形式切り替えで AVIF も出力できます。AVIF はさらに小さくなりますが、エンコードに時間がかかります。メリット・デメリットは HEIC を AVIF に変換 をご覧ください。
サイト運営者向けのかんたんな手順
- まずリサイズ。 幅 4032 ピクセルの iPhone 写真を 1200 ピクセルのカラムに載せるのは無駄です。HEIC リサイズ で 1920 または 1280 のプリセットを使いましょう。
- WebP に変換。 ここで画質 75〜85 に設定して変換します。
- 位置情報を削除。 初期設定でオフになっているので、自宅の住所が公開ブログに載ってしまう心配はありません。
- CMS にアップロード。 WordPress をお使いの方は、WordPress 用に HEIC を変換する ページで詳しい手順を確認できます。
ブラウザ間の色の違い
iPhone の写真は、標準の sRGB より広い色域を持つ Display P3 で撮影されています。WebP にはカラープロファイルを埋め込み、最新のブラウザはそれを正しく反映します。プロファイルを無視する古い画面も含め、どの画面でも確実に同じ色にしたい場合は、変換前に カラー を sRGB に設定してください。
サーバーのためではなく、プライバシーのために
ファイルをアップロードするオンライン変換ツールは、まだ公開していない写真を扱うには不向きです。ここでは WebP のエンコードがブラウザのタブ内の Web Worker で、CPU コアを使って並列に実行されます。サーバー側の処理も、登録も、透かしもありません。アプリがキャッシュされればオフラインでも動作するので、機内で画像を準備して、着陸後にアップロードすることもできます。