レスポンシブWebデザインの難所、画像の切り替えを適切かつ簡単に行う方法

　Webサイトにアクセスできるデバイスが多様化したことにより、デバイスに応じて画像サイズを最適化するレスポンシブWebデザイン（RWD）の重要性が増している。PCやスマートフォン、タブレットといった違いだけでなく、高解像度か低解像度かという違いによっても最適な解像度が異なるからだ。

　このような環境の差を考慮しない場合、サーバ側から解像度の足りないぼやけた画像をクライアント側に送ってしまったり、逆にクライアント側で使われない画像を送ってしまったりすることがあり、ユーザー側にパフォーマンスの高いコンテンツを提供できなくなる。

　そこで必要となるのが適切な解像度の切り替えやアートディレクションを行えるレスポンシブ画像だ。それでは、適切なレスポンシブ画像を選択するためのポイントとは、どのようなものだろうか。本コンテンツでは、レスポンシブ画像と「Client Hints」を利用した画像の配信方法を紹介する。