レスポンシブｗebデザインでの画像表示について

質問

私はサイト制作初心者なんですが、なんとかレスポンシブｗebデザインでのサイトを作っています。
そこで、画像の表示方法について悩んでいたので、アドバイスをお願いします。

今現状やっていた画像表示処理は・・・

＜パターンA＞
１つの大きな画像を％で縮小させ、あくまで１枚だけで全サイズに対応する

というものです。

ところが最近、ネットでたくさんのプロの方々のブログを拝見していると、どうやらRetinaディスプレイに対応した画像は必須なんじゃないか？となり、悩んでおります。

もしRetinaディスプレイに対応した画像の場合は、表示サイズの倍サイズで作ったものを縮小して表示させなければいけないため、重くなるのは必定。
となると、さすがにパターンAでは厳しいと思い下記のパターンBを検討しています。

＜パターンB＞
１つの画像につき
　・PCディスプレイ用画像
　（・タブレット・高解像度スマホ用画像）
　・通常スマホの縦向用画像
の、２つないしは３つのサイズ別で対応する

そこで、もしこのパターンBで画像を表示する際は、一体どのような変換方法を使うのが現在では適切なのでしょうか？

初心者なりに調べてみたりして考えていたのが↓

(1)htmlに画像を入れ、それをjQueryで横幅サイズ毎に表示される画像を変える
(2)htmlには画像を入れず、横幅サイズ毎に読み込ませるcssファイルで、divなりなんなりのbackground-imageとしてそれぞれの画像を表示する

でした。
個人的には余計なjQueryを使いたくないため、初心者なりに考えてみた結果(2)に行き着いたんですが、そもそも(2)での画像表示は、どうなんでしょうか？

どなたかお詳しい方、レスポンシブｗebデザインでの画像表示方法について、アドバイスをください。
よろしくお願いいたします。

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

>No.2お礼

見出しの部分に<p>を使っては行けない、箇条書きであれば<ul>を使わなければならない、
というような文法については理解されてますでしょうか。

また、太字で表示したいのであれば、<strong>や<b>を使っても太字になりますが、<span style="font-weight:bold">言葉</span>でも太字になります。

同様に、画像を表示する方法は<img>でも表示できますし、<span style="background-image:url();">でも表示できます。

ですが文書は

<p><img>この部分は段落で、１つの画像が含まれます。</p>
<p style="background-image:url()">この部分は段落で、画像は含まれませんが、画像が表示されています。</p>

このような違いが生じいます。

HTMLの文法というのは、太字になれば何でも良い、画像が表示されれば何でも良い、というわけではなく、
何のために太字にするのか、何のために画像を表示するのかということを考えて、「何のために」という目的を指示するためのタグを記述しなければなりません。

「見出しにするために」<h1>タグを使用する。（スタイルシートでフォントサイズを大きくする）
「強調するために」<strong>タグを使用する。（スタイルシートで太字にする）
「強調ではないが、文書に関するキーワードがあることを示すために」<b>タグを使用する。（スタイルシートで太字にする）
「文書に関連する画像がある事を示すために」<img>タグを使用する。
「文書に関連しない画像を表示するために」スタイルシートのbackground-imageやcontentを使用する。

文法チェッカーが判断できるのは、<p>と<span>の順番が逆になっていないか、<ul>の直下は<li>しか含まれていないか、などだけであり、
「この言葉は箇条書きか、段落か、見出しか」などの判断は出来ません。
そのため、箇条書きの場所に<p>を使っていてもエラーとして表示されませんし、<img>を使って表示しなければならない画像を<p>のスタイルシートで表示していてもエラーにはなりません。

改めて質問文に答えると、
<img>で表示すべき画像は<img>で表示し、JavaScriptでファイル名を変更する。
CSS・background-imageで表示すべき画像はCSSで表示し、media queriesなどを使用してファイル名を変更する。
というのが、文法的に正しい方法だと思います。（作りやすいかどうかとか、制作者の技術的にどうとかは考慮していません。）

文法よりも作りやすさを優先するのであれば、自分が作りやすいと思う方法で作れば良いと思います。
どの方法が作りやすいと感じるかは個人差がありますので、どれが良いというのは何とも言えません。

お礼

taloo　様

文書の論理構造とは文法の事だったんですね。わざわざ大変丁寧にご教授頂き、勉強になりました。
本当にありがとうございます！！

早速ご指摘頂いた部分を、全文で確認してきました！

どうやら、画像以外の部分はまっとうに記述されておりました。
ただ、これは結果オーライなだけで文法の正しさなど意味がわからず、ネットでコピペしたりプロが記述してる通りにやっていただけなので、自分の未熟ぶりを痛感しております。

早速、文章の論理構造というのを勉強し直して、改めて記述しなおしてみます！

＞<img>で表示すべき画像は<img>で表示し、
＞JavaScriptでファイル名を変更する。
＞CSS・background-imageで表示すべき画像はCSSで表示し、
＞media queriesなどを使用してファイル名を変更する。
＞というのが、文法的に正しい方法だと思います。

そうですか、やはりscriptを使うのが良い方法なんですね！
media queries、早速勉強して組み込んでみます！！

本当に本当にありがとうございました！

回答No.2

神崎 渉瑠（@taloo）

<img>に相当する物を表示するのであれば、

>(1)htmlに画像を入れ、それをjQueryで横幅サイズ毎に表示される画像を変える
この方法しかないと思います。（jQueryに限らず、JavaScriptライブラリ全般で）

>(2)htmlには画像を入れず、横幅サイズ毎に読み込ませるcssファイルで、divなりなんなりのbackground-imageとしてそれぞれの画像を表示する

たしかにこれでも可能と言えば可能ですし、CSSで対応できる（JavaScript未対応/停止環境でも切り替え可能）メリットは有りますが、
<img>ではなくなるため、文書の論理構造が違う物になります。

>個人的には余計なjQueryを使いたくないため、初心者なりに考えてみた結果(2)に行き着いたんですが、そもそも(2)での画像表示は、どうなんでしょうか？

<img>で表示すべき物を背景画像やデザイン画（CSS）として表示するのは、HTMLの文法として間違った方法だと思いますし、
逆に、背景画像として表示すべき物を<img>で表示するのも間違った方法だと思います。

それを考えれば、どちらの方法を使うべきかは必然的に決まってくると思います。

JavaScriptを使用する場合は、ページ読み込み完了後（DOMContentLoadedイベント）で<img>のsrc属性を処理すると、それでも最初に書かれていた画像の読み込みは行ってしまいますから、
ダウンロードサイズを優先するのであれば、
document.write()でレスポンシブイメージの処理を、<noscript>でデフォルトの画像を<img>で表示するのがベストではないかと思います。

------------------------
http://picture.responsiveimages.org/
<picture>という要素が策定中です。
質問者さんがやろうとしている事をするための専用タグで、<img>をそのまま使用できるため文書の論理構造が乱れる事も有りません。
とはいえ、仕様策定中ですのでどのブラウザも対応していません。

お礼

ご回答ありがとうございます。

非常に参考になるご助言、ありがとうございます！

＞<picture>という要素が策定中です。

これは私もネットで探していたら出てきたのですが、やっぱり今はまだ使用するものではないんですね。あぶなかった、危うくこれを使う所でした。
ありがとうございます。

やはりscriptで切り替えるしかないんですね。
う～～～ん。。。

不勉強で申し訳なく思うのですが、1つお伺いさせてください。

＞<img>ではなくなるため、文書の論理構造が違う物になります。

とのことですが、論理構造が違うというのは、具体的にどのような影響があるのでしょうか？
初歩的な質問で申し訳ありません！！

さきほど試しにやってみると、ブラウザ表示上も、コードをW3Cの検証サービスでチェックした際も、一切問題ない状態でした。

もしやSEO的に良くないとか・・・などの致命的なデメリットがあるのでしょうか？

回答No.1

ORUKA1951

それは良く考えると、ディスプレイによってスタイルシートを振り返る方法ですね。
iPhone Android など、スマートフォン向けhtmlコーディング/CSS | htmlマークアップ・CSS | H.I. Art Works [ Web Technology ] ( http://tech.hi-works.com/webcreative/markup/389 )
　のように、一般的な方法が公開されています。ポイントはCSS3のMedia Queriesをつかって読み込むスタイルシートを切り替えるところです。スマートフォンは基本的にCSS3に対応していると考えて良いでしょう。
　詳しくは
media queries - Google 検索 ( https://www.google.co.jp/search?q=Media%20Queries&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

お礼

レスポンシブにする際、CSSで割り振るのか、Media Queriesで切り替えるのか悩んだんですが、実際は、どっちが良いのでしょうか？

ネットで調べたりすると、どっちもどっちの賛否両論で、初心者の私には判断できませんでした。
結局CSSでの割り振りを選んだのは、単純に余計なjQueryを使いたくなかったためです。