HTMLImageElement: srcset

Baseline

20157

HTMLImageElement srcset 1 (,)

URL src

srcset sizes

: srcset sizes srcset

1 HTMLImageElement <img>

URL URL

"w" 450 450w 0 srcset "w" sizes
"x" 2 2x 2.0x

URL "1x"

"images/team-photo.jpg, images/team-photo-retina.jpg 2x"

1x 2 (2x)

srcset "x" src URL 1x

"header640.png 640w, header960.png 960w, header1024.png 1024w"

640px, 960px, 1024px

srcset "w" srcset "w" src

HTML

HTML src 1x 400 srcset 2x 2x

html

<div class="box">
  <img
    src="/ja/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png"
    alt="Clock"
    srcset="
      /ja/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png 2x
    " />
</div>

CSS

CSS 200 word-break break-all

css

.box {
  width: 200px;
  border: 2px solid rgb(150 150 150);
  padding: 0.5em;
  word-break: break-all;
}

.box img {
  width: 200px;
}

JavaScript

window load currentSrc srcset URL

window.addEventListener("load", () => {
  const box = document.querySelector(".box");
  const image = box.querySelector("img");

  const newElem = document.createElement("p");
  newElem.textContent = ": ";
  newElem.appendChild(document.createElement("code")).textContent =
    image.currentSrc;
  box.appendChild(newElem);
});

URL 1x 2x


HTML # dom-img-srcset

HTML

MDN

MDN 2026615

GitHub