Show Output
<!DOCTYPE html> <html lang="en"> <head> <title>Specify Multiple Source for Images in HTML</title> </head> <body> <picture> <source media="(min-width: 1000px)" srcset="/examples/images/logo-large.png"> <source media="(max-width: 500px)" srcset="/examples/images/logo-small.png"> <img src="/examples/images/logo-default.png" alt="My logo"> </picture> <p><strong>Note:</strong> Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how it actually works.</p> </body> </html>