Lazy-Loaded Image

Image loaded only as it approaches the viewport.

html

<figure class="lli" style="width:320px;">
  <img class="lli__img lli__img--fade" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Crect width='320' height='200' fill='%23BFD9F2'/%3E%3Ccircle cx='240' cy='60' r='28' fill='%23E8A020'/%3E%3Cpath d='M0 160 L80 100 L160 150 L240 90 L320 140 L320 200 L0 200 Z' fill='%23A8E6C1'/%3E%3C/svg%3E" alt="Harbour at dusk" loading="lazy" width="320" height="200" />
  <figcaption class="lli__caption">Harbour at dusk</figcaption>
</figure>
<style>
.lli { max-width: 100%; font: 13px/1.4 system-ui, sans-serif; color: #241430; }
.lli__img { display: block; width: 100%; height: auto; aspect-ratio: 320 / 200; border-radius: 8px; background: #24143010; }
@keyframes lli-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .lli__img--fade { animation: lli-fade-in 200ms ease-out; }
}
.lli__caption { margin: 8px 2px 0; color: #24143099; }
</style>

tailwind

<figure class="lli-tw font-sans text-[13px] text-[#241430]" style="width:320px;max-width:100%;">
  <img class="block w-full h-auto rounded-lg bg-[#24143010] lli-tw__img--fade" style="aspect-ratio:320/200;" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Crect width='320' height='200' fill='%23BFD9F2'/%3E%3Ccircle cx='240' cy='60' r='28' fill='%23E8A020'/%3E%3Cpath d='M0 160 L80 100 L160 150 L240 90 L320 140 L320 200 L0 200 Z' fill='%23A8E6C1'/%3E%3C/svg%3E" alt="Harbour at dusk" loading="lazy" width="320" height="200" />
  <figcaption class="mt-2 mx-0.5 text-[#241430]/60">Harbour at dusk</figcaption>
</figure>
<style>
@keyframes lli-tw-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .lli-tw__img--fade { animation: lli-tw-fade-in 200ms ease-out; }
}
</style>

react

export function LazyLoadedImage({
  loading = "lazy",
  fadeIn = true,
  width = 320,
  caption = "Harbour at dusk",
}) {
  return (
    <figure style={{ width, maxWidth: "100%", font: "13px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Crect width='320' height='200' fill='%23BFD9F2'/%3E%3Ccircle cx='240' cy='60' r='28' fill='%23E8A020'/%3E%3Cpath d='M0 160 L80 100 L160 150 L240 90 L320 140 L320 200 L0 200 Z' fill='%23A8E6C1'/%3E%3C/svg%3E"
        alt={caption}
        loading={loading}
        width={width}
        height={200}
        className={fadeIn ? "lli-react__img lli-react__img--fade" : "lli-react__img"}
        style={{ display: "block", width: "100%", height: "auto", aspectRatio: "320 / 200", borderRadius: 8,
          background: "#24143010" }}
      />
      <figcaption style={{ margin: "8px 2px 0", color: "#24143099" }}>{caption}</figcaption>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .lli-react__img--fade { transition: opacity 200ms ease; }
        }
      `}</style>
    </figure>
  );
}