#content-dpr

Original post by Pasta-K, Nota Software Engineer on 2019-03-22. This was translated from Japanese.

This week we added support for the Content-DPR header to all screenshots and images shared with Gyazo, potentially a world first. The header makes screenshots with a Device Pixel Ratio greater than 1 display at the proper size on all screens and it’s only possible on Gyazo.

TLDR; To have your retina/4k images/screenshots viewed at the correct size on any device you can use Gyazo links or embeds. No more undesirably huge screenshots of tiny things.

In this article, I decided to focus on how images delivered by Gyazo are using the Content-DPR header. The information in this article is accurate at the time it was written.

About the Content-DPR header

The Content-DPR header details are now written as one of the HTTP Client Hints according to the editor's draft of the 7th edition HTTP Client Hints specification, removed from the IETF Draft, and are in the process of being included in the HTML specification as of a few days before this article was written.

As the name suggests, this is a header that can notify the client of the DPR (Device Pixel Ratio) of the content being delivered.

Until now, when displaying an image in HTML, it was done without considering the DPR of the content itself. For example, when embedded in HTML, a screenshot taken on a Retina display would be displayed at double the original size in both the vertical and horizontal directions. Of course, screenshots uploaded to Gyazo were the same.

The solution to this problem is the Content-DPR header. If the client such as a modern browser supports them, the Content-DPR header details are acquired at the time of display and will be used to determine the appropriate size for the content. Currently the Content-DPR header is supported by Google Chrome with the naturalWidth and naturalHeight calculated and used at the time of display.

A sample is presented below. Currently, only Chrome is supported, so please look at it with Chrome.

Before (Without Content-DPR header)

naturalWidth: 1102 

naturalHeight: 762

After (with Content-DPR header)

naturalWidth: 551 

naturalHeight: 381

About the Introduction of Content-DPR to Gyazo images

Gyazo is an image-sharing service that mainly handles screenshots and is the first app where you can share scale-sensitive images from a retina display and have it displayed at the right size, such as a small UI element like a navigation bar or menu item.

Recently, we were aware that many users were taking screenshots with DPR greater than 1, such as on a Mac Retina display so naturally I was wondering if the fact that those images appear unintentionally large on your screen could be avoided. To that end, we now save the DPR when the image is uploaded and use this to provide processing that controls the display size of these images on Gyazo.

However, the images uploaded to Gyazo do not only live on Gyazo but are often expanded and viewed on Scrapbox as well as many other websites, blogs, and chat apps where the final display size may change. In such cases, it is possible to use the included DPR by using HTML embed code which can be copied easily from the share menu on any Gyazo image page.

With this change the Content-DPR header can convey the correct DPR to the client, and the client can display the image at an appropriate size. I sincerely hope you enjoy sharing screenshots that can be viewed at the proper size. 

References for this post

igrigorik/http-client-hints

Blinkでの画像のNaturalSizeの導出過程を追う - daiiz  (Post is in Japanese)

Automating Resource Selection with Client Hints  |  Web  |  Google Developers

935216 - (client-hints) Implement Client-Hints HTTP header