bjankord · December 24, 2015 10:08 · Oct 1, 2013 · Oct 1, 2013 · Oct 1, 2013 · Oct 1, 2013
diff --git a/notes.md b/notes.md
@@ -28,10 +28,15 @@ I've reached out to Tubal to see if he can give some more info about what browse
 **Update 0.1.1**
 
 Additional resources:
+
 [http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/](http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/)
+
 [http://www.nczonline.net/blog/2010/07/13/empty-string-urls-browser-update/](http://www.nczonline.net/blog/2010/07/13/empty-string-urls-browser-update/)
+
 [https://github.com/Wilto/srcn-polyfills](https://github.com/Wilto/srcn-polyfills)
+
 [https://github.com/jonathantneal/respimg](https://github.com/jonathantneal/respimg)
+
 [https://github.com/scottjehl/Device-Bugs/issues/3](https://github.com/scottjehl/Device-Bugs/issues/3) Read note about "or the image src is invalid"
 
 Creating a new element would allows us to leave the oddities of images with empty or no src attribute behind.

diff --git a/notes.md b/notes.md
@@ -24,3 +24,15 @@ If you could use scrN on a element besides img, it would resolve some concerns w
 It looks like in IE, IE11 - IE7, [no image icons show up](http://i.imgur.com/PYo0HTV.png?1) if you leave the src attr empty on an image or leave it off altogher. This may be a mute point as the src attribute would be populated or added back with the polyfill. Users without JS will see all those lovely icons in IE though. IE users and users without JS, two groups people really care about.
 
 I've reached out to Tubal to see if he can give some more info about what browsers have issues with empty src attributes on the img element. I've also updated the markup to use pic instead of picture per request.
+
+**Update 0.1.1**
+
+Additional resources:
+[http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/](http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/)
+[http://www.nczonline.net/blog/2010/07/13/empty-string-urls-browser-update/](http://www.nczonline.net/blog/2010/07/13/empty-string-urls-browser-update/)
+[https://github.com/Wilto/srcn-polyfills](https://github.com/Wilto/srcn-polyfills)
+[https://github.com/jonathantneal/respimg](https://github.com/jonathantneal/respimg)
+[https://github.com/scottjehl/Device-Bugs/issues/3](https://github.com/scottjehl/Device-Bugs/issues/3) Read note about "or the image src is invalid"
+
+Creating a new element would allows us to leave the oddities of images with empty or no src attribute behind.
+
diff --git a/notes.md b/notes.md
@@ -21,4 +21,6 @@ If you could use scrN on a element besides img, it would resolve some concerns w
 
 **Update 0.1.0**
 
-It looks like in IE, IE11 - IE7, [no image icons show up](http://i.imgur.com/PYo0HTV.png?1) if you leave the src attr empty on an image or leave it off altogher. This may be a mute point as the src attribute would be populated or added back with the polyfill. I've reached out to Tubal to see if he can give some more info about what browsers have issues with empty src attributes on the img element. I've also updated the markup to use pic instead of picture per request.
+It looks like in IE, IE11 - IE7, [no image icons show up](http://i.imgur.com/PYo0HTV.png?1) if you leave the src attr empty on an image or leave it off altogher. This may be a mute point as the src attribute would be populated or added back with the polyfill. Users without JS will see all those lovely icons in IE though. IE users and users without JS, two groups people really care about.
+
+I've reached out to Tubal to see if he can give some more info about what browsers have issues with empty src attributes on the img element. I've also updated the markup to use pic instead of picture per request.
diff --git a/notes.md b/notes.md
@@ -20,4 +20,5 @@ I've put a demo together to do some testing when the img src is empty/removed al
 If you could use scrN on a element besides img, it would resolve some concerns with polyfilling a srcN solution.
 
 **Update 0.1.0**
+
 It looks like in IE, IE11 - IE7, [no image icons show up](http://i.imgur.com/PYo0HTV.png?1) if you leave the src attr empty on an image or leave it off altogher. This may be a mute point as the src attribute would be populated or added back with the polyfill. I've reached out to Tubal to see if he can give some more info about what browsers have issues with empty src attributes on the img element. I've also updated the markup to use pic instead of picture per request.
diff --git a/notes.md b/notes.md
@@ -13,6 +13,11 @@ From [Riloadr docs](https://github.com/tubalmartin/riloadr#2-how-to-use), Túbal
 
 So leaving the src attr empty is a no go. I'm not 100% sure if there are issues with removing the src attribute altogher from the img element. I feel like some browsers will add the attribute back which would leave us with an empty src attribute.
 
+
+
 I've put a demo together to do some testing when the img src is empty/removed altogether which can be found [here](http://codepen.io/bjankord/full/Bnugh).
 
-If you could use scrN on a element besides img, it would resolve some concerns with polyfilling a srcN solution.
+If you could use scrN on a element besides img, it would resolve some concerns with polyfilling a srcN solution.
+
+**Update 0.1.0**
+It looks like in IE, IE11 - IE7, [no image icons show up](http://i.imgur.com/PYo0HTV.png?1) if you leave the src attr empty on an image or leave it off altogher. This may be a mute point as the src attribute would be populated or added back with the polyfill. I've reached out to Tubal to see if he can give some more info about what browsers have issues with empty src attributes on the img element. I've also updated the markup to use pic instead of picture per request.
diff --git a/picture.html b/picture.html
@@ -1,13 +1,13 @@
 // Default use
 
-<picture src-1="(min-width: 1150px) pic-large.jpg"
+<pic src-1="(min-width: 1150px) pic-large.jpg"
          src-2="(min-width: 500px) pic-medium.jpg"
          src="pic-small.jpg"
          alt="Obama talking to a soldier in hospital scrubs.">
 
 // No JS fallback/Markup used to build polyfill
 
-<picture src-1="(min-width: 1150px) pic-large.jpg"
+<pic src-1="(min-width: 1150px) pic-large.jpg"
          src-2="(min-width: 500px) pic-medium.jpg"
          src="pic-small.jpg"
          alt="Obama talking to a soldier in hospital scrubs.">

diff --git a/notes.md b/notes.md
@@ -13,6 +13,6 @@ From [Riloadr docs](https://github.com/tubalmartin/riloadr#2-how-to-use), Túbal
 
 So leaving the src attr empty is a no go. I'm not 100% sure if there are issues with removing the src attribute altogher from the img element. I feel like some browsers will add the attribute back which would leave us with an empty src attribute.
 
-I've put a demo together to do some testing which can be found [here](http://codepen.io/bjankord/pen/Bnugh).
+I've put a demo together to do some testing when the img src is empty/removed altogether which can be found [here](http://codepen.io/bjankord/full/Bnugh).
 
 If you could use scrN on a element besides img, it would resolve some concerns with polyfilling a srcN solution.
diff --git a/picture.html b/picture.html
@@ -1,14 +1,14 @@
 // Default use
 
-<picture src-1="(max-width: 400px) pic-small.jpg"
-         src-2="(max-width: 1000px) pic-medium.jpg"
-         src="pic-large.jpg"
+<picture src-1="(min-width: 1150px) pic-large.jpg"
+         src-2="(min-width: 500px) pic-medium.jpg"
+         src="pic-small.jpg"
          alt="Obama talking to a soldier in hospital scrubs.">
 
 // No JS fallback/Markup used to build polyfill
 
-<picture src-1="(max-width: 400px) pic-small.jpg"
-         src-2="(max-width: 1000px) pic-medium.jpg"
-         src="pic-large.jpg"
+<picture src-1="(min-width: 1150px) pic-large.jpg"
+         src-2="(min-width: 500px) pic-medium.jpg"
+         src="pic-small.jpg"
          alt="Obama talking to a soldier in hospital scrubs.">
 <noscript><img src="pic-small.jpg" alt="Obama talking to a soldier in hospital scrubs."></noscript>
diff --git a/notes.md b/notes.md
@@ -4,7 +4,7 @@ When polyfilling srcN paired with the image element, legacy browsers which don't
 
 A few ways around this would be to leave the img src attr empty. Or remove it all togher. 
 
-From [Riloadr docs](https://github.com/tubalmartin/riloadr#2-how-to-use), Túbal Martín has some concern notes about leaving the src attr empty on img elements.
+From [Riloadr docs](https://github.com/tubalmartin/riloadr#2-how-to-use), Túbal Martín has some concerning notes about leaving the src attr empty on img elements.
 
 >Warning!:
 >Do not set an empty string for the value of src src="".

diff --git a/notes.md b/notes.md
@@ -1,4 +1,4 @@
-Creating a new element named picture or pic that mirrors the img element, minus the src attribute would allow for an easier responsive image element to polyfill.
+Creating a new element named picture or pic that mirrors the img element would allow for an easier responsive image element to polyfill.
 
 When polyfilling srcN paired with the image element, legacy browsers which don't support srcN would download the image from the src attr and the matching srcN attr. This would result in dual downloads in legacy browser which need the srcN polyfill. These "legacy browsers" are every browser today.
 

diff --git a/notes.md b/notes.md
@@ -1,4 +1,18 @@
-Creating a new element named picture that mirrors the img element, minus the src attribute would allow for an easier responsive image element to polyfill.
+Creating a new element named picture or pic that mirrors the img element, minus the src attribute would allow for an easier responsive image element to polyfill.
 
-Will post more thoughts on this, but basically, removing the src attribute from an image creates issues in some browsers.
-Though if you could use scrN on a element besides image, it wouldn't mattter if that element didn't have a src attribute.
+When polyfilling srcN paired with the image element, legacy browsers which don't support srcN would download the image from the src attr and the matching srcN attr. This would result in dual downloads in legacy browser which need the srcN polyfill. These "legacy browsers" are every browser today.
+
+A few ways around this would be to leave the img src attr empty. Or remove it all togher. 
+
+From [Riloadr docs](https://github.com/tubalmartin/riloadr#2-how-to-use), Túbal Martín has some concern notes about leaving the src attr empty on img elements.
+
+>Warning!:
+>Do not set an empty string for the value of src src="".
+>Some browsers react to this by assuming the empty string means src="/", and consequently the browser re-requests the current >HTML page and tries to stuff it into the<img> element. This is bad news for performance.
+
+
+So leaving the src attr empty is a no go. I'm not 100% sure if there are issues with removing the src attribute altogher from the img element. I feel like some browsers will add the attribute back which would leave us with an empty src attribute.
+
+I've put a demo together to do some testing which can be found [here](http://codepen.io/bjankord/pen/Bnugh).
+
+If you could use scrN on a element besides img, it would resolve some concerns with polyfilling a srcN solution.
diff --git a/picture.html b/picture.html
@@ -5,7 +5,7 @@
          src="pic-large.jpg"
          alt="Obama talking to a soldier in hospital scrubs.">
 
-// No JS fallback
+// No JS fallback/Markup used to build polyfill
 
 <picture src-1="(max-width: 400px) pic-small.jpg"
          src-2="(max-width: 1000px) pic-medium.jpg"

diff --git a/notes.md b/notes.md
@@ -0,0 +1,4 @@
+Creating a new element named picture that mirrors the img element, minus the src attribute would allow for an easier responsive image element to polyfill.
+
+Will post more thoughts on this, but basically, removing the src attribute from an image creates issues in some browsers.
+Though if you could use scrN on a element besides image, it wouldn't mattter if that element didn't have a src attribute.
diff --git a/picture.html b/picture.html
@@ -0,0 +1,14 @@
+// Default use
+
+<picture src-1="(max-width: 400px) pic-small.jpg"
+         src-2="(max-width: 1000px) pic-medium.jpg"
+         src="pic-large.jpg"
+         alt="Obama talking to a soldier in hospital scrubs.">
+
+// No JS fallback
+
+<picture src-1="(max-width: 400px) pic-small.jpg"
+         src-2="(max-width: 1000px) pic-medium.jpg"
+         src="pic-large.jpg"
+         alt="Obama talking to a soldier in hospital scrubs.">
+<noscript><img src="pic-small.jpg" alt="Obama talking to a soldier in hospital scrubs."></noscript>
No results found