Example: Format Fallback
<picture>
<source srcset="images/hero.avif" type="image/avif">
<source srcset="images/hero.webp" type="image/webp">
<img src="images/hero.jpg"
alt="Developer learning web technologies"
width="1200"
height="600">
</picture>The browser evaluates the source elements in order and uses a suitable supported source. The img element provides the fallback image and carries the alternative text.
The picture element is useful when you have multiple representations of the same image or different crops for different display contexts.
12. Image Loading Performance
Images can account for a significant portion of a webpage's downloaded bytes. Efficient loading improves perceived performance, reduces data usage and can help important content appear sooner.
A. Lazy Loading
The loading="lazy" attribute allows the browser to defer loading an image until it approaches the visible area.
<img src="images/related-course.jpg"
alt="Related web development course"
width="640"
height="360"
loading="lazy">Lazy loading is especially useful for images far below the initial viewport.
Do not apply lazy loading indiscriminately to the main hero image or another image that is likely to be the page's Largest Contentful Paint element. Delaying a prominent image can make the page appear slower.
B. Asynchronous Decoding
The decoding="async" attribute allows the browser to decode an image asynchronously where supported.
<img src="images/article-thumbnail.webp"
alt="Article thumbnail about HTML"
width="640"
height="360"
decoding="async">This is a hint to the browser, not a guarantee that every browser will use a particular decoding strategy.
C. Fetch Priority
The fetchpriority attribute expresses the relative priority of a resource request.
<img src="images/hero.webp"
alt="Main course banner"
width="1200"
height="600"
fetchpriority="high">Use high priority selectively for important images that need early loading. Do not set high priority on every image because excessive prioritization can reduce the benefit of resource scheduling.
D. Correctly Sized Image Files
Do not assume that a small displayed image requires a small download. Select or generate an image resource that suits the intended display size and quality.
For example, downloading a 5000-pixel photograph to display a small thumbnail can waste bandwidth when a smaller version would be sufficient.
13. Image Dimensions and Layout Stability
When an image loads without reserved space, the page layout may shift as the browser discovers its dimensions. Providing width and height attributes helps the browser reserve the appropriate aspect ratio before the resource finishes loading.