Responsive image

Serve the right size and format, and avoid layout shift.

html beginner #images#performance
在游乐场中打开
html-responsive-image.html
<picture>
  <source type="image/webp"
          srcset="/img/hero-640.webp 640w, /img/hero-1280.webp 1280w, /img/hero-1920.webp 1920w"
          sizes="(max-width: 700px) 100vw, 1200px">
  <img src="/img/hero-1280.jpg"
       srcset="/img/hero-640.jpg 640w, /img/hero-1280.jpg 1280w"
       sizes="(max-width: 700px) 100vw, 1200px"
       width="1280" height="720" alt="Dashboard showing weekly sales" loading="lazy" decoding="async">
</picture>