Use a WebP image with a website fallback

Use a <picture> element with a WebP <source> and a fallback <img>. The browser can use a source whose format it supports, while the required <img> supplies the fallback. See MDN’s <picture> documentation.

1. Prepare two files showing the same image: a WebP version and a fallback in a format suited to the content. JPEG is an option for a photograph; PNG is an option when the fallback needs transparency. MDN’s image format guide describes the formats and their compatibility.
2. Put the WebP file in a <source> with type="image/webp". Put the fallback file in the <img> element, which must remain inside <picture>. For a photograph, the markup can look like this:

<picture>
  <source srcset="/images/harbor.webp" type="image/webp">
  <img src="/images/harbor.jpg" alt="Harbor at dusk">
</picture>

Replace both paths and the alternative text with values for your image. The type identifies the WebP candidate; the src on <img> points to the fallback. Keep the fallback even if your usual browser displays the WebP file.

Choose the fallback by the content of the asset. For a photograph, a JPEG can carry the same scene. For a logo or screenshot that needs transparency or crisp graphic edges, PNG may better preserve what the reader needs. MDN describes these format properties in its image-format guide. Keep both exports at the same intended crop so switching formats does not move the subject within the page. The HTML shown here is a file-selection pattern; it does not convert the image files for you.

Self-check: Open each image URL directly to confirm that both files are available. Then load the page and inspect the displayed image. In a local copy of the markup, remove the <source> and reload the page: the <img> should still show the intended image. This checks that the fallback path works; it does not establish which format every visitor’s browser will choose.

If the fallback file is missing or its path is wrong, <picture> cannot supply it when the WebP source is unsuitable. A working WebP image alone does not make the fallback usable.

When the page shows no image, check the two URLs separately before changing the markup. If both URLs work, compare the WebP MIME type and the <img src> path with the actual file names. If the fallback loads but the WebP does not, keep the page usable with the fallback while you correct or replace the WebP export. Judge any file-size benefit from your own exported pair; the format name alone is not a measured saving for this image.