IT製品導入に関する技術資料を多数掲載 ホワイトペーパーダウンロードセンター
  • @IT
  • ITmedia エンタープライズ
  • ITmedia マーケティング
  • TechTarget
  • キーマンズネット
  • ITmedia ビジネスオンライン
  • ITmedia NEWS

アカマイ・テクノロジーズ合同会社

技術文書

アカマイ・テクノロジーズ合同会社

レスポンシブWebデザインで適切な画像切り替えを実現する簡単な方法とは

ユーザーがWebサイトにアクセスする多様なデバイスに対し、レスポンシブWebデザイン(RWD)を実現することはユーザー体験にとって非常に重要な要素だ。しかしRWDは開発者にとっては悩みの種でもある。どんな解決法があるのだろうか。

コンテンツ情報
公開日 2017/09/20 フォーマット PDF 種類

技術文書

ページ数・視聴時間 21ページ ファイルサイズ 12.4MB
要約
 スマートフォンやタブレットなど、Webサイトを閲覧するデバイス環境が多様化したため、ユーザーの閲覧環境に合わせて画像を最適な表示とするレスポンシブWebデザイン(RWD)が注目されている。デバイスの大きさだけでなく、解像度の高い低いに合わせた画像の最適化も必要となる。

 こうしたユーザーのWeb閲覧環境への配慮をしないと、解像度の低い不鮮明な画像を配信してしまったり、逆にクライアント側で不要な画像を無駄に配信してしまい、表示遅延やメモリ消費量の増大を招いてしまうことがある。

 そこで重要になるのが、適切な解像度の切り替えやアートディレクションを行えるレスポンシブ画像である。本コンテンツでは、適切なレスポンシブ画像を選択・提供するための技法を解説。具体的なWebページの表示例と記述内容を例示しながら、レスポンシブ画像と「Client Hints」を利用した画像の配信方法を紹介する。