Responsive Image

Image served at sizes appropriate to the device.

html

<figure class="ri">
  <img class="ri__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500'%3E%3Crect width='800' height='500' fill='%23F5C2E0'/%3E%3Ccircle cx='400' cy='250' r='140' fill='%23D9C8F0'/%3E%3C/svg%3E" style="object-fit:cover;border-radius:10px;" sizes="100vw" alt="Scales to the viewport, not just the container." loading="lazy" width="800" height="500" />
  <!-- Production: pair `sizes` with a real `srcset` listing multiple source widths, e.g. "photo-480.jpg 480w, photo-960.jpg 960w". -->
  <figcaption class="ri__caption">Scales to the viewport, not just the container.</figcaption>
</figure>
<style>
.ri { margin: 0; max-width: 360px; font: 12px/1.4 system-ui, sans-serif; color: #241430; }
.ri__img { display: block; width: 100%; aspect-ratio: 8 / 5; }
.ri__caption { margin-top: 6px; color: #24143099; }
</style>

tailwind

<figure class="ri-tw m-0 max-w-[360px] font-sans text-xs text-[#241430]">
  <img class="block w-full" style="aspect-ratio:8/5;object-fit:cover;border-radius:10px;" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500'%3E%3Crect width='800' height='500' fill='%23F5C2E0'/%3E%3Ccircle cx='400' cy='250' r='140' fill='%23D9C8F0'/%3E%3C/svg%3E" sizes="100vw" alt="Scales to the viewport, not just the container." loading="lazy" width="800" height="500" />
  <!-- Production: pair `sizes` with a real `srcset` listing multiple source widths, e.g. "photo-480.jpg 480w, photo-960.jpg 960w". -->
  <figcaption class="mt-1.5 text-[#241430]/60">Scales to the viewport, not just the container.</figcaption>
</figure>

react

export function ResponsiveImage({
  sizesPreset = "100vw",
  objectFit = "cover",
  radius = 10,
  caption = "Scales to the viewport, not just the container.",
}) {
  return (
    <figure style={{ margin: 0, maxWidth: 360, font: "12px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500'%3E%3Crect width='800' height='500' fill='%23F5C2E0'/%3E%3Ccircle cx='400' cy='250' r='140' fill='%23D9C8F0'/%3E%3C/svg%3E"
        sizes={sizesPreset}
        alt={caption}
        loading="lazy"
        width={800}
        height={500}
        style={{ display: "block", width: "100%", aspectRatio: "8 / 5", objectFit, borderRadius: radius }}
      />
      {/* Production: pair `sizes` with a real `srcset` listing multiple source widths, e.g. "photo-480.jpg 480w, photo-960.jpg 960w". */}
      <figcaption style={{ marginTop: 6, color: "#24143099" }}>{caption}</figcaption>
    </figure>
  );
}