SafariのWebP画像ドラッグ問題とDaring FireballでのPNG/JPEG使用
Safari拡張機能「ChangeTheHeaders」の開発者Jeff Johnsonは、ブラウザのAcceptヘッダー設定が原因でウェブページから画像をドラッグダウンロードする際に意図しないWebP形式で保存される問題を解明し、ヘッダーをカスタマイズ可能にする拡張機能を提供した。
キーポイント
問題の発見と原因究明
Safariでウェブページから画像をドラッグダウンロードすると、元のPNG/JPEG形式ではなくWebP形式で保存される現象が発生し、調査の結果、ブラウザのAccept HTTPリクエストヘッダーが原因であることが判明した。
Acceptヘッダーの仕組み
SafariのデフォルトAcceptヘッダーではimage/webpとimage/pngが同等の優先度（q=1）であり、ウェブサーバーがどちらの形式を返すか決定するため、URLの拡張子に関わらずWebPが提供される場合がある。
解決策としての拡張機能
開発者Jeff Johnsonは「ChangeTheHeaders」拡張機能を作成し、ユーザーがAcceptヘッダーをカスタマイズして好みの画像形式を優先的に受け取れるようにした。
拡張機能の追加機能
ChangeTheHeadersはUser-Agentの偽装やAccept-Languageヘッダーのカスタマイズも可能で、特定のウェブサイトでのブラウザ挙動を制御できる。
影響分析・編集コメントを表示
影響分析
この記事は、一般的なウェブユーザーが直面する具体的な技術的問題とその解決策を詳細に説明しており、HTTPプロトコルの理解を深める教育的価値がある。ただし、AI/テクノロジー業界全体への直接的影響は限定的であり、主にウェブ開発者や上級ユーザー向けの実用的な情報提供に留まっている。
編集コメント
技術的な問題解決のプロセスを丁寧に追った良質な記事だが、AI/テクノロジーニュースとしての業界全体への影響度は低い。ウェブ標準と実装のギャップについての具体例として参考になる。
最近の『The Talk Show』のエピソードで、Jason Snellが昨年私が遭遇し始めた奇妙な問題について言及しました。私のMacでは、Safariでウェブページから画像をドラッグアウトすると、WebP形式の画像が得られることがありました。場合によっては気にしないこともありました。しかし、普通にそうやって画像をダウンロードするのは、その画像をDaring Fireballで公開（あるいは単に自分のコピーをホスト）したいときです。そして私はWebP画像を公開しません――互換性の点でPNGとJPEGを好んでいます。
奇妙だったのは、元のウェブページのソースを表示すると、元の画像は通常PNGやJPEG形式だったことです。画像だけを新しいタブで開けば、PNGやJPEG形式で得られます。しかし、元のウェブページからドラッグしてダウンロードすると、WebPになってしまうのです。これは私にとって全くの「WTF」（一体どういうこと？）でした。
私は友人で、優れたSafari拡張機能『StopTheMadness』の作者でもあるJeff Johnsonを頼りました。Johnsonは何が起きているのか説明できるだけでなく、実際に『ChangeTheHeaders』という新しいSafari拡張機能を作成し、私の問題を解決してくれたのです。Johnsonが昨年『ChangeTheHeaders』を発表した際の説明は以下の通りです：
調査の結果、違いはAccept HTTPリクエストヘッダーにあることがわかりました。これはウェブブラウザが受け入れるレスポンスの種類を指定するものです。Safariの画像に対するデフォルトのAcceptヘッダーは以下です：
Accept:
image/webp,image/avif,image/jxl,image/heic,image/heic-sequence,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
image/webpがリストの先頭にありますが、順序は実際には関係ありません。種類の優先順位を決めるのは品質値であり、;q= という接尾辞で指定されます。値の範囲は0から1で、指定がない場合はデフォルト値の1になります。したがって、image/webpとimage/pngは優先順位が等しく、品質値も1で同じです。よって、どの画像形式を提供するかはウェブサイト次第となります。この場合、画像URLに.pngという接尾辞があるにもかかわらず、ウェブサイトはWebP画像を提供することを選んだのです。URLにおいては、ファイルパスと異なり、「ファイル拡張子」はたとえ存在してもほとんど意味を持ちません。ごく単純なウェブサーバーはURLをローカルファイルパスに直接マッピングしますが、より複雑なウェブサーバーはURLに対してほぼ何でも好きな処理を行えます。
この現象には本当に参っていました。Johnsonのおかげで、なぜそれが起こるのか理解でき、さらに「設定すればあとは忘れてよい」シンプルな修正ツールも手に入りました。Johnsonは次のように書いています：
ChangeTheHeadersで何ができるでしょうか？おそらく最大の売りは、User-Agentのスプーフィング（偽装）になるでしょう。この拡張機能では、URLドメインごとにUser-Agentをカスタマイズできます。例えば、Chromeに特別な扱いをするGoogleのウェブアプリ上で、SafariにChromeのふりをさせることができます。また、YouTubeなど一部のウェブサイトのデフォルトの言語処理が気に入らない場合は、Accept-Languageヘッダーをカスタマイズすることもできます。
以下は、私が一年前にChangeTheHeadersを初めてインストールした時に適用したカスタムルールです（スクリーンショット）：
ヘッダー: Accept
値: image/avif,image/jxl,image/heic,image/heic-sequence,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
URLドメイン: «すべてのドメインに適用する場合は空白»
URLフィルター: «すべてのURLに適用する場合は空白»
リソースタイプ: image
それ以来、WebP形式の画像には一度も出会っていません。
ChangeTheHeadersはSafariが動作するすべての環境――Mac、iPhone、iPad、Vision Pro――で動作し、App Storeでわずか7ドルで入手できます。
★
原文を表示
During the most recent episode of The Talk Show, Jason Snell brought up a weird issue that I started running into last year. On my Mac, sometimes I’d drag an image out of a web page in Safari, and I’d get an image in WebP format. Sometimes I wouldn’t care. But usually when I download an image like that, it’s because I want to publish (or merely host my own copy of) that image on Daring Fireball. And I don’t publish WebP images — I prefer PNG and JPEG for compatibility.
What made it weird is when I’d view source on the original webpage, the original image was usually in PNG or JPEG format. If I opened the image in a new tab — just the image — I’d get it in PNG or JPEG format. But when I’d download it by dragging out of the original webpage, I’d get a WebP. This was a total WTF for me.
I turned to my friend Jeff Johnson, author of, among other things, the excellent Safari extension StopTheMadness. Not only was Johnson able to explain what was going on, he actually made a new Safari extension called ChangeTheHeaders that fixed the problem for me. Johnson, announcing ChangeTheHeaders last year:
After some investigation, I discovered that the difference was the
Accept HTTP request header, which specifies what types of
response the web browser will accept. Safari’s default Accept
header for images is this:
Accept:
image/webp,image/avif,image/jxl,image/heic,image/heic-sequence,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
Although image/webp appears first in the list, the order
actually doesn’t matter. The quality value, specified by
the ;q= suffix, determines the ranking of types. The range of
values is 0 to 1, with 1 as the default value if none is
specified. Thus, image/webp and image/png have equal
precedence, equal quality value 1, leaving it up to the web site
to decide which image type to serve. In this case, the web site
decided to serve a WebP image, despite the fact that the image
URL has a .png suffix. In a URL, unlike in a file path, the
“file extension”, if one exists, is largely meaningless. A very
simple web server will directly match a URL with a local file
path, but a more complex web server can do almost anything it
wants with a URL.
This was driving me nuts. Thanks to Johnson, I now understand why it was happening, and I had a simple set-it-and-forget-it tool to fix it. Johnson writes:
What can you do with ChangeTheHeaders? I suspect the biggest
selling point will be to spoof the User-Agent. The extension
allows you to customize your User-Agent by URL domain. For
example, you can make Safari pretend that it’s Chrome on Google
web apps that give special treatment to Chrome. You can also
customize the Accept-Language header if you don’t like the
default language handling of some website, such as YouTube.
Here’s the custom rule I applied a year ago, when I first installed ChangeTheHeaders (screenshot):
Header: Accept
Value: image/avif,image/jxl,image/heic,image/heic-sequence,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
URL Domains: «leave blank for all domains»
URL Filter: «leave blank for all URLs»
Resource Types: image
I haven’t seen a single WebP since.
ChangeTheHeaders works everywhere Safari does — Mac, iPhone, iPad, Vision Pro — and you can get it for just $7 on the App Store.
★
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み