SVG, image or video?

Why does the web have so many formats?

A logo is made of shapes. A photograph contains millions of local variations. An animation adds change over time. Those are different information problems, so a universal “best format” would be a poor tool.

SVG describes shapes and paths, which makes it excellent for geometric diagrams, logos and scalable illustrations. Raster formats store pixels—often more efficiently for complex scenes. Video formats compress a sequence of images over time and commonly outperform animated GIF for continuous motion. A still image, however, is often cheaper and calmer than video.

Inspect two kinds of graphic.

This simple illustration is inline SVG. Try zooming the browser page: its lines stay crisp because the browser renders vector geometry. Compare that to a photograph, which represents a sampled image of the world and may look soft when enlarged beyond its source resolution.

The second illustration is a CSS stand-in, not a genuine photographic compression benchmark. To compare file weight accurately, export the same real photo at the same visual quality in multiple formats and inspect transferred bytes.

The browser can select sources early.

<picture>
  <source srcset="scene.avif" type="image/avif">
  <source srcset="scene.webp" type="image/webp">
  <img src="scene.jpg"
       width="960" height="640"
       alt="A hillside garden in morning light">
</picture>

<img src="card-small.webp"
     srcset="card-small.webp 400w, card-large.webp 900w"
     sizes="(max-width: 600px) 100vw, 50vw"
     width="900" height="600"
     alt="A city street at dusk">
<!-- The image file names are examples, not bundled assets. -->

<picture> lets the browser choose among alternative image sources and types. srcset and sizes tell it about image candidates and display width before layout finishes. This matters because browsers begin discovering images early—waiting for JavaScript can be too late to avoid a wasted download.

Specify intrinsic image dimensions or an aspect ratio to reduce layout shift. Lazy-load offscreen media, but don't blindly lazy-load the important image at the top of a page. Decode time, memory and the number of pixels still matter even when compressed bytes are small.

What about animation?

<video muted loop playsinline
       poster="preview.jpg" controls>
  <source src="loop.webm" type="video/webm">
  <source src="loop.mp4" type="video/mp4">
  <p>Your browser cannot play this video.</p>
</video>

For moving demonstrations, modern video can be much smaller than animated GIF and offers playback semantics. The example includes controls rather than forcing autoplay. If you use decorative autoplay, it should be muted, nonessential, sensitive to reduced-motion preferences, and offered with a meaningful static poster or alternative.

A practical media decision table.

• Icon, diagram, logo? First try SVG, but inspect complexity and avoid embedding untrusted SVG markup.
• Photo or detailed screenshot? Try a suitable raster format such as AVIF or WebP; compare quality, size and decode behavior.
• Responsive photography? Use srcset, sizes and <picture> where art direction or format fallback is needed.
• Looping animation? Consider video over GIF, but consider a static image first when motion contributes little.
• Meaningful video? Provide controls, captions and other relevant alternatives.

The meaning must survive the medium.

Alternative text should replace the purpose of meaningful imagery, not recite every pixel. Decorative images should not create noisy screen-reader output. SVG can use an accessible name and description when it communicates meaning; an adjacent text explanation may be better for complex charts.

Videos with dialogue need captions; transcripts and audio description may also be appropriate depending on content. Motion-sensitive users need a way to avoid nonessential animation. For performance, measure actual network transfer, decode cost, layout shift and rendering on representative devices.

Explain your choices.

Break it

Take a 240-pixel logo, export it as a huge PNG, and display it at icon size. What happened to bytes and clarity? Now try a complex photo represented as thousands of SVG paths.

Build it

Create a news card with a responsive photo, an SVG icon and a short motion demonstration. For each file, document what it communicates, whether it needs an alternative, and what you expect it to cost to load.

Go a little deeper.

• MDN — Responsive images
• MDN — SVG
• web.dev — Image performance
• web.dev — Replace animated GIFs with video