レスポンシブデザインで使う画像の作り方

レスポンシブデザインを作成する時に、どのように画像を取り扱うのかによってその画像の準備の仕方が全く変わってきます。
レスポンシブしてレイアウトが変わる度に画像の大きさが変わっていく場合、どのようにしたら良いのかを予め考えておけばその後の準備が楽になります。

レスポンシブデザインの場合は画像を複数用意する。

レスポンシブデザインを作る場合、画面サイズに合わせて複数サイズの画像を用意することが基本となります。
自動的に複数サイズの画像を出力する機能を持つソフトもありますが、機械的に出力するかどうかは、作っているデザインによります。

必要な画像のサイズの比率が違う場合もある

例えば、ヒーローイメージの背景に使う画像を用意するとします。
スマホ向けのヒーローイメージは縦長の画面に合う画像を用意しますが、デスクトップ向けのヒーローイメージは横長の画面に合う画像を用意します。このように、画面が縦長・横長でデザインが変わる画像は、用意する画像も別のものを用意する必要があります。

画像のサイズが違えば見せたい部分の調整が必要になる場合もある

画像の比率が同じ場合でも、スマホでの画像とデスクトップでの画像で同じものをただ拡大するだけで良いのかどうかも少し考えておきましょう。
スマホで見た時に効果的な画像のレイアウト、デスクトップで見た時に効果的な画像のレイアウトは、それぞれ微妙に違っている場合もあります。
もしも、その画像は手間をかけても見せたいような画像であれば、それを表示するために工夫することも必要だと思います。

svgで表現できるものは積極的にsvgで表示する

IE11が現役を完全に引退した今、もうSVGを使うことに躊躇する必要はないでしょう。使っちゃおうSVG！
アイコンやグラフの画像、簡単なイラストレーションなど、SVGで作成できるものは積極的にSVGで表示するようにするべきです。

SVGはベクター画像を表示するためのファイルですので、レスポンシブデザインでどのような媒体で見ても、またRetinaディスプレイのような高精細ディスプレイでも、一番くっきりと見える状態で表示されるようになります。

svgは埋め込むか画像代わりに使うのかを使い分ける。

svgは画像を埋め込む方法と、imgタグでそのまま貼り付ける方法の２種類の設置方法があります。
それぞれに利点があり、埋め込む方法は、埋め込んだSVGをブラウザがキャッシュしてくれるので、何度も使うような用途のものでしたら埋め込む方法を使ったほうが良いでしょう。
逆に、ものすごく複雑なSVGファイルの場合、imgでそのまま貼り付けたほうが早かったりする場合もあります。

最後に

レスポンシブデザインにおける画像は、本気で幅広く対応しようと思えば複数の画像を別途用意する等の調整が必要になります。
面倒だから大きな画像を１枚だけ用意するなどということのないように、しっかりと画像の管理もしておくと良いですね。

もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！