技術文書

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

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

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

要約

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

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

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

会員限定で続きがご覧になれます。
Q1. このコンテンツに関連する製品/サービスについて、あなたの立場を1つお選びください。(必須)
Q2. このコンテンツの閲覧目的を1つお選びください。(必須)
Q3. このコンテンツに関連する製品/サービスの自社または顧客への導入予定時期を1つお選びください。(必須)
Q4. このコンテンツに関連する製品/サービスの導入予算について、あてはまるものを1つお選びください。(必須)
個人情報の取り扱いに関して

閲覧に際して、以下の事項に同意されたものと見なします。

  • 個人情報およびサービスの利用状況に関する情報は、TechTargetジャパンの 利用規約 とアイティメディアの プライバシーポリシー に基づき、アイティメディア株式会社が適切に管理いたします

コンテンツ情報

公開日2017/09/20
フォーマットPDF
種類技術文書
ページ数/視聴時間21ページ
ファイルサイズ12.38 MB
対象業種全業種向け
対象企業規模全企業規模向け