レスポンシブデザインで画像サイズを最適化する方法【初心者向け】

レスポンシブデザインは、レイアウトを柔軟に変更できますが「画像」に関しては完全に機能していません。

レスポンシブデザインに対応したホームページでも、画像はテキストのように最適化されない場合もあるため、個別での設定が必要です。

しかし、レスポンシブデザインの画像サイズを調整する上で、

『各デバイスに最適な画像サイズがわからない』
『画像サイズを最適化する方法が知りたい』
『背景画像の最適化方法も知りたい』

上記のような課題が生じるかと思います。

本コラム記事では、ホームページ作成者様へ向けて「レスポンシブデザインで画像サイズを最適化するための必要な知識」「画像サイズの最適化方法」「注意点」を紹介しています。

レスポンシブデザインで画像サイズを最適化するに必要な単位

レスポンシブデザインを実装する前に、画像サイズの最適化に必要な単位を理解しましょう。

下記単位を理解しておくと、画像サイズの最適化がスムーズになります。

「px」

px（ピクセル）は、ディスプレイでよく使用される画素数の単位です。

CSSの仕様書によると、pxは「absolute units =絶対的な単位」と表現されています。

pxは、ユーザーの閲覧環境によって左右されるため、自分がみている大きさを全ての環境で再現することはできないと覚えておきましょう。

「em」

em（エム）は、サイズを「１００」や「１」として、相対的に指定するための単位です。

emの基準となるのは、親要素です。 たとえば、親要素のテキストが１５pxであれば「１em=１５px」になります。

２emになると、pxは２倍の「３０px」になると覚えておきましょう。

「%」

%（パーセント）もemと同様で、親要素基準で相対的にサイズを指定するための単位です。

たとえば、親要素のテキストが「１０px」で、子要素で「３００%」と指定した場合、３倍のサイズを指定できるようになります。

基本的な使い方はemと同じです。

「vw」

vw（Viewport Width）は、ブラウザの表示領域の幅に対する割合です。

たとえば「１vw」と指定した場合、ブラウザで表示される幅は「１％」になります。

「vh」

vh（Viewport Height）は、ブラウザの表示領域の高さに対する割合です。

たとえば「１vh」と指定した場合、ブラウザで表示される高さは「１％」になります。

vwとvhは、ブラウザの表示されている領域に依存すると覚えておきましょう。

要素をWebページの高さいっぱいに配置したい場合は「100vh」を活用します。

レスポンシブデザインに対応した画像の最適化方法は３つ

レスポンシブデザインに対応した画像サイズの最適化方法を３つ紹介します。

用途別に最適化方法をまとめているので、下記内容を参考にしてください。

1.画面サイズに合わせる方法

画面サイズに合わせて画像を最適化する場合は、下記要素をCSSのスタイルシートに記載します。

img {max-width：100％}

上記の要素では、ユーザーが画面の横幅を「広げる」「縮める」の動作をしても比率を維持できます。

2.横幅いっぱいに合わせる方法

「1.画面サイズに合わせる方法」で紹介した要素は、親要素に依存した方法となります。

そのため、もし親要素の横幅が画面よりも狭いと、画像サイズも画面の横幅より狭く表示されてしまいます。

そんなときは、親要素に依存しないvwを活用しましょう。

img { width: 100vw; }

vwは親要素ではなく、ブラウザに表示されている領域に依存するので、親要素の影響を受けずに、横幅いっぱいに合わせることが可能です。

3.余白を残す方法

画像を横幅いっぱいに合わせるのではなく、ある程度余白を残したい場合は、下記要素をCSSのスタイルシートに記載しましょう。

img{ width: 75%; }

上記要素では、横幅を７５％にしているので、ある程度の余白を残せます。

もちろん、画面の幅を変化させても余白の比率は変わりません。

余白を調整したい場合は、横幅の「７５%」を好みの数値に変更しましょう。

レスポンシブデザインで背景画像を最適化する方法

続いて、レスポンシブデザインで背景画像を最適化する方法を紹介します。

ホームページに背景画像を採用している方は、下記内容を参考にしてください。

コンテンツ領域に合わせる方法

img {
  width: 100%;
  height: 400px;
  background-image: URL（画像のパスを入力）;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

上記のCSSコードを活用すると、背景画像は拡大縮小されコンテンツ領域に合わせようとします。

ただし、画像はアスペクト比（画像の幅と高さの比例関係）を維持します。

コンテンツ領域全体をカバーする方法

img {
  width: 100%;
  height: 400px;
  background-image: URL（画像のパスを入力）;
  background-size: cover;
  border: 1px solid red;
}

上記のCSSコードを活用すると、背景画像におけるコンテンツ領域全体のカバーが可能です。

ただし「background-sizeプロパティ（背景画像の表示サイズを指定する要素）」を「cover」にする必要があります。

デバイスごとにCSSを用意するメディアクエリも活用しよう

レスポンシブデザインで、画面サイズを最適化するときは、メディアクエリの活用もおすすめです。

メディアクエリはコンテンツを画面サイズや解像度など、様々な要素に合わせて表示内容を変更する技術です。

「表示領域の幅が○○px以下のときだけ、このCSSを適用する」といった指示が出せます。

たとえば、下記メディアクエリをCSSのスタイルシートに記載すると、画面幅が最低780pxであれば、画面幅100%の画像は画面の90%で表示され、自動的に中央に配置されます。

@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}

ブレークポイントを追加する

メディアクエリでは、ブレークポイントの追加も必要です。

ブレークポイントは、CSSを切り替えるポイントで、たいていは画面の横幅サイズが使われます。

自分で設定しなくてはいけませんが、目安が分からない方は、Twitter社の「Bootstrap」が発表している下記ブレークポイントを参考にしましょう。

▼スマホの場合は横にスクロールしてご覧ください

レスポンシブデザインで画像サイズを最適化するときの注意点

最後に、レスポンシブデザインで画像サイズを最適化するときの注意点を４つ紹介します。

下記内容に注意して、画像サイズを最適化しましょう。

• 画像上のテキストサイズに注意
• 高解像ディスプレイへの対応が必要
• アスペクト比を意識する
• 画像の非表示を検討する

画像上のテキストサイズに注意

レスポンシブデザインで画像サイズを最適化するときの注意点１つ目は、画像上のテキストサイズです。

画像上にテキストがある場合、縮小されるとテキストが読みにくくなります。

今回紹介した画像サイズの最適化方法であれば、余白を残す方法ではなくvw（Viewport Width）を活用した「横幅いっぱいに合わせる方法」を採用しましょう。

余白を少なくすると画像縮小を防げるので、画像上のテキストも読みやすくなります。

高解像ディスプレイへの対応が必要

レスポンシブデザインで画像サイズを最適化するときの注意点２つ目は、高解像ディスプレイへの対応です。

一部のデバイスでは、1インチあたりのpx数が多いため、正しい解像度でエクスポートしないと画像がぼやける可能性があります。

高解像ディスプレイへの対策は簡単で、使用する画像の縦横を「２倍」「３倍」「４倍」にするだけです。

たとえば「幅を２００px」で表示したい画像があったとします。
その画像が、一部のデバイスでぼやけてしまう場合は「幅４００px」の画像を用意すれば改善されるでしょう。

アスペクト比を意識する

レスポンシブデザインで画像サイズを最適化するときの注意点３つ目は、アスペクト比を意識する点です。

アスペクト比とは、画像の縦と横の長さ比になります。

ホームページで利用する画像で多いのが、パソコンでは横幅いっぱいで目立っている画像がスマートフォンで閲覧すると、小さくなって目立たなくなるケースです。

横長の画像は高さがない分、縮小すると小さくなってしまうので、左右に余白をもたせて、画像の高さをキープするなどの対策が必要になります。

画像の非表示を検討する

レスポンシブデザインで画像サイズを最適化するときの注意点４つ目は、画像の非表示を検討する点です。

レスポンシブデザインでは、スマートフォンからホームページを閲覧するときに、表示速度が遅くなる傾向があります。

これは、スマートフォンやパソコンで同じHTMLファイルを読み込んでしまうためですが、画像コンテンツが多いと、さらに表示速度が遅くなります。

この対策として有効なのがHTMLの「picture要素」です。

picture要素を活用すると、画面や端末の条件に応じた画像だけを読み込んでくれるので、画像コンテンツが多い場合は、検討してみましょう。

まとめ

初心者向けに、レスポンシブデザインで画像サイズを最適化する方法を紹介しました。

まとめますと、レスポンシブデザインで画像サイズを最適化するに必要な単位は下記の通りです。

• 「px」＝画素数の単位
• 「em」「%」＝親要素基準で相対的にサイズを指定するための単位
• 「vw」＝ブラウザの表示領域の幅に対する割合
• 「vh」＝ブラウザの表示領域の高さに対する割合

レスポンシブデザインに対応した画像の最適化方法は下記３つです。

1. 画面サイズに合わせる方法
2. 横幅いっぱいに合わせる方法
3. 余白を残す方法

レスポンシブデザインで背景画像を最適化する方法は下記の通りです。

• コンテンツ領域に合わせる方法
• コンテンツ領域全体をカバーする方法

レスポンシブデザインで画像サイズを最適化するときの注意点は下記の通りです。

• 画像上のテキストサイズに注意
• 高解像ディスプレイへの対応が必要
• アスペクト比を意識する
• 画像の非表示を検討する

今回のコラム記事を参考にして、ホームページ内にある画像サイズを最適化させましょう。

また、当サイト「ビズサイ」ではホームページ制作サービス（サブスクリプション）を提供しています。

ビズサイでは、ホームページの目的に合わせて３種類のプランを用意しており、お申込みから公開まで最短５営業日でホームページ制作ができます（詳しくはこちら）。