web・EC担当の前原です。
記事のたびに肩書が変わるのは気にしないでください。
今回はコーダーに向けた記事です。
私はレスポンシブのサイトを作る際、以下の方法で画像置換していました。
①画像をimgタグではなくcssの背景画像として表示させ、スマホ版とPC版でbackground-imageのURLを切り替えていた
②Javascriptを使いスマホで見た時は、src=””内の「img_pc」というソースを全て「img_sp」に切り替える
どちらもとても面倒です。
①は、cssの記述量が増えます。
しかも、「テキスト非表示化」などのテクニックも駆使しないといけないため、SEO的にもちょっと怖いです。
②は、「このためにわざわざJS動かすの嫌だなー」と心理的に嫌です。
JS関連は万が一バグった時に大変なので、普通のデザイナーがやるには敷居が高いです。（敷居の高さはどちらも同じか）
まさに今日知りましたが、今「pctureタグ」なるものがあるそうですね。
弊社webデザイナーの篠田さんに聞きました。
pictureタグを使えば、指定したブレイクポイントでcssのメディアクエリーよろしく、自動で表示画像が切り替わるというものです。
まさにこういうのが欲しかった！！
タグの使い方、応用については明日「パート２」として解説します！