私はサイト制作初心者なんですが、なんとかレスポンシブｗebデザインでのサイトを作っています。 そこで、画像の表示方法について悩んでいたので、アドバイスをお願いします。 今現状やっていた画像表示処理は・・・ ＜パターンA＞ １つの大きな画像を％で縮小させ、あくまで１枚だけで全サイズに対応する というものです。 ところが最近、ネットでたくさんのプロの方々のブログを拝見していると、どうやらRetinaディスプレイに対応した画像は必須なんじゃないか？となり、悩んでおります。 もしRetinaディスプレイに対応した画像の場合は、表示サイズの倍サイズで作ったものを縮小して表示させなければいけないため、重くなるのは必定。 となると、さすがにパターンAでは厳しいと思い下記のパターンBを検討しています。 ＜パターンB＞ １つの画像につき ・PCディスプレイ用画像 （・タブレット・高解像度スマホ用画像） ・通常スマホの縦向用画像 の、２つないしは３つのサイズ別で対応する そこで、もしこのパターンBで画像を表示する際は、一体どのような変換方法を使うのが現在では適切なのでしょうか？ 初心者なりに調べてみたりして考えていたのが↓ (1)htmlに画像を入れ、それをjQueryで横幅サイズ毎に表示される画像を変える (2)htmlには画像を入れず、横幅サイズ毎に読み込ませるcssファイルで、divなりなんなりのbackground-imageとしてそれぞれの画像を表示する でした。 個人的には余計なjQueryを使いたくないため、初心者なりに考えてみた結果(2)に行き着いたんですが、そもそも(2)での画像表示は、どうなんでしょうか？ どなたかお詳しい方、レスポンシブｗebデザインでの画像表示方法について、アドバイスをください。 よろしくお願いいたします。
↧