#コーディング
今後の主流！レスポンシブサイトの画像切り替えについて！
.a-blog-pre{
background-color:#444;
padding:15px;
box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
background-image: -moz-linear-gradient(top, #444, #333);
background-image: -webkit-gradient(linear, center top, center bottom, from(#444), to(#333));
background-image: -webkit-linear-gradient(top, #444, #333);
background-image: linear-gradient(top, #444, #333);
line-height:1.6em;
overflow:auto;
}
.a-blog-picture img{
width:100%;max-width:100vw;
}
レスポンシブサイトにおけるアートディレクション！
今回はHTML5にて追加されたpictureタグについて解説していきます。
今までの画像切り替え方法
今までは大きな画像を用意しておき、CSSで表示サイズを制御して出すか、
JSを使って画像を切り替えるなどが一般的だったかと思います。
しかし、このやり方ではデバイスごとに最適なサイズの画像を読み込ませることが難しいという難点がありました。
JSで切り替える方法も、一見最適な画像のみを読み込んでいるように見えますが、
これも最初に画像を読み込んだ後で切り替え先の画像を読み込むので問題の解決にはなりませんでした。
pictureタグとsrcset属性
上の項で解説した問題点を解決してくれるのがpictureタグとsrcset属性です。
これらを使うことで各デバイスごとに最適な画像を表示させることができます。
ソースのサンプルを交えながら解説していきたいと思います。
|
1 2 3 4 5 |
<span style="color: #abd9ff"><em><span class="tag"><picture> </span><span class="tag"> <source</span> <span class="atn" style="color: #ffdfab">media</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"(max-width: 640px)"</span> <span class="atn" style="color: #ffdfab">srcset</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"images/◯◯◯_sp.jpg"</span><span class="tag">> </span><span class="tag"> <img</span> <span class="atn" style="color: #ffdfab">src</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"images/◯◯◯_pc.jpg"</span> <span class="atn" style="color: #ffdfab">alt</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"画像のalt文"</span><span class="tag">> </span></picture></em> </span> |
上記のように記述すると、640px以下と640px以上で表示させる画像を切り替えることができます。
スマートフォン用とパソコン用で表示させる画像を切り替えるなどの使い方が想定されますね。
|
1 2 3 4 5 |
<span style="color: #abd9ff"><em><span class="tag"><picture> </span><span class="tag"> <source</span> <span class="atn" style="color: #ffdfab">media</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"(max-width: 640px)"</span> <span class="atn" style="color: #ffdfab">srcset</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"images/◯◯◯_sp.jpg"</span><span class="tag">> <source <span class="atn" style="color: #ffdfab">media</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"(max-width: 1024px)"</span> <span class="atn" style="color: #ffdfab">srcset</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"images/◯◯◯_tablet.jpg"</span>> </span><span class="tag"> <img</span> <span class="atn" style="color: #ffdfab">src</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"images/◯◯◯_pc.jpg"</span> <span class="atn" style="color: #ffdfab">alt</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"画像のalt文"</span><span class="tag">> </span></picture></em></span> |
上記の記述ならスマートフォン用、タブレットPC用、パソコン用での出し分けができそうですね。
ここまではmax-widthだけでの出し分けをしてきましたが、更に解像度によっての出し分けも追加してみましょう。
|
1 2 3 4 5 |
<span style="color: #abd9ff"><em><span class="tag"><picture> </span><span class="tag"> <source</span> <span class="atn" style="color: #ffdfab">media</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"(max-width: 640px)"</span> <span class="atn" style="color: #ffdfab">srcset</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"images/◯◯◯_sp.jpg,images/◯◯◯_spx1.5.jpg 1.5x, images/◯◯◯_spx2.jpg 2x"</span><span class="tag">> <source <span class="atn" style="color: #ffdfab">media</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"(max-width: 1024px)"</span> <span class="atn" style="color: #ffdfab">srcset</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"images/◯◯◯_tablet,images/◯◯◯_tabletx1.5.jpg 1.5x, images/◯◯◯_tabletx2.jpg 2x"</span>> </span><span class="tag"> <img</span> <span class="atn" style="color: #ffdfab">src</span><span class="pun" style="color: #ffffff">=</span><span class="atv"><span style="color: #beffab">"images/◯◯◯_pc.jpg"</span><span class="tag"><span class="atn" style="color: #ffdfab"> srcset</span><span class="pun" style="color: #ffffff">=</span><span style="color: #beffab">"images/◯◯◯_pcx1.5.jpg 1.5x, images/◯◯◯_pcx2.jpg 2x"</span></span></span> <span class="atn" style="color: #ffdfab">alt</span><span class="pun" style="color: #ffffff">=</span><span class="atv" style="color: #beffab">"画像のalt文"</span><span class="tag">> </span></picture></em></span> |
見ていただくとわかると思いますが、画像ファイル名の後に1.5xや2xという記述が追加されていますね。
これはデバイスピクセル比を表します。
iPhone6などは画面解像度375×667のデバイスピクセルが2になるので、
上の記述と照らし合わせるとおそらく『◯◯◯_tabletx2.jpg』が表示されるかと思います。（違ったらすみません。。。）
ここで『◯◯◯_spx2.jpg』が表示されると思った方もいるかと思いますが、おそらく横幅の375px×2=750pxとなると思いますので、640px以上1024px以下のタブレットPCに用の画像に当てはまるかと思います。
実際に表示させてみましょう!
いかがでしょうか。
画面を縮めたり、あるいはスマホから見たりすると表示される画像が変わりませんか？
これを上手く組み合わせれば設定次第で各デバイスごとに最適の画像を表示させることができそうですね！
以下にソースを載せておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<span style="color: #abd9ff"><em><picture></em></span> <span style="color: #abd9ff"> <em> <source <span style="color: #ffdfab">media</span><span style="color: #ffffff">=</span><span style="color: #beffab">"(max-width: 640px)"</span> <span style="color: #ffdfab">srcset</span><span style="color: #ffffff">=</span><span style="color: #beffab">"</span></em></span> <span style="color: #beffab"> <em> img_sp.jpg,</em></span> <span style="color: #beffab"> <em> img_spx1.5.jpg 1.5x,</em></span> <span style="color: #beffab"> <em> img_spx2.jpg 2x</em></span> <span style="color: #abd9ff"> <em><span style="color: #beffab"> "</span>></em></span> <span style="color: #abd9ff"> <em> <source <span style="color: #ffdfab">media</span><span style="color: #ffffff">=</span><span style="color: #beffab">"(max-width: 1024px)"</span> <span style="color: #ffdfab">srcset</span><span style="color: #ffffff">=</span><span style="color: #beffab">"</span></em></span> <span style="color: #beffab"> <em> img_tablet,</em></span> <span style="color: #beffab"> <em> img_tabletx1.5.jpg 1.5x,</em></span> <span style="color: #beffab"> <em> img_tabletx2.jpg 2x</em></span> <span style="color: #abd9ff"> <em><span style="color: #beffab"> "</span>></em></span> <span style="color: #abd9ff"> <em> <img <span style="color: #ffdfab">src</span><span style="color: #ffffff">=</span><span style="color: #beffab">"</span></em></span> <span style="color: #beffab"> <em> img_pc.jpg" srcset="</em></span> <span style="color: #beffab"> <em> img_pcx1.5.jpg 1.5x,</em></span> <span style="color: #beffab"> <em> img_pcx2.jpg 2x</em></span> <span style="color: #abd9ff"> <em><span style="color: #beffab"> "</span> <span style="color: #ffdfab">alt</span><span style="color: #ffffff">=</span><span style="color: #beffab">"サンプル画像"</span>></em></span> <span style="color: #abd9ff"><em></picture></em></span> |
最後に
まだ私自身、何種類の画像を用意して、どのような分岐条件を書けば各デバイスで最適な画像を出せるのか分かっていませんが、このやり方は覚えておいて損はありませんので注目どころですね。
ちなみにこういったやり方による画像の出し分けをアートディレクションと言うそうです。
CATEGORY
TAG
htaccess
補助金
助成金
Webブラウザ
キックオフミーティング
サブディレクトリ
サブドメイン
SSL化
広告審査
TikTok広告
審査落ち
広告ポリシー
CMS
Webサイト制作
プラグイン
ECサイト制作
採用活動
ツール
Google広告
SNS広告
Web広告
セキュリティ
XD
SNS運用
アニメーション
採用サイト
Webデザイナー
Webディレクター
SEO対策
ドメイン
Instagram
YouTube
ECサイト
Wordpress
Webディレクション
Googleアナリティクス
EFO
LPO
Facebook
リスティング広告
コンテンツSEO
Ｗebマーケティング
ライティング
Webデザイン
Photoshop
GoogleAnalytics
アクセス解析
