ITに関する製品や企業の情報総合サイト TechTargetジャパン ホワイトペーパー ダウンロードセンター
TechTarget
ニュース
製品情報
キーマンズネット
ニュース
製品情報
TechFactory
ニュース
製品情報

ホワイトペーパー

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

技術文書

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

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

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

コンテンツ情報

公開日 2017/09/20 フォーマット PDF 種類 技術文書
ページ数・視聴時間 21ページ ファイルサイズ 12.4MB

要約

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

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

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

アンケート

※「アンケート回答」「続きを読む」には、下記ボタンを押して会員登録あるいはログインしてください。