Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of HTML picture Tag</title> <style> body { text-align: center; } </style> </head> <body> <picture> <source media="(min-width: 1024px)" srcset="/examples/images/banner-large.png"> <source media="(max-width: 768px)" srcset="/examples/images/banner-small.png"> <img src="/examples/images/banner.png" alt="Banner"> </picture> <p><strong>Note:</strong> Open the output in a new blank tab and resize the browser window to understand how the picture element actually works.</p> </body> </html>
