Gyazoが配信する画像にContent-DPRヘッダーを付与するようになりました

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を利用しているユーザーの皆さんが自由にスクリーンショットを貼ったり、またそれを閲覧することを助けてくれると大いに期待しています。