<!-- Created on savesnippets.com · https://savesnippets.com/gbRmkoIJy0jhqM -->
<img
    src="/img/hero-1200.jpg"
    srcset="
        /img/hero-400.jpg   400w,
        /img/hero-800.jpg   800w,
        /img/hero-1200.jpg 1200w,
        /img/hero-1600.jpg 1600w
    "
    sizes="(min-width: 1024px) 50vw, 100vw"
    alt="A team of developers reviewing code on a large monitor."
    loading="lazy"
    decoding="async"
    width="1200" height="600">

<!-- What each attribute does:
     srcset      — candidates (file Wpx) the browser can choose from
     sizes       — "how wide will this image render in CSS px?"
                   The browser combines that with DPR to pick the best srcset entry.
     loading     — lazy: defer offscreen images until near the viewport
     decoding    — async: don't block paint while decoding
     width/height — reserve layout space (prevents CLS) -->