saved picture element

Walle Cyril · Walle Cyril · commit e7e7e9a52522 · 2018-03-03T04:47:35.000+01:00
diff --git a/html/picture-element.md b/html/picture-element.md
@@ -1,30 +1,18 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title>html boilerplate</title>
-    
-    <!-- style -->
-    <link rel="icon" href="icon.png">
-    <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="css/normalize.css">
-    <link rel="stylesheet" href="css/examples/demo.css">
-    
-    <!-- install -->
-    <link rel="manifest" href="manifest.webmanifest">
-    <meta name="msapplication-TileColor" content="#123456">
-    <meta name="msapplication-square150x150logo" content="images/icons/150.png">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="mobile-web-app-capable" content="yes">
-    
-    <!-- prerender -->
-    <link rel="prerender" href="x.html">
-</head>
-<body>
+# `<picture>`
 
-    <p>Drink water</p>
-    
+## Use case
 
-    <script src="bundle.js"></script>
-</body>
-</html>
+Provide the user-agent many image options, letting it decide the one that fits best.
+
+An example where a high resolution image will be downloaded (and used) on wide enough devices.
+ 
+```
+<picture class="">
+    <source srcset="image-high-resolution.jpg" media="(min-width: 992px)">
+    <img class="" src="image-low-resolution.jpg" alt="">
+</picture>
+```
+
+## Fallback
+
+In case the element is not supported the <img> inside will always be used.
