Lazy-loading media
The loading="lazy" attribute for <video> and <audio> elements defers loading the media resource until the element is near the viewport. This matches the lazy-loading behavior for <img> and <iframe> elements. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The loading="lazy" attribute for <video> and <audio> elements defers loading the media resource until the element is near the viewport. This matches the lazy-loading behavior for <img> and <iframe> elements. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.HTMLMediaElement.loading Experimental | 147 | 147 | | | 147 | |
| HTML attribute | ||||||
loading Experimental | 147 | 147 | | | 147 | |
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
Syntax
<img src="photo.jpg" loading="lazy" alt="遅延読み込み画像"
width="800" height="600">
<iframe src="https://example.com" loading="lazy"
width="600" height="400"></iframe>Live demo
Lazy media poster
Use loading="lazy" on a media element when the browser supports deferred media loading.
Media loading checklist
Compare lazy loading with poster images, dimensions, and preload hints.
Delivery guidance
Document when lazy media is useful and when eager loading is still the right choice.
Use cases
Enhance media playback
Use Lazy-loading media when audio, video, or responsive media needs better control or more capable browser behavior.
Deliver flexible assets
Apply Lazy-loading media to adapt media loading or presentation more closely to user context and device capability.
Cautions
- Test Lazy-loading media in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Pair richer media behavior with captions, transcripts, controls, and loading behavior that remain understandable to all users.
Related links
Powered by web-features