レスポンシブサイトでの画像表示速度とSEOについて

質問

独学でサイトをつくっている者です。

レスポンシブのサイトをつくっているのですが、皆様はブレークポイント時の画像切替をどう仕込んでいますか？
※例として、様々なバナー画像の場合。

今、素人的に検討しているのは

■1
htmlのimgタグで表示し、タブレットやスマホの場合はcssで適正サイズに縮小

■2
htmlのimgタグで表示するが、jQueryやJavaScriptの仕組みで端末別に表示する画像そのものを変える
例：http://black-flag.net/jquery/20120808-4047.html

■3
cssのbackgroundで表示し、端末サイズ毎に表示する画像を変える

上記3つです。

■1の場合、imgタグに色々施せるのできもちSEO的には有利かな？（もうホントきもち程度にですが・・・）とは思うのですが、結局PC端末でもスマホでも同じ画像を使うため、表示速度的には遅いですよね。ましてRetina対応は必須なわけですし・・・どうなんでしょうか。

■2の場合、ギリギリ限界まで余計なものを排除したいスポンシブで、余計なjsを入れるのはどうなのだろうか？的な疑問が素人的にありました。ただ、これができれば早そうなイメージはあります。

■3の場合、CSSスプライトもできるので表示速度は一番早そうな気がしますが、htmlの記述によってはSEO的にマイナス要素になってしまいそうな気が・・・と思い、これでSEO的に問題ないhtml記述方法などがあれば一番良いのかもしれないと素人的には感じました。

素人な質問で申し訳ありません。

以上の事を考えたのですが、表示速度やSEOを総合的に鑑みて、お詳しい皆々様のご意見なりアドバイスを頂けますと幸いです。

回答No.1

ORUKA1951

HTMLとスタイルシートの役割分担とSEOを誤解されている。以下をよく読んで叩き込んでおくこと
HTML 4による文書の設計( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4 )
スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )

　一言で言うと、HTMLには文書構造だけを記述し、プレゼンテーションはスタイルシートに任せる。これが、検索エンジンにそのページの内容が正確につかめる＝【Search Engine Optimization:検索エンジン最適化】ですよ。
★検索順位で上位に表示されるのは、その結果であって目的ではない。

　だとしたら、それがナビゲーションメニューでしたら
<div class="header">
　・・・・・・
　<div class="nav">
　　<ul>
　　　<li><a href="/Top">ホーム</a></li>
　　　<li><a href="/Products">製品</a>
　　　　<ol>
　　　　　<li><a href="/Products/Tools">作業工具</a></li>
　　　　　<li><a href="/Products/Erect">電設工具</a></li>
　　　　</ol>
　　　</li>
のようにマークアップされているはずですよね。
　なぜ？かというと、HTML4.01の時代、文書構造は「id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」してきましたから、googleなどの検索エンジンは、header内のnavだからグローバルナビだと理解してきました。SEOされているからです。
　ただ、個の部分理解されていたとは言いがたく。デザインのためにclassなどが乱用されていたためHTML5では、「文書をよりよく構造化するために、新しい要素が追加されます。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」
　すなわち、HTML5では・・
<header>
　・・・・・・
　<nav>
　　<ul>
　　　<li><a href="/Top">ホーム</a></li>
　　　<li><a href="/Products">製品</a>
　　　　<ol>
　　　　　<li><a href="/Products/Tools">作業工具</a></li>
　　　　　<li><a href="/Products/Erect">電設工具</a></li>
　　　　</ol>
　　　</li>

　ここまでは、理解されていますよね。HTMLはひたすら文書構造だけを記述する。これによって「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」、SEOは完璧。

　画像を入れていないのは
・検索エンジンは画像は読まない
・スタイルシートも読まない
・javascriptも読まない
　この場合、画像は文書の主体、コンテンツではない。

　その上で、まずmedia別スタイルシートを記述します。レスポンシブということは少なくとも印刷用(print)、携帯電話(handheld)、ディスプレイ(screen)は分けられていると思います。
・出力メディア型( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.2.4 )
・メディア依存のカスケード( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.4.1 )
　そして、screenは基本的にリキッドデザインで製作されてきたと思います。
・・・・その拡張が、mediaqueryであり、レスポンシブデザインだからです。・・・・

　リキッドデザインで製作して、その上で幅の狭いディスプレイ＝マウスのようなポインターデバイスが使えないスマホ用に、mediaqueryでデザインを変える。
1.は画像が主要なコンテンツでない場合は論外です。
2.はjavascriptを使うため排除されます。
　画像を切り替えるくらいは良いですが、特にナビゲーションに関わる場合はね。
　『JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。( https://support.google.com/webmasters/answer/35769?hl=ja#2 )』

ということは
3.が基本でしょう。

下記サイトはレスポンシブではなくリキッドですが、HTMLには文書構造しか書かれていないために、HTMLもCSSも自由に変更できますし、結果的にSEOも
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )

お礼

ご意見、またアドバイスありがとうございます。