<img src="/uploads/screenshot.png" alt="The settings screen" width="1200" height="800" loading="lazy" decoding="async" />loading="lazy" defers the download until the image is near the viewport. width and height let the browser reserve the space, so the page doesn't jump when it arrives. decoding="async" keeps a big image from blocking the paint.
Don't lazy load the hero image or anything above the fold; it makes the page look slower. For those, do the opposite:
<img src="/hero.jpg" alt="…" width="1200" height="630" fetchpriority="high" />Stati adds the sizes and loading="lazy" to every Markdown image on this site by itself, which is one reason I stopped writing <img> tags by hand.