WebP fallback: why a broken image does not switch to JPEG

You can offer a WebP image with a JPEG alternative using HTML’s <picture> element. If the browser skips the WebP source because it does not support its declared format, it can use the JPEG in <img>. If it selects the WebP source and that URL is broken, the JPEG is not an automatic retry.

When an image disappears after you add WebP to a page, inspect the selected URL before changing the markup.

Add a WebP source and a JPEG image

Put both image files beside the page that uses them, then add this markup:

<picture>
  <source type="image/webp" srcset="trail-1280.webp">
  <img
    src="trail-1280.jpg"
    width="1280"
    height="800"
    alt="Trail sign pointing left to River loop and right to Hill lookout">
</picture>

The <source> comes before <img>. It offers the WebP file to browsers that accept image/webp; the <img> supplies the JPEG alternative and the image’s alternative text. The filenames in this example are relative to the HTML page, so keep the files together or change the paths to match where you uploaded them. The declared format should match the file you actually encoded. See the HTML <picture> reference and image format guide.

Here is the illustration used in the example:

The drawing is an instructional diagram, not a source of real trail directions. Its 1280 × 800 WebP export is 14,080 bytes; the JPEG export at the same dimensions and crop is 28,937 bytes. That is a 14,857-byte difference, about 51.3% smaller for this particular WebP export. It says nothing by itself about how other images will compress or how the two exports compare visually.

To practice with the exact pair, download the WebP and fallback demo, WebP image, and JPEG image. Save all three in one folder before opening the HTML file.

See what fallback does, and what it does not

The demo shows three versions of the same <picture> pattern. The first offers a valid WebP source. The second uses a deliberately unknown type, image/x-howcurio-unsupported, while pointing to the existing WebP file. The third declares a supported WebP type but points to missing-trail.webp, which is intentionally absent.

In the recorded Chrome run, the first image selected trail-1280.webp and loaded at a natural width of 1280 pixels. The unknown-type example selected trail-1280.jpg and also loaded at 1280 pixels. The broken-source example kept missing-trail.webp as its selected URL, reported an error, and had a natural width of 0. Its request returned HTTP 404.

The unknown type demonstrates a browser skipping a source before trying to load its URL. It is a way to inspect selection in a modern browser, not a test of an older browser. The broken example demonstrates a different problem: the browser accepted the WebP type, selected its URL, and then could not load the file. It did not switch to the JPEG.

Seeing a WebP display successfully proves that the WebP source loaded in that case. To inspect the JPEG selection locally, remove the <source> from a copy of the markup or try the demo’s unknown-type example. Neither action is a substitute for testing a particular older browser.

Find the selected image URL

Open the page’s browser developer tools and select the image. In the Console, you can inspect its current state with:

const image = document.querySelector("picture img");
console.log({
  currentSrc: image.currentSrc,
  complete: image.complete,
  naturalWidth: image.naturalWidth
});

currentSrc tells you which URL the browser selected. The demo also displays whether each image received a load or error event. Do not treat complete: true alone as proof of success: all three recorded examples had that value, including the broken one. In that example, the error event and naturalWidth: 0 identified the failed load. The MDN currentSrc reference describes the selected URL property.

Next, look in the Network panel for a request to that selected URL. A 404 for missing-trail.webp points to a missing resource, not format rejection. On your own site, check the exact path and filename case, confirm that the file was uploaded, and open the image URL directly. Check the actual file and the HTTP Content-Type response as well as its extension. A .webp ending does not establish what bytes the server delivered.

Repair a broken WebP source

If your live WebP URL is wrong, correct the path or upload the file at the path your markup uses. If the JPEG is already served correctly and you need a reversible immediate fix, remove the WebP <source> temporarily so the <img> selects that JPEG. Restore the source after its URL and response are fixed.

Choose the alternative image format for the content you need to preserve. The practice illustration works as a JPEG alternative; an image that depends on transparency may need a suitable PNG alternative instead. Do not copy the demo’s missing WebP URL into a production page. It exists only to make the failure visible.

Make a local download behave like the example

The complete image demo ZIP includes the HTML pages and their image files. Extract it before opening webp.html. If you open the HTML while it is still inside the archive, the browser may not have the sibling image paths it expects. The working WebP and JPEG should display; the third image is supposed to fail. Its missing file is not an omitted download.

Opening that page as a local file lets you inspect the selected filenames and visible results. HTTP status codes require serving it over HTTP, as in the recorded trial. A local file lookup does not produce the same server response as an HTTP 404. When you investigate your actual website, use its ordinary URL and the browser’s Network panel.

If a hosted page works but your copied page does not, compare the paths before changing image formats. The demo uses sibling filenames such as trail-1280.webp. A site path beginning with / starts from the host’s root, whereas a sibling filename follows the HTML page’s directory. Moving the page into another folder without its images changes that relationship.

Upload the JPEG alternative too. A successful WebP load can hide an absent JPEG during an ordinary visit. Open the JPEG URL directly and inspect the local example with its source removed to see that image placement. These checks answer different questions: the first checks that the file exists; the second checks that the page can display it when the WebP source is absent.

Source note: The three outcomes above come from a synthetic local test in Chrome 154.0.8037.93 on October 7, 2026. Other browser engines and older browsers were not tested. The HTML image selection standard documents the underlying selection behavior.