HTML

HTMLでレスポンシブのPC,SPの画像切り替え、Retinaディスプレイに対応する方法

JavaScriptやCSSでPCとスマホの画像を切り替えるこtもできますが、HTMLだけでPCとSPので画像を切り替えることができます。
毎回「img」を2つ使ってCSSで「display:none;」「display:block;」で画像を切り替えているかたが下記に切り替えると幸せになれます(笑)
※IEではデフォルトでは動作しません。

 

HTMLでレスポンシブのPC,SPの画像切り替え、Retinaディスプレイに対応する方法

ひとまずレスポンシブのPC,SPの画像切り替えとRetinaディスプレイに対応するの2つに分けで説明していきます。

 

 

HTMLでレスポンシブのPC,SPの画像切り替え

「picture」を使用することで簡単に切り替えることができます。
下記のコードでは、幅が750px以内のときはsp.jpgの画像を表示し、751px以上に変わったらpc.jpgという画像が表示されるようになります。
追加でJSやCSSで消したりしなくていいのが最高ですね。

<picture>
  <source media="(min-width: 751px)" srcset="pc.jpg">
  <source media="(max-width: 750px)" srcset="sp.jpg">
  <img src="pc.jpg">
</picture>

 

Retinaディスプレイに対応する

Retinaディスプレイに対応するには、画像を等倍と倍の画像を用意する必要があります。
今回は、「img.png」という画像を用意します。
2倍で書き出す画像には、わかりやすく語尾に「@2x」と入れておきます。
これはPhotoshopやIllustrator、XDで簡単に書き出すことができます。

 

実際にHTMLに記述はこんな感じです。

<img src="img.png" srcset="img.png 1x, img@2x.png 2x" alt="">

 

「srcset」を使用ことで、画像を切り替えることができます。

 

 

レスポンシブのPC,SPの画像切り替えしつつ、Retinaディスプレイに対応する

上記で書いた2つの切替方法を使ってレスポンシブでPCとSPの画像を切り替えつつ、なおかつRetinaディスプレに対応してみます。

 

srcsetの中に2倍の画像の指定も入れてあげるだけで、Retinaディスプレイにも簡単に対応できます。

 

<picture>
    <source media="(min-width:751px)" srcset="pc.jpg 1x,pc@2x.jpg 2x">
    <source media="(max-width:750px)" srcset="sp.jpg 1x,sp@2x.jpg 2x">
    <img src="pc.jpg" alt="">
</picture>

 

 

画像の切り替えだけでなく、テキストの改行位置もPCとSPをで変更したいという方はこちらの記事も参考にしてみてください。
PCのみ改行・タブレットのみ改行・SPのみ改行をCSSで実装する方法【レスポンシブデザイン】

 

 

web制作を勉強したい方におすすめの教材も紹介しているので是非参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。
web制作で独学で稼ぎたいという人必見!
RELATED POST

COMMENT

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)