Here’s sample code for switching images between desktop and mobile using only HTML and CSS web technologies.

Background: Want to Switch Images for PC and Mobile

Using only HTML and CSS to switch images based on display size, the finished result looks like this:

? https://codenote-net.github.io/sandbox/responsive-img/index.html

Sample Code for Switching PC and Mobile Images with CSS Only

CSS

.pc {
  display: block !important;
}
.sp {
  display: none !important;
}

@media only screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}

HTML

<img class="pc" src="2560x6000.png" width="100%" />
<img class="sp" src="1242x5200.png" width="100%" />

The sample code is published in the following GitHub Pull Request, so please take a look.

? Desktop, Mobile で違う画像に切り替えるサンプルコード · Pull Request #10 · codenote-net/sandbox

That’s all from the Gemba.