HTML Picture Type Switching for AVIF, WebP, and JPEG

Adding a picture or video is the easy part. Making it load efficiently and understandable to every visitor is the real goal.

What You Need to Know

Picture can also offer modern formats first and an ordinary img fallback last. The browser picks a format it supports; the fallback is essential when newer formats are not available.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<picture>
    <source srcset="images/forest.avif" type="image/avif">
    <source srcset="images/forest.webp" type="image/webp">
    <img src="images/forest.jpg" alt="A sunlit forest path" width="960" height="640">
</picture>

Let’s Read the Code

• <picture>: The picture can offer alternate crops or formats to the browser.
• <source>: A source points to a media file or image choice with a type or other condition.
• srcset: Srcset offers image candidates for different displays or layout sizes.
• type: Type changes what sort of control or resource the browser uses.

Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.

What Happens in the Browser?

The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.

Which picture loads? With width descriptors, sizes describes the expected display width and srcset offers candidates. The browser can also consider screen density and network conditions. Inspect the selected source instead of assuming every screen receives the same file.

Your Turn

Try changing one file path or attribute. Notice whether the browser falls back to another source or shows missing content.

Common Beginner Mistakes

• Leaving out real media files or understandable text alternatives.
• Always check keyboard access, readable alternatives, and any missing files; a perfect player layout does not guarantee accessible content.

Key Takeaways

• Picture can also offer modern formats first and an ordinary img fallback last.
• <picture>: The picture can offer alternate crops or formats to the browser.
• Test the behavior you expect rather than trusting how the snippet looks in your editor.