What’s the difference between <img> and <picture>?

If you’ve ever hesitated between them, this post should make the choice a little clearer.

Let’s start with the one we use most: <img>

The <img> element displays a single image.

You give it a src, add an alt description for accessibility, and in many cases, that’s all you need.

<img
  src="image.jpg"
  alt="A developer working on a laptop"
>

Simple? But <img> can also handle responsive images using srcset and sizes:

<img
  src="image-600w.jpg"
  srcset="
    image-300w.jpg 300w,
    image-600w.jpg 600w,
    image-1200w.jpg 1200w
  "
  sizes="100vw"
  alt="A developer working on a laptop"
>

The browser can now choose the most suitable file based on factors such as the rendered image size, screen resolution, and the available candidates.

The content of the image stays the same.

Only the file dimensions change.

So <img> is usually enough when:

• You need one image.
• You need different sizes of the same image.
• You don’t need to change its composition across screen sizes.

Then what is <picture> for?

<picture> lets you provide different image sources based on conditions such as viewport size or supported file format.

The important detail is that <picture> doesn’t replace <img>.

It works with it.

<picture>
  <source
    media="(min-width: 768px)"
    srcset="wide-image.jpg"
  >

  <source
    media="(max-width: 767px)"
    srcset="portrait-image.jpg"
  >

  <img
    src="default-image.jpg"
    alt="A developer working on a laptop"
  >
</picture>

Here, desktop users receive a wide image, while mobile users receive a portrait version.

This is known as art direction.

You’re not just serving a smaller file. You’re changing the crop or composition so the image fits the layout better.

<picture> can also help you serve modern formats with a fallback:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">

  <img
    src="image.jpg"
    alt="A developer working on a laptop"
  >
</picture>

The browser checks the sources in order and selects the first format it supports.

If AVIF isn’t supported, it tries WebP.

If neither works, the <img> provides the JPG fallback.

So the choice is fairly simple:

Use <img> when you’re showing the same image, even if you need it in different sizes.

Use when you need to control which image is displayed based on its format, crop, composition, or a media condition.

So the difference is simpler than it first looks:

• <img> chooses the best version of an image.

• <picture> lets you define which image the browser should choose from.

Now you can stop making the browser solve your identity crisis between the two.