ウェブに適した画像形式の選び方

最初に考える3つの問い

実際のウェブサイトでは、画像ごとの形式選びは次の3つの問いに集約されます。

1. 何が写っているか? 写真には JPG、非可逆の WebP、AVIF などの非可逆形式が向いています。小さな誤差が自然な細部にまぎれて目立たないためです。スクリーンショット、文字、グラフ、ベタ塗りのグラフィックにはくっきりした輪郭があり、非可逆圧縮ではそのまわりにモスキートノイズ（輪郭に沿って出るもやのようなノイズ）が目に見えて残ることがあります。そのため、可逆形式（PNG、可逆の WebP）か、図形として描かれたものであれば SVG が向いています。
2. 透過やアニメーションが必要か? JPG はどちらにも対応していません。PNG、WebP、AVIF は半透明も含めて透明度を段階的に表せるアルファチャンネルを保存でき、柔らかい輪郭もきれいに表現できます。GIF のピクセルは完全に透明か完全に不透明のどちらかしかないため、色付きの背景の上では曲線の輪郭がギザギザに見えたり、縁に色が残って見えたりすることがあります。GIF、WebP、AVIF、APNG（アニメーション PNG）はアニメーションを保存できますが、短い動画のほうが GIF よりはるかに小さくなることがよくあります。
3. どこに掲載するか? 自分で作る HTML ページなら、複数の形式を用意できます。コンテンツ管理システム（CMS）、ネットショップ、アップロードフォームでは、受け付ける形式はそれぞれのサービスが決めており、ファイルを独自に変換することもあるため、最新のドキュメントを確認してください。メールソフトはブラウザ以上に対応状況がまちまちなので、メールマガジンには JPG と PNG を使うほうが安全です。

各形式の仕組みについては、JPG・PNG・WebP・AVIF の比較をご覧ください。

内容別の形式: 判断表

自分のページで AVIF や WebP を配信する場合は、それらを表示できないブラウザやアプリのために JPG や PNG 版も残しておきましょう。プラットフォームが1つのファイルしか受け付けない場合は、通常はフォールバックの列にある形式を選ぶのが無難です。ファビコンには独自のルールがあります。ファビコンのサイズ・形式・HTML タグをご覧ください。

ウェブページで GIF のようなループを表示するなら、autoplay、loop、muted、playsinline 属性を付けた音声なしの <video> がよく代わりに使われます。ブラウザは一般に、ミュートされた動画の自動再生を許可しているためです。メールでは、デスクトップ版 Outlook の一部のバージョンがアニメーション GIF の最初のフレームしか表示しないため、伝えたい内容はそのフレームに入れておきましょう。

WebP や AVIF をフォールバック付きで提供する

HTML を自分で書くページでは、<picture> 要素を使うと、各ブラウザが対応している最初の形式を選んで表示できます。

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="器に盛ったトマトパスタ" width="1600" height="1200">
</picture>

ブラウザは <source> 要素を順に読み、対応していない type のものは飛ばします。必須の <img> 要素には、代替テキストと、ブラウザが表示領域をあらかじめ確保するための幅と高さを指定します。どの source も当てはまらない場合は、この要素のファイルが表示されます。img { max-width: 100%; height: auto; } のような CSS を指定しておけば、画像は狭い画面に合わせて縮小され、縦横比も保たれます。複数のサイズも用意するには、srcset に各ファイルとその幅を並べ、sizes 属性を追加します。詳しくは画像のリサイズ: ピクセル・縦横比・DPIをご覧ください。

多くの CMS や画像 CDN は、WebP や AVIF のコピーを作成し、訪問者ごとにどれを配信するかを選べます。お使いのサービスがそうなっているなら、自分で強く圧縮したファイルではなく、高品質の JPG や PNG をアップロードして変換を任せましょう。そうすれば、画像が二重に圧縮されずに済みます。

実例: 1つの記事の画像

レシピ記事に3枚の画像があり、本文の列の幅は最大 760 CSS ピクセルだとします。

• ヒーロー写真。 スマートフォンで撮った元の画像は 4032 × 3024 ピクセルで、約1,220万ピクセルです。CSS ピクセル1つにつきデバイスピクセルが2つある画面で 760 ピクセルの列を埋めるには、横に約1,520ピクセルが必要です。そこで 1600 × 1200 にすれば、4:3 の比率を保ったまま192万ピクセルとなり、元の約16%に収まります。先にリサイズしてから、AVIF か WebP と、フォールバック用の JPG を保存しましょう。フルサイズの元画像のピクセル数は 1600 × 1200 版の6倍以上あり、その大部分はブラウザが縮小して捨てることになります。
• 透明な背景のロゴ。 デザイナーから受け取った PNG は 1000 × 500 ピクセルで、幅 200 CSS ピクセルで表示されます。CSS ピクセル1つにつきデバイスピクセルが2つある画面でも、400 × 200 あれば足ります。PNG か WebP のままにしましょう。JPG にすると透明な部分が単色で塗りつぶされ、色付きのヘッダーの上では四角い枠として見えてしまいます。デザイナーが SVG で書き出せるなら、さらに良い選択です。
• タイマーアプリのスクリーンショット。 文字とベタ塗りの色でできているので、PNG で保存します。JPG では文字のまわりに細かな斑点状のノイズが出ることがあり、写真の小さな誤差よりも読み手の目につきやすくなります。

LeedyBox の画像変換でファイルを変換する

画像変換は、1枚または複数の画像の形式を、画像データを LeedyBox にアップロードせずにブラウザ内で変換します。

