用途に合った形式を選ぶ
| 形式 | こんな用途から始める | 注意すること |
|---|---|---|
| AVIF | 配信用のファイルを小さくしたい写真や、細部の多いウェブ画像。 | エンコードが遅い場合があります。使用先のアプリ、プラットフォーム、作業環境が AVIF に対応しているか確認してください。 |
| WebP | ウェブ用の写真、商品画像、透明度が必要な素材。 | 小さな文字やくっきりした輪郭には、より高い画質設定や可逆形式が必要な場合があります。 |
| PNG | スクリーンショット、図表、ロゴ、ピクセルアート、透明な図版。 | 大きな写真はファイルサイズが大きいままになることがあります。減色によって色が変わる場合もあります。 |
| JPEG | よく知られた、幅広く対応する形式が求められる写真の用途。 | 透明度に対応していません。非可逆エンコードを繰り返すと、目に見える劣化が積み重なる場合があります。 |
これは使い始めの目安であり、順位ではありません。同じページに表示される画像でも、透明なアイコンと画面いっぱいの写真では、適した形式が異なります。使用先にアップロード要件がある場合は、まずその要件に従ってください。
まずは必要な画像サイズにする
ピクセル数はファイルサイズに大きく影響します。幅6000ピクセルの写真は、ウェブサイトの小さなカードに使うには通常大きすぎます。対応したい画素密度を考慮しながら、表示するサイズに合わせてリサイズしましょう。
例えば、幅800 CSS ピクセルで表示する画像なら、2倍の画素密度の画面向けに幅1600ピクセルの元画像を用意する方法があります。これは設計の一例であり、すべての場面で必要な条件ではありません。レスポンシブなレイアウト、切り抜き方、配信時の帯域幅によって適切な選択は変わります。
次に画質を調整する
非可逆形式の画質設定は、エンコーダーがどれだけの情報を捨てられるかを調整します。画質の数値はコーデックごとに異なります。JPEG の「80」が、WebP や AVIF の「80」と同じ見た目の画質を意味するわけではありません。
- バランス設定から始め、実際に使う表示サイズで結果を確認します。
- 100%に拡大し、顔、グラデーション、文字、細かな質感、輪郭など、大切な部分を比較します。
- 画質を少しずつ下げ、気になる変化が出たら少し上げます。
- 必要な画質を満たす中で、最も小さく使えるファイルを選びます。
削減率だけでなく、結果を見る
元の画像が大きすぎたり、効率よくエンコードされていなかったりすれば、大きな削減は容易です。削減率だけでエンコーダーの優劣を示すことはできません。同じ画像サイズ、透明度、見た目の画質で比較しましょう。
PNG を理解する：可逆圧縮と減色
PNG がエンコード済みのピクセルデータを圧縮する処理は可逆です。しかし、ツールがエンコード前にそのデータを変更することはあります。色数を減らす減色は似た色をまとめるため、ファイルサイズを小さくする一方、見た目が変わることもあります。
厳密な可逆処理では、デコード後のピクセルを保ったまま保存方法を変えます。減色はシンプルな図版に役立ちますが、滑らかなグラデーション、柔らかい影、半透明の輪郭は慎重な確認が必要です。ディザリングは細かな模様を加えて色の段差を目立ちにくくしますが、平坦な部分のざらつきを増やす場合もあります。
正確なピクセル値が必要な場合は、可逆の処理方法を選び、それに合わせて結果を比較してください。形式名だけでは、変換全体が可逆だったことを保証できません。
透明度を意識して扱う
PNG、WebP、AVIF はアルファチャンネルを保存できます。JPEG は保存できません。透明な画像を JPEG に変換するときは、使用先に合った背景色を選んでください。そうしないと、切り抜いた画像、ロゴ、影に意図しない背景や輪郭が付く場合があります。
透明な輪郭は、明るい背景と暗い背景の両方で確認してください。白い背景できれいに見える画像でも、暗いページでは輪郭に光のようなにじみが見えることがあります。
AVIF：小さなファイルに、より多くの処理を
AVIF は便利な圧縮方法を提供しますが、エンコードの負荷が大きい場合があります。エンコードの処理量を増やす設定は、見た目の画質設定とは別のものです。効率的なデータ表現を探すために、エンコーダーにより多くの時間を使わせます。
何度も使う写真には AVIF を試してみてください。スマートフォンで手早く一括処理する場合は、WebP や JPEG のほうが始めやすいことがあります。画像サイズ、内容、設定、端末性能が影響するため、一定の処理時間を約束することはできません。
元の画像、メタデータ、色を忘れずに
再エンコードによって EXIF、位置情報、その他のメタデータが削除される場合があります。これらが必要なときは、元の画像を残してください。ブラウザーでのデコードやエンコードは、カラープロファイル、ハイダイナミックレンジのデータ、向きを示すメタデータに影響する場合もあります。色が重要な用途では、最終的な使用先で確認してください。
すでに非可逆圧縮されたファイルを繰り返し編集すると、画質が低下する可能性があります。可能な限り、配信・共有用の各バージョンは元の画像から作成しましょう。
一括処理が遅い、または失敗するとき
デコード後の画像は、圧縮ファイルより多くのメモリーを使います。6000 × 4000 の画像では、8ビット RGBA のピクセルバッファー1つだけで約96 MB が必要です。デコード、リサイズ、エンコードの際は、複数のバッファーが同時に必要になる場合があります。
タブの動作が遅くなったら、一度に処理するファイルを減らす、画像サイズを小さくする、より速い出力形式を使う、といった方法を試してください。ファイルの破損、対応していない画像の種類、端末のメモリー不足も処理できない原因になります。ページを閉じたり更新したりする前に、必要な結果を保存してください。
画像をもっと軽くしませんか？
画像を選んで、ブラウザーで軽量な画像を作成しましょう。