Gyazoが配信するスクリーンショット画像にContent-DPR ヘッダーを付与するようにする変更を先日行いました。新しくアップロードされた画像に関しては一律でこのHTTPヘッダーが付与されるようになっています。
% curl -I https://i.gyazo.com/a113d75559f81cfbdddfec35354b78b0.png | grep content % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 0 106k 0 0 0 0 0 0 --:--:-- 0:00:03 --:--:-- 0 content-type: image/png content-length: 108629 content-dpr: 2.0
この記事では今回Gyazoで配信する画像に付与することにした Content-DPR ヘッダーについて紹介します。
（この記事で紹介する情報は記事公開時のものです。）
Content-DPRヘッダーについて
Content-DPRヘッダーはHTTP Client Hintsの1つとして仕様のEditor's Draftが書かれていたものです（先日の第7版でHTTP Client Hintから削除され、HTMLの仕様に含める方向で進められています）。その名の通り配信するコンテンツのDPR(Device Pixel Ratio)をクライアントに対して通知することが出来るヘッダーになります。
これまで画像をHTML内に含めて表示する際には画像自体のDPRについては考慮されずに表示が行われてきました。例えば、Retinaディスプレイで撮影されたスクリーンショットをHTMLに埋め込んで表示する時には縦横それぞれ2倍のサイズで表示されてしまいます。もちろんGyazoにアップロードしたスクリーンショットも同様でした。
この問題を解決するものがContent-DPRヘッダーです。Content-DPRヘッダーが付与されている画像はブラウザ等のクライアントが対応していれば表示時にコンテンツのDPRをヘッダーから取得し、表示時のサイズの決定等に利用してくれるということが期待されています。実際に対応しているChromeでは、Content-DPRヘッダーが考慮され、naturalWidthやnaturalHeightが計算され、表示時に利用されています。
以下にサンプルを提示します。現状ではGoogle Chromeのみが対応済みですので、Google Chromeで御覧ください。
before ( Content-DPR ヘッダーなし)
after ( Content-DPR ヘッダーあり)
Gyazoでの導入について
Gyazoはスクリーンショットを主として扱う画像サービスです。最近においてはMacのRetinaディスプレイに代表されるようなDPRが1より大きい環境でスクリーンショットを撮影されるユーザーさんが多くいらっしゃることを我々は認識していました。そして、それらの画像が皆さんの画面上で意図せず大きく表示されるということをなんとか回避できないかと考えてきました。そのために画像のアップロード時にDPRを付与し、Gyazo上の画像ページでの表示時にはその値を考慮し画像の表示サイズをコントロールするという処理を提供してきました。
ですが、Gyazoにアップロードされた画像はGyazo上での表示に留まらず、（GyazoのようにスクリーンショットのDPRを知ることが出来ず、画像を適切なサイズに縮小表示する術を持たない）Scrapboxや様々なウェブサイト、ブログやチャットなどの上で画像そのものが展開され閲覧されることが多くあります*1。このContent-DPRヘッダーはクライアントにDPRを伝えることができ、またクライアントが適切な大きさで表示をしてくれるというものです。Gyazoの配信する画像にこのヘッダーを付与することはGyazoを利用しているユーザーの皆さんが自由にスクリーンショットを貼ったり、またそれを閲覧することを助けてくれると大いに期待しています。
参考
- igrigorik/http-client-hints
- Blinkでの画像のNaturalSizeの導出過程を追う - daiiz
- Automating Resource Selection with Client Hints | Web | Google Developers
- 935216 - (client-hints) Implement Client-Hints HTTP header
- 145380 – Add Content-DPR header support
*1:このような場合でも画像ページのシェアメニューよりコピーできるHTMLを利用することでDPRを考慮したスタイルを適用できるようになっています