1. 「ファイルを選択、またはここへドラッグ＆ドロップ」をクリックするか、PNG、JPG、WebP、BMP、GIF、AVIF ファイルをそこにドロップします。HEIC や SVG などそれ以外の形式のファイルや、ブラウザでデコードできないファイルは、メッセージが表示されて読み込まれません。
2. ファイルごとに形式メニュー（幅の広い画面では「To:」と表示）があり、初期値は JPG です。JPG、PNG、WEBP、BMP、AVIF、ICO をファイルごとに選ぶか、「一括変換オプション」の「すべての形式を設定...」で全ファイルにまとめて設定します。
3. 「変換してダウンロード」をクリックします。ファイルが1つなら、たとえば logo_converted.webp という名前で保存され、複数なら leedybox_converted_images.zip にまとめてダウンロードされます。

• ICO 以外では、画像の縦横のピクセル数は変わりません。先に画像リサイズでリサイズするか、画像圧縮の「幅と高さも制限する」を使いましょう。
• JPG、WebP、AVIF では、変換ツールはブラウザに 0〜1 の尺度で品質 0.92 を指定します。品質のスライダーはありません。この設定はファイルサイズより細部を優先するものです。また、WebP は非可逆で保存されます。可逆 WebP のオプションはないため、スクリーンショットや文字のグラフィックは PNG に変換しましょう。ファイルをもっと小さくしたい場合は、画像圧縮の品質スライダー（初期値 75）や目標ファイルサイズを使えます。画像圧縮設定の解説をご覧ください。
• JPG ファイルと、この変換ツールで作る BMP ファイルには透過がないため、透明な部分は白になります。BMP ファイルは非圧縮でもあり、1ピクセルあたり3バイト（各行は4バイトの倍数になるよう詰め物で埋められます）に 54 バイトのヘッダーが加わります。1200 × 800 の画像は、内容にかかわらず 2,880,054 バイト（約 2.9 MB）になるため、BMP はウェブページには向きません。
• ICO ファイルには PNG 画像が1つ入り、透過は保たれます。どちらかの辺が256ピクセルより長い画像は 256 × 256 の範囲に収まるよう縮小されるため、1000 × 500 のロゴは 256 × 128 になります。それより小さい画像は元のサイズのままです。16、32、48 ピクセルのサイズを含む favicon.ico に加えて、PNG のアイコンや Apple Touch Icon も作るには、ファビコン生成を使いましょう。
• AVIF は、お使いのブラウザが AVIF ファイルを作成できる場合にだけ選べます。現時点では作成できないブラウザも多く、その場合は「AVIF (このブラウザは非対応)」と表示されます。選んだ形式をブラウザが作成できない場合は（WebP を出力できるかどうかもブラウザによります）、メッセージが表示されて何も保存されません。PNG のデータが別の拡張子で保存されることはありません。複数のファイルを変換するときは、1つでもこのように失敗すると全体の処理が止まり、ZIP ファイルは作成されません。
• 各画像は描き直されて新たにエンコードされるため、元の画像の EXIF データ、GPS 位置情報、カラープロファイルは引き継がれません。また、アニメーション GIF、WebP、AVIF は1フレームだけの静止画になります。この変換ツールでは SVG、GIF、アニメーションのファイルは作成できません。

よくある問題と解決方法

• 透過ロゴのまわりに白や黒の四角が出る。 JPG か、透過のない BMP として保存された可能性があります。代わりに PNG か WebP を使いましょう。JPG で透過が失われる理由をご覧ください。
• PNG が元の JPG よりずっと大きい。 PNG はすべてのピクセルを、JPG のノイズや圧縮によるアーティファクトも含めて正確に保存します。また、変換しても JPG ですでに失われた細部は戻りません。写真には WebP か JPG を使いましょう。
• アップロードフォームが WebP や AVIF を受け付けない。 JPG と PNG しか受け付けないフォームもあります。写真は JPG に、透過のあるグラフィックは PNG に変換しましょう。拡張子を書き換えても形式は変わりません。
• WebP にしても JPG とほとんど変わらない、むしろ大きくなる。 元の JPG がすでに強く圧縮されていた可能性があります。変換ツールの品質 0.92 では細部が多く残り、JPG 自体のアーティファクトまで保存されるため、その分のデータ量がかかります。どちらの形式でもファイルが大きすぎる場合は、画像がカメラで撮ったままのフルサイズになっているのかもしれません。表示サイズにリサイズしてから画像圧縮を使い、結果を比べましょう。
• 色が元の画像よりくすんで見える。 変換ツールは各画像をブラウザの canvas に描画します。canvas は既定では sRGB で処理を行い、元のカラープロファイルは保持されません。そのため、Display P3 や Adobe RGB など、より広い色空間の写真では、特に鮮やかな色の一部が失われることがあり、広色域のディスプレイでは違いが目立ちやすくなります。写真編集ソフトから sRGB のコピーを書き出してそのソフト上で確認し、それを変換しましょう。
• スマートフォンの HEIC 写真が受け付けられない。 HEIC は変換ツールの対応形式に含まれていません。多くのスマートフォンでは写真を JPG として書き出したり共有したりできるので、そのコピーを変換しましょう。

公開前に確認すること

• 2種類のブラウザとスマートフォンでページを開きます。<picture> を使う場合は、AVIF と WebP の source を一時的に削除して、フォールバックも確認しましょう。
• 新しいファイルを元の画像と等倍で比べ、顔、文字、グラデーションを確認します。
• ブラウザの開発者ツールの「ネットワーク」パネルで、どのファイルがダウンロードされたかと、そのサイズを確認します。
• サイトにダークモードがある場合は、透過画像を明るい背景と暗い背景の両方で確認します。
• 元の画像は保管しておき、そこから変換しましょう。非可逆のファイルを保存し直すと、以前の誤差に新しい誤差が重なります。

よくある質問