0%

Programmingプログラミングナレッジ

Posted:2020.03.24

picture要素でモバイル用の画像など様々な表示切り替えに対応する

PCとスマホでは縦長か横長といったアスペクト比、画面サイズなど、表示される環境が異なります。そのためディスプレイに合わせた最適な画像を表示させたい場合に、表示画像を切り替えるケースがしばしばあります。そんな時にHTMLだけで完結できるpicture要素を使った方法についてまとめていきたいと思います。

 

通常、画像はimg要素を使って表示させますが、HTML5で追加されたpicture要素を使った場合にはこのような形になります。

<picture>
 <source media=" MEDIA_QUERY " srcset=" IMAGE_FILE_PATH ">
 <img src="../img/default.jpg" alt="Image">
</picture>

 

なにやら見慣れないタグや属性がありますが、主な要素や属性を下記にまとめています。

picture要素 画像要素を示すタグで内部にはsource要素とimg要素を内包します
source要素 画像や動画ファイルなどのリソースが複数存在する場合に個別で指定するための要素
media属性 メディアクエリの指定を値で行う、CSSで扱うメディアクエリが使える
srcset属性 画像や動画ファイルなどのソースを複数設定できる

 

このように画像リソースをより詳細に指定する場合にpicture要素が用いられ、これによって画像リソースを切り替えることが可能になります。picture要素内では上から順に、条件に対応しているsource要素を判別し、どの条件にもマッチしない場合には最後のimg要素が選択される形になりますので、記述する順番も重要になってきます。

 

モバイル用に表示画像を切り替える

いわゆる「レスポンシブイメージ」というもので、ディスプレイ幅によって表示画像を切り替える方法になります。画像をトリミングせずに全て表示させる前提で、表示画像を切り替え最適化するこの手法はアートディレクションとも呼ばれます。

【HTML】※一部抜粋

<picture>
 <source media="(min-width: 769px)" srcset="../img/desktop.jpg">
 <source media="(min-width: 481px)" srcset="../img/tablet.jpg">
 <img src="../img/mobile.jpg" alt="Image">
</picture>

 

上記では、画面幅が769pxまではPC用の画像が表示され、768pxからはタブレット用の画像が表示され、480pxになるとスマホ用の画像が表示されるというものです。source要素では、リソースファイルの指定をsrcset属性で行うので注意します。img要素のsrc属性の時と同じような感じでファイルパスを指定します。

 

最後にフォールバック用として表示させるimg要素を忘れずに入れておきます。実際に上記のコードで切り替わるサンプルを下記に用意しています。

 

 

WebP形式の画像表示対応をする

次世代の画像フォーマットとして注目されている「WebP形式」の画像ですが、ブラウザによってはまだ対応していないものもあります。そんな時の表示切り替えにもpictureタグは有効です。

【HTML】※一部抜粋

<picture>
 <source type="image/webp" srcset="../img/sample.webp">
 <img src="../img/sample.jpg" alt="Image">
</picture>

 

今回は画面幅によって切り替える必要はないのでメディアクエリは不要ですが、代わりにtype属性を使ってMIMEタイプを指定しておきます。あとは先ほどと同じくフォールバック用の画像をimg要素で用意してあげることで、WebP形式に対応しているブラウザではWebP形式の画像が表示されるようになります。

 

 

高解像度ディスプレイ用に表示画像を切り替える

最近では高解像用のディスプレイが増えてきていますが、まだ通常の解像度であるディスプレイも存在しています。そんな時に画像リソースを高解像用のディスプレイに合わせてしまうと不用意に画像サイズが大きくなり、読み込みが遅くなる可能性があるという問題が発生してきます。

【HTML】※一部抜粋

<img 
 srcset="
  ../img/sample@1.5x.jpg 1.5x,
  ../img/sample@2x.jpg 2x,
  ../img/sample@3x.jpg 3x
 " 
 src="../img/sample.jpg"
 alt="Image"
>

 

実は単純に解像度別に画像を切り分けたい場合には、上記のようにimg要素単独で、srcset属性によってそれぞれの解像度別に表示させる画像のファイルパスを指定すれば実現できます。ただし、その際には「ピクセル密度記述子」と呼ばれる記法が必要となります。

 

ピクセル密度記述子は、画像ファイル名の後に半角スペースを挟んで、1x、2xなどといった形で解像度の倍率を指定します。合わせて画像ファイルには@2xといった表記にしておくとわかりやすいですね。これらをカンマ区切りで並べていきます。一応、今回はpicture要素を使った切り替えがテーマですので、高解像度用の切り替えと画面幅での切り替えの両方が必要となった場合には下記のように組み合わせて実装する形になります。

【HTML】※一部抜粋

<picture>
 <source 
  media="(max-width: 768px)" 
  srcset="
   ../img/mobile.jpg 1x,
   ../img/mobile.jpg@2x 2x
  "
 >
 <img 
  srcset="../img/desktop@2x.jpg 2x" 
  src="../img/desktop.jpg" 
  alt="Image"
 >
</picture>

 

下記に解像度別で画像が表示切り返されるような形にしてありますので、表示中にディスプレイで試してみてください。

 

 

IE11では対応していないので注意

今回まとめているpictureタグですが、IE11には対応していないので注意が必要です。IE11に対応させるには下記のように別途ライブラリを使うなどjavascriptで対応するようにしましょう。

【Picturefill】
http://scottjehl.github.io/picturefill/

(過去記事)
サイトの画像をjQueryでRetinaディスプレイ対応にする

 


 

今回はpicture要素を使って画像表示の切り替えをする方法についてまとめてみました。このようにHTML5以降はいろんな機能が拡張してきているので、これらを使いこなすことでかなり効率的なコーディングができるのではないでしょうか。これまでメディアクエリを使ってCSSの表示非表示で実装していた方は是非試してみてはいかがでしょうか。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】