• つくってみた
  • 機械学習
  • クラウドコンピューティング
  • 仮想デスクトップ
  • サイト情報
    • 運営会社
    • 採用情報
  • お問い合わせ
  1. ホーム /
  2. ハック /
  3. HTMLで画像個別にRetina画像に差し替える
  • ハック
  • 2015.03.12
  • 157
  • retina

HTMLで画像個別にRetina画像に差し替える

  • ツイート
  • シェア
  • はてな

以下のように指定することで、画像ごとにスマホ用の別画像を指定することができます。

html

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

こちらの場合img/top/img_01.pngが通常の画面での画像、img/top/img_01@2x.pngがretina対応ディスプレイの画面で表示される画像です。

参考:HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう

  • ツイート
  • シェア
  • はてな
harada

harada

    つくってみた!

    社内のトイレ難民解決!トイレ空き状況確認システムを作ってみた社内のトイレ難民解決!トイレ空き状況確認システムを作ってみた
    Amazon Polly と Slack を使って  Alexa へ (物理的に) 話しかけるシステムを作ってみたAmazon Polly と Slack を使って Alexa へ (物理的に) 話しかけるシステムを作ってみた
    社長が「寒い寒い」というので社長席の温度をRaspberry Piで監視してみた。社長が「寒い寒い」というので社長席の温度をRaspberry Piで監視してみた。

    関連記事

    • Retina+高精細ディスプレイ用のCSS指定まとめ
    • Retina.jsでRetinaディスプレイに対応する
    • 画像サイズを動的に変化させる-retinaディスプレイへの対応
    • Lazysizesで画像遅延読み込みかつRetinaディスプレイ対応にする
    • Compass(Sass)で画像サイズを自動取得する
    • srcset指定で画面幅によって別の画像を表示する
    • お問い合わせ
    • 利用規約
    • プライバシーポリシー
    • 運営会社
    • 採用情報

    © Copyright 2022 ハックノート All rights reserved.