![](http://withcode.tech/media/wp-content/uploads/2023/11/WithCodeMedia-1-pc.png)
![](http://withcode.tech/media/wp-content/uploads/2023/11/WithCodeMedia-2-pc.png)
![](http://withcode.tech/media/wp-content/uploads/2023/11/WithCodeMedia-3-pc.png)
![](http://withcode.tech/media/wp-content/uploads/2023/12/WithCodeMedia-4-pc.png)
WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc
![](http://withcode.tech/media/wp-content/uploads/2023/12/WithCodeMedia-1-sp.png)
![](http://withcode.tech/media/wp-content/uploads/2023/12/WithCodeMedia-2-sp.png)
![](http://withcode.tech/media/wp-content/uploads/2023/12/WithCodeMedia-3-sp.png)
![](http://withcode.tech/media/wp-content/uploads/2023/12/WithCodeMedia-4-sp.png)
WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp
Webデザインにおいて、レスポンシブ対応は不可欠です。特に画像のレスポンシブ対応は、サイトのパフォーマンスと見た目の両方に大きく影響します。
本記事では、画像のレスポンシブ対応に焦点を当て、デバイスごとに最適化された画像を表示する方法を詳しく解説します。
レスポンシブデザインとは、WebページがPC、スマートフォン、タブレットなど異なるデバイスの画面サイズに応じて、自動的に最適なレイアウトに変わるデザイン手法です。レスポンシブ対応をすることで以下のメリットが挙げられます。
ユーザー体験の向上
デバイスに適した画像を表示することで、閲覧体験が向上します。
ページ読み込み速度の最適化
適切なサイズの画像を使用することで、不要なデータ転送を減らし、ページの読み込み速度を向上させます。
SEO対策
Googleはモバイルフレンドリーなサイトを高く評価するため、レスポンシブ対応は検索順位の向上にもつながります。
レスポンシブデザインについては、こちらの記事で詳しく解説しています。
レスポンシブデザインを意識し、デバイスごとに適切な画像を配置することにより、より見やすい画面表示を実現することができます。ここでは、その方法を解説していきます。
この方法は、PC(パソコン)とSP(スマートフォン)用の異なる画像を用意し、CSSで切り替える方法です。
<div class="banner">
<img src="banner-pc.jpg" alt="PC用バナー" class="banner-pc">
<img src="banner-sp.jpg" alt="SP用バナー" class="banner-sp">
</div>
<img>
要素を用意し、それぞれにPC用とSP用のクラスを付与します。/* 共通スタイル */
.banner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.banner img {
width: 100%;
height: auto;
}
/* デフォルトでPC用画像を表示、SP用画像を非表示 */
.banner-pc {
display: block;
}
.banner-sp {
display: none;
}
/* スマートフォン向けのスタイル */
@media screen and (max-width: 767px) {
.banner-pc {
display: none;
}
.banner-sp {
display: block;
}
}
.banner-pc { display: block; }
: PC用画像を表示します。.banner-sp { display: none; }
: SP用画像を非表示にします。@media screen and (max-width: 767px) { ... }
: 画面幅が767px以下の場合に適用されるスタイルを定義します。このような、デバイスごとのCSS定義をメディアクエリと言います。.banner-pc { display: none; }
: PC用画像を非表示にします。.banner-sp { display: block; }
: SP用画像を表示します。この実装により、以下の動作が実現できます。
srcset
属性を使用すると、ブラウザが適切な画像を選択できるようになります。
<img src="banner-default.jpg"
srcset="banner-sp.jpg 480w, banner-tablet.jpg 768w, banner-pc.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
alt="レスポンシブバナー">
srcset
: デバイスの画面幅に応じて使用する画像を指定します。sizes
: 画面サイズに応じて、画像がどのくらいの幅で表示されるかを指定します。picture
要素を使用すると、より細かい制御が可能になります。
<picture>
<source media="(max-width: 480px)" srcset="banner-sp.jpg">
<source media="(max-width: 768px)" srcset="banner-tablet.jpg">
<img src="banner-pc.jpg" alt="レスポンシブバナー">
</picture>
この方法では、指定した条件に合致する最初のsource
要素の画像が使用されます。上記では、表示部分が480pxまではbanner-sp.jpg
が、768pxまではbanner-tablet.jpg
が、それ以上の大きさの場合は、banner-pc.jpg
が適用される仕組みとなっています。
画像の読み込み数が増えると、それに伴い表示時間が遅延したりと、パフォーマンスが落ちてしまうことがあります。その場合の対策としては、以下の方法が挙げられます。
画像の圧縮
各デバイス用に最適化された画像を用意し、不要なデータを削減します。
遅延読み込み
画面外の画像は遅延読み込みを使用し、初期読み込み時間を短縮します。
次世代フォーマットの使用
WebP(2010年にGoogleが開発した新型の画像ファイル形式)などの次世代画像フォーマットを使用し、ファイルサイズを削減します。
これらの方法を活かすことで、読み込み速度を上げることが可能になり、より高いユーザ体験を実現できるでしょう。
レスポンシブ対応の画像実装は、Webサイトのパフォーマンスとユーザー体験を大きく向上させます。CSSメディアクエリ、srcset属性、picture要素など、様々な方法がありますが、プロジェクトの要件に応じて最適な方法を選択することが重要です。
適切なレスポンシブ画像対応を行うことで、モバイルフレンドリーなサイト作りができ、SEO面でも有利になります。デバイスの最新版が出るなど変化が起きやすい部分ではあるので、常に最新のWeb標準に注目し、効果的なレスポンシブデザインを実現しましょう。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!
公式サイト より
今すぐ
無料カウンセリング
を予約!