Home
HTML
HTML Picture Element
Example 1: HTML Picture Element
Run ❯❯
<!DOCTYPE html> <html> <head> <title>HTML Picture Element Example</title> </head> <body> <h1>HTML Picture Element</h1> <picture> <source srcset="small.jpg" media="(max-width: 500px)"> <source srcset="medium.jpg" media="(max-width: 700px)"> <img src="large.jpg" alt="Large Image"> </picture> <p>Resize the browser to see the loading of different images.</p> <p>If the screen width is 500px or less then the image small.jpg will load.</p> <p>If the screen width is 700px or less then the image medium.jpg will load.</p> <p>If the screen width is more than 700px then the image large.jpg will load.</p> </body> </html>