レスポンシブ画像の新しいアプローチである srcsetsizes 属性の入門記事 Srcset and sizes を日本語に翻訳し、srcset と sizes として公開しました。

srcset と sizes

絵本風のイラストレーションと平易な文章のためとっつきやすそうに見えるものの、内容はかなりややこしいです。というか「レスポンシブ画像がいかにややこしいか」がテーマのようなもので、僕も最初に読んだときはすんなり理解できませんでした。またレスポンシブ・レイアウトをある程度理解していることを前提としているし、ビューポートや画面密度といったキーワード、vw 単位といったものはとくに説明されずに話が進むので、わりかしハードルは低くないです。しかし、いま HTML を書いているひとの多くが直面しているであろうレスポンシブ画像の問題について、入門記事としてうってつけなのは間違いないと思います。とくに、製作者とブラウザーで画像の描画について知っていることが食い違っているというあたりはわかりやすくていいです。

記事中の画像は、Picturefill ライブラリのちからを借りて、実際に srcsetsizes を使っています。Picturefill はいくつかのプロジェクトで使ってみましたが、じゅうぶん実用に耐えるという感触です。

イラストレーションの言葉も日本語に訳されていますが、これは著者のエリックさんがみずから描いてくれたものです。翻訳の許諾を求めるために連絡したところ、快諾してくれたうえ、「おれ、ハイスクール時代に日本語ちょっとやってたし、絵も描き直すよ!」と申し出てくれました。サンキュー、エリック!