EdgeでJPGやPNGの画像を保存したつもりなのに、WebP・AVIFになって困る時は、元形式のダウンロードリンクを使うか、保存した画像を対応アプリでJPG・PNGへ変換します。まず配信された形式を確かめましょう。拡張子を.jpgに変えるだけでは、WebPやAVIFのデータがJPEGになることはありません。
ページ上の画像名が.jpgでも、サイトやCDNが別形式を返している場合があります。また、ブラウザーがページ内の別画像を選んでいることもあります。「Edgeが保存時に必ず変換した」と決めつけず、URL、応答、保存したファイルを分けて確認します。
目的に合う保存方法を選ぶ
| 目的 | 進め方 | 確認すること |
|---|---|---|
| サイトの元のJPG・PNGを取得したい | 配信元が用意する［オリジナルをダウンロード］などのリンクを使う | 表示用の縮小版や再変換版との違い。元画像が公開されていない場合は提供を依頼。 |
| 今あるWebP・AVIFをJPGへ変えたい | 対応する編集アプリで開き、別名保存／エクスポートのJPEGを選ぶ | JPGは透過を保存できない。背景色と再圧縮後の見た目を確認。 |
| 透過を残してPNGにしたい | 対応アプリでPNGへ別名出力する | 動く画像なら静止画になるか、必要なフレームが出るか。 |
| 同じURLがなぜ別形式になるか調べたい | Edge DevToolsのNetworkでContent-TypeとAcceptを確認する | URLの拡張子と応答形式が一致するとは限らない。 |
| WebP・AVIFを開けない | 利用するアプリの形式対応と、必要なコーデックを確認する | コーデック追加は閲覧への対応で、サイトの配信形式をJPGへ変える操作ではない。 |
JPG・PNGなのにWebP・AVIFで保存される原因
1. サイトがブラウザーに応じて画像形式を選んでいる
ブラウザーはHTTPのAcceptヘッダーで受け入れられる形式を伝えます。サイトやCDNが画像を最適化する構成では、同じ画像URLでもWebP・AVIFなどを返す場合があります。URL末尾の.jpgはデータ形式を証明するものではありません。
Accept、応答のContent-Type、キャッシュのVaryなどの役割はHTTP Semantics（RFC 9110）に定義されています。画像リクエストのAcceptは実際の画面で確認し、特定の文字列がすべてのEdgeの全リクエストで固定だとは考えないでください。
2. picture・srcsetで表示する画像が選ばれている
次は同じ絵の複数形式を用意するHTMLの例です。ブラウザーが対応条件に応じてsourceを選ぶため、imgのsrcにJPGが書かれていても、それが実際に表示される画像とは限りません。
<picture>
<source type="image/avif" srcset="/images/sample.avif">
<source type="image/webp" srcset="/images/sample.webp">
<img src="/images/sample.jpg" alt="sample">
</picture>
実際に選択されたURLはHTMLImageElement.currentSrcの公式説明で示されるcurrentSrcで確認できます。ただし、選択されたURLが分かることと、そのURLの応答がJPEGであることは別です。同じURLで形式を変える配信もあるため、応答も確認します。
3. 保存名と画像の中身が一致していない
Content-Dispositionなどが保存名のヒントを指定する場合もあります。保存ダイアログで.jpgという名前を入力できても、画像のデータはそのままのことがあります。形式を変えたい時は、画像を読み込んでJPEGやPNGとして出力する工程が必要です。
Edge DevToolsで配信形式を確認する手順
- 画像があるページでF12を押してDevToolsを開き、Networkを選びます。記録が始まってからページを再読み込みします。
- Imgなどのフィルターで画像リクエストを探し、対象を選びます。
- HeadersでリクエストのURL・Accept、応答のステータス・Content-Typeを確認します。Previewで目的の画像かも確かめます。
- Elementsで対象のimgを選び、必要に応じてPropertiesのcurrentSrcを確認します。srcだけを見て元のJPGを受信したと判断しないようにします。
- 画像を保存し、対応アプリで開けるか、形式・寸法が目的に合うかを確認します。
MicrosoftのEdgeのNetworkで通信を調べる手順に沿って進められます。DevToolsを開く前のリクエストが記録されていない場合は再読み込みが必要です。
| 値や結果 | 分かること・限界 |
|---|---|
| Content-Type: image/webp／image/avif | その応答がWebP／AVIFとして配信されている。ファイルの実体を確かめる材料にする。 |
| Content-Type: image/jpeg／image/png | JPEG／PNGとしての応答。ただしヘッダーが誤っている場合もあり、重要な用途ではファイルを開いて確認。 |
| Vary: Accept | キャッシュがAcceptによって応答を分けるための情報。これだけで元画像をJPGとして取得できる保証にはならない。 |
| Content-Type: text/htmlやログインページの表示 | 画像ではなくページを取得した可能性。名前を.jpgにする方法では解決しない。 |
保存したWebP・AVIFをJPG・PNGへ変換する
編集アプリで別名保存・エクスポートする
- 保存したファイルを、WebP・AVIFに対応する画像編集アプリで開きます。
- ［名前を付けて保存］または［エクスポート］でJPEG／PNGが選べるか確認します。
- 元ファイルと異なる名前・保存先へ出力します。透過を残すならPNG、JPGにするなら背景色を確認します。
- 出力ファイルを開き直し、形式、縦横の寸法、向き、色、透過の有無を確認します。
Windows 10／11というOS名だけで、Photos・ペイントなどのすべての版がすべてのAVIF・WebPに対応するとは判断できません。ブラウザーで見える、Explorerでサムネイルが出る、編集アプリで開けるという各段階も分けて確認します。OSの移行やコーデックの導入だけで、配信元がJPGを返すようになるわけではありません。
ImageMagickを使う場合の静止画変換例
ImageMagick 7のmagickコマンドを使う場合の例です。入力形式に対応する構成が必要で、先に元ファイルを保管します。出力名は例なので、既存ファイルと同じ名前を使わないでください。
magick identify -verbose "input.avif"形式、寸法、フレーム、プロファイルなどを確認します。identifyの読み取り項目はImageMagickの公式説明で確認できます。読み込みできない場合は入力対応を確認し、拡張子の変更で無理に開こうとしないようにします。
magick "input.avif[0]" -background white -alpha remove -alpha off -quality 92 "converted-image.jpg"このJPG例は先頭フレームだけを選び、透過を白い背景に合成してから出力します。quality 92は例であり、画質劣化がないという意味ではありません。透過処理はImageMagickのAlpha Remove、先頭フレームの選択は入力ファイルとフレーム指定を参照できます。アニメーションを残す目的にはこの例を使いません。
magick "input.webp[0]" "converted-image.png"PNGの例も先頭フレームの静止画を出力します。PNGにしても、元のWebP・AVIFで既に失われた画質や削除されたメタデータが戻るわけではありません。変換後に必要な透明部分が保たれるか確認してください。
ICCやEXIFを残したい処理で-stripを付けるのは適切ではありません。-stripはプロファイルやコメントなどを除去するオプションです。色管理・メタデータ保持が必要な時は、ImageMagickのオプション仕様を確認し、変換前後のidentify -verboseと納品先アプリで比較します。上の例も、すべてのメタデータを全形式間で保持する保証ではありません。
Acceptヘッダーを指定して取得する時の注意点
AcceptヘッダーをJPEGとPNGに変えてもサーバーが必ず従うとは限らないため、受け取ったデータの形式を確認してから扱います。
image/jpeg,image/png,image/*や*/*を含めた指定は、WebP・AVIFを完全に除外する指定ではありません。image/*はすべての画像のサブタイプを含みます。JPEG・PNGだけを希望する例ではAccept: image/jpeg,image/pngとしますが、該当形式がない時にサーバーは406を返す場合も、希望を無視して別形式を返す場合もあります。
次は認証不要で利用できる画像URLの取得例です。取得と変換を混同しないよう、形式確認前のファイル名は.binにします。実際の画像URLに置き換え、新しい作業フォルダーで実施してください。サインインが必要な画像や、署名付きURLのパラメーター変更にはそのまま適用しません。
$imageUri = Read-Host "取得できる画像URLを入力"
$downloadName = "downloaded-" + [guid]::NewGuid().ToString("N") + ".bin"
$downloadPath = Join-Path (Get-Location).Path $downloadName
$imageHeaders = @{ Accept = "image/jpeg,image/png" }
Invoke-WebRequest -Uri $imageUri -Headers $imageHeaders -OutFile $downloadPath -UseBasicParsing -ErrorAction Stop
Get-Item -LiteralPath $downloadPath | Select-Object FullName, LengthPowerShellのInvoke-WebRequestは応答をファイルに保存するコマンドで、JPEGへ再エンコードするコマンドではありません。この例ではOutFileとPassThruを併用せず、保存後のファイルを確認します。取得したものがHTMLや別形式だった場合は、その内容に合った対処をします。
curl.exe --fail --location --header "Accept: image/jpeg,image/png" --dump-header response-headers.txt --output downloaded-image.bin -- "https://example.com/image"Windowsでcurlの実行ファイルを指定する例です。curlのあるmacOS／Linuxではcurl.exeをcurlに読み替えます。response-headers.txtとdownloaded-image.binが既にある場所では実行しないでください。curlの公式マニュアルでは–dump-headerで応答ヘッダー、–outputで本文を別々に保存できます。リダイレクト時には複数のヘッダーが記録されるので、最終応答のContent-Typeと取得ファイルを確認します。
CDNの形式パラメーターは配信元ごとに確認する
URLにf=autoが見つかっただけで、どのサイトでもf=pngやf=jpegにすれば目的の元画像を取得できるとは限りません。パス方式、署名、利用できる出力形式はサービスやサイト実装ごとに異なります。配信元が公開している仕様やダウンロードリンクを優先します。
例えばCloudflare Imagesの現行パラメーター仕様では、外部画像の変換URLとして/cdn-cgi/image/〈オプション〉/〈元画像〉を示し、format／fでauto、jpegなどを指定できます。一方、この資料のformat一覧にpngは掲載されていません。また、format=jpegは元データをそのまま取得することではなく、JPEGへ変換した配信です。Cloudflareを使う全サイトに同じURL変更が使えるとは限りません。
IEモードはJPG保存の確実な解決策ではない
IEモードは旧来の業務サイトとの互換性を維持するための機能です。古いエンジンがWebP・AVIFを扱えないことから、配信元が必ずJPG・PNGを提供するとは言えません。画像そのものが表示できない場合やページ機能が壊れる場合もあり、一般の画像保存のために設定を追加する方法を第一候補にはしません。
MicrosoftのIEモードの利用方針でも、旧エンジンは管理する信頼済みのレガシーサイトに限定し、それ以外は現代のエンジンで扱う方針が示されています。社内の既存IEモード運用がある場合は、その運用に従ってください。
配信側でJPG・PNGの保存導線を用意する
サイトを管理する側は、表示用の最適化画像と、利用者が保存する画像を分けた導線を検討します。元のJPG・PNGを提供できる場合は、［オリジナルを保存］のリンクと、配信するContent-Typeに合う保存名を用意します。表示はWebP・AVIFのままでも、保存用の別URLを提供する設計は可能です。
Content-Dispositionで.jpgという保存名を付けるだけでは、本文がWebPのままならJPEGにはなりません。保存用URLが自動最適化の対象か、レスポンス形式と名前が合うか、元画像か再変換版かを検証します。
よくある質問
ChromeやFirefoxに変えればJPGで保存できますか？
ブラウザーの対応形式、要求ヘッダー、ページの画像選択が変わる可能性はありますが、どのブラウザーでも元のJPGを取得できる保証はありません。元のダウンロードリンクか、必要な形式への変換を使います。
コーデックを追加するとEdgeの保存形式も変わりますか？
Windowsアプリでその形式を開けるようにすることと、サイトの応答を変えることは別です。閲覧できるようになっても、JPG・PNGでの利用が必要なら、対応アプリで別名出力してください。
スクリーンショットで代わりに保存できますか？
画面に表示された状態を記録できますが、元画像の寸法、透明部分、アニメーション、メタデータは保持できません。原寸の素材や印刷用データが必要な用途では、配信元のファイルや正式な変換を優先します。
Edgeの画像保存で困った時は、受け取った形式を確認し、元形式の取得と変換を分けて選びます。拡張子の変更、IEモード、Acceptの指定に変換保証を期待せず、出力したファイルを使うアプリで最後に確認してください。
コメント