diff --git a/playground.html b/playground.html index 2b63073..9f89950 100644 --- a/playground.html +++ b/playground.html @@ -1,5 +1,6 @@ +
@@ -8,16 +9,72 @@ ++<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-480.jpg" +srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-960.jpg 2x, + https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1440.jpg 3x, + https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1920.jpg 4x" +alt="shiny black dog looking pensive" +width="480" height="360"> ++ + Better though is + + + +
+<picture> + <source media="(min-width:600px)" + srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-320.jpg 320w, + https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg 480w, + https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-720.jpg 720w, + https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-960.jpg 960w, + https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1440.jpg 1440w, + https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1920.jpg 1920w" > + <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-320.jpg 320w, + https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-480.jpg 480w, + https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-720.jpg 720w, + https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-960.jpg 960w" > + <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg" + alt="smiling black dog" + height="360px" width="480px"> +</picture> ++