SafariのWebP画像ドラッグ問題とDaring FireballでのPNG/JPEG使用
本文の状態
日本語全文を表示中
詳細モードで約3分の本文を読めます。
同じ出来事の情報源
この情報源を基点に整理
Andrej Karpathy 厳選
Jason Snellが指摘したSafariのWebP画像ドラッグ問題について、John GruberはDaring Fireballでの互換性確保のためPNGやJPEGを好むと説明し、WebP形式の扱いに言及した。
Source Article
元記事を日本語で読む
本文に関係しない購読案内、埋め込み通知、サイト内プロモーションは除いています。
最近の『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デイリーブリーフで今日の重要ニュースをまとめ読み