Blog スタッフブログ

Retina Displayに対応した画像をPCとタブレットやスマホで切り替える方法

Category | Blog
/ 9,619views

こんにちは、制作の奥田です。

以前、PhotoShopでRetinaディスプレイに対応した画像を書き出す方法という記事を書きました。
今回はRetina Displayに対応した画像をPCとスマホで切り替える方法についてご説明いたします。

retina

Table of contents

  1. 用意する画像
  2. 記述方法
  3. Demo
  4. 最後に

用意する画像

用意する画像はもちろん6枚です。
例えばスマホだけで切り替えたい場合は4枚になります。

  1. 通常の画像(image.jpg)
  2. Retina Display用の画像(image@2x.jpg)
  3. タブレット用画像(image-991.jpg)
  4. Retina Display用のタブレット用画像(image-991@2x.jpg)
  5. スマホ用画像(image-767.jpg)
  6. Retina Display用のスマホ用画像(image-767@2x.jpg)

※上記はブレイクポイントにあわせたファイル名にしていますが、ファイル名は適宜変更ください。

記述方法

pictureタグとsrcsetを利用して以下のように記述します。
sourceタグを追加していけばいくつでも切り替え可能です。(注意点としてmediaアトリビュートがmax-widthの場合は小さいサイズから順に記述してください。)

<picture>
	<source media="(max-width:767px)" srcset="img/image-767.jpg 1x,img/image-767@2x.jpg 2x">
	<source media="(max-width:991px)" srcset="img/image-991.jpg 1x,img/image-991@2x.jpg 2x">
	<img src="img/image.jpg" srcset="img/image.jpg 1x,img/image@2x.jpg 2x" alt="">
</picture>

Demo

それでは実際のデモを御覧ください。

最後に

今回は少し簡単にご説明させていただきました。
例えば以下のようにPCでは縦書きのタイポグラフィーを、スマホでは横書きのタイポグラフィーにしたい場合などに重宝します。

皆さんも是非活用してみてください。

Category | Blog
Author | Mineo Okuda / 9,619views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)