Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<picture> <!-- WebP for modern browsers, smaller file size --> <source srcset="hero.webp" type="image/webp"> <!-- Cropped version for mobile --> <source srcset="hero-mobile.jpg" media="(max-width: 768px)"> <!-- Fallback img --> <img src="hero.jpg" alt="Hero image" loading="lazy"> </picture>
Result
Open