1.2.1

CHANGELOG.md

@@ -1,16 +1,17 @@
 # CHANGELOG
 
-###head
+###1.2.1
 
 * fixes intrinsic sizes plugin sometimes disconnects MutationObserver
 * improve media attribute order in conjunction with type attribute
 * use lqip pattern also in browsers, which support image abortion (improves speedindex)
 * improve mutation performance for browsers without MuationObserver support
+* be more memory efficient
 
 ###1.2.0
 
 * improved performance for upcoming FF 36+
-* decoupled intrinsic sizing from resource selection (makes [intrinsic size plugin smoother](http://jsfiddle.net/trixta/gs3p14pr/embedded/result/))  
+* decoupled intrinsic sizing from resource selection (makes [intrinsic size plugin smoother](http://jsfiddle.net/trixta/gs3p14pr/embedded/result/))
 * added SEO pattern
 * improved documentation
 * changed config options
@@ -29,7 +30,7 @@
 ###1.1.4
 
 * improved intrinsic sizes plugin
-* improved ``currentSrc`` property and moved it to the [mutation plugin](plugins/mutation). 
+* improved ``currentSrc`` property and moved it to the [mutation plugin](plugins/mutation).
 * refinements to the source selection algorithm. compared to previous version:
 	* smart source selection runs less aggressive on 1x devices (better for quality).
 	* smart source selection runs more aggressive on 2x+ devices (better for performance).

Gruntfile.js

@@ -102,7 +102,7 @@
 		grunt.loadNpmTasks('grunt-max-filesize');
 
 		// Default task.
-		grunt.registerTask("default", [  "uglify", "bytesize", "maxFilesize" ]);
+		grunt.registerTask("default", [ "test", "uglify", "bytesize", "maxFilesize" ]);
 		grunt.registerTask("test", [ "jshint", "qunit" ]);
 	};
 })();

README.md

@@ -16,6 +16,7 @@ In case you want to include **respimage** only if the browser doesn't support re
 function loadJS(u){var r = document.getElementsByTagName( "script" )[ 0 ], s = document.createElement( "script" );s.src = u;r.parentNode.insertBefore( s, r );}
 
 if(!window.HTMLPictureElement){
+	document.createElement('picture');
 	loadJS("respimage.min.js");
 }
 </script>
@@ -41,13 +42,13 @@ For mobile support it is crucial to set the viewport ``meta`` tag to ``device-wi
 
 ```
 $ bower install respimage --save
-``` 
+```
 
 ####Install via npm
 
 ```
 $ npm install respimage --save
-``` 
+```
 
 ##Markup Examples
 Responsive images can be technically differentiated between 2 types.
@@ -164,6 +165,20 @@ In case of any problems include the **respimage.dev.js** into your project and o
 
 ##Plugins
 
+respimage has some really nice extensions/plugins to improve standards support even more. In case you want to use a CDN, you can use the combohandler service provided by jsDelivr:
+
+
+```html
+<script>
+function loadJS(u){var r = document.getElementsByTagName("script")[0], s = document.createElement("script");s.src = u;r.parentNode.insertBefore( s, r );}
+
+if(!window.HTMLPictureElement){
+	document.createElement('picture');
+	loadJS("http://cdn.jsdelivr.net/g/respimage(respimage.min.js+plugins/mutation/ri.mutation.min.js+plugins/intrinsic-dimension/ri.intrinsic.min.js+plugins/typesupport/ri.type.min.js)");
+}
+</script>
+```
+
 ###The [intrinsic sizes / dimensions - Plugin](plugins/intrinsic-dimension)
 The intrinsic dimension plugin extends ``respimage`` to add the intrinsic dimension based on the descriptor (and the sizes attribute) and the density of the source candidate to the width content attribute of the image element.
 
@@ -201,13 +216,9 @@ This technique can be combined with [lazyLoading](https://github.com/aFarkas/laz
 
 ###Omit the ``src``
 
-In case JS disabled legacy browsers are no concern and you can't provide an additional lquip source or you are using client side rendering (No preload parser optimization advantage), use a one pixel ``src`` or better a data URI. In case SEO is an issue, you can add the [ImageObject schema via Microdata](http://schema.org/ImageObject) for search engines:
+In case JS disabled legacy browsers are no concern and you can't provide an additional lquip source or you are using client side rendering (No preload parser optimization advantage), use a one pixel ``src`` or better a data URI.
 
 ```html
-<span  itemscope itemtype="http://schema.org/ImageObject" hidden>
-	<meta itemprop="contentUrl" content="image.jpg" />
-	<meta itemprop="name" content="my image" />
-</span>
 <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 	srcset="image.jpg 1x, image2.jpg 2x"
     alt="my image" />
@@ -224,7 +235,7 @@ In case JS disabled legacy browsers are no concern and you can't provide an addi
 	sizes="(max-width: 1000px) calc(100vw - 20px), 1000px"
 	src="http://placehold.it/1050x450"
 	alt="flexible image" />
-	
+
 <!-- or -->
 
 <img

bower.json

@@ -1,7 +1,7 @@
 {
 	"name": "respimage",
 	"repo": "afarkas/respimage",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"main": "respimage.min.js",
 	"scripts": [
 		"respimage.min.js"
@@ -14,7 +14,7 @@
 		"globals"
 	],
 	"description": "The fast, lightweight and reliable polyfill for responsive images (i.e. picture element and the srcset, sizes and media attributes).",
-	"keywords": ["responsive", "image", "responsive images", "picture", "srcset", "polyfill", "respimg", "respimage", "picturefill"],
+	"keywords": ["responsive", "image", "responsive images", "picture", "srcset", "polyfill", "respimg", "respimage", "picturefill", "performance", "bandwidth"],
 	"ignore": [
 		"**/.*",
 		"node_modules",

cfg/child.html

@@ -89,7 +89,6 @@
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm5.staticflickr.com/4094/4859138371_9713d4396e_m.jpg"
 			data-medium="https://farm5.staticflickr.com/4094/4859138371_9713d4396e_n.jpg"
 			srcset="https://farm5.staticflickr.com/4094/4859138371_9713d4396e_m.jpg 240w,
@@ -108,7 +107,6 @@ <h3>Abandoned Boat</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_m.jpg"
 			data-medium="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_n.jpg"
 			srcset="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_m.jpg 240w,
@@ -129,7 +127,6 @@ <h3>Desert Road</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg"
 			data-medium="https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg"
 			srcset="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,
@@ -148,7 +145,6 @@ <h3></h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg"
 			data-medium="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_c.jpg"
 			srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 240w,
@@ -168,7 +164,6 @@ <h3>@ The Desert Tortoise Natural Area</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg"
 			data-medium="https://farm1.staticflickr.com/113/284651694_69e63b374d_z.jpg"
 			srcset="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg 240w,
@@ -185,7 +180,6 @@ <h3>Woman in water</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg"
 			data-medium="https://farm3.staticflickr.com/2401/2171553538_37d0a133da.jpg"
 			srcset="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg 240w,
@@ -202,7 +196,6 @@ <h3>Borobudur</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm1.staticflickr.com/17/92230866_713ae1eeef_n.jpg"
 			data-medium="https://farm1.staticflickr.com/17/92230866_713ae1eeef.jpg"
 			srcset="https://farm1.staticflickr.com/17/92230866_713ae1eeef_n.jpg 240w,
@@ -220,7 +213,6 @@ <h3>A tree in the blue</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg"
 			data-medium="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_z.jpg"
 			srcset="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg 240w,
@@ -239,7 +231,6 @@ <h3>Windows on Istanbul</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm6.staticflickr.com/5139/5546134597_0b19627066_m.jpg"
 			data-medium="https://farm6.staticflickr.com/5139/5546134597_0b19627066.jpg"
 			srcset="https://farm6.staticflickr.com/5139/5546134597_0b19627066_m.jpg 240w,
@@ -258,7 +249,6 @@ <h3>Goldie Dawn</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg"
 			data-medium="https://farm3.staticflickr.com/2377/1657712955_131576bcd8.jpg"
 			srcset="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg 240w,
@@ -275,7 +265,6 @@ <h3>Sant Miquel del Fai</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg"
 			data-medium="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_n.jpg"
 			srcset="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg 240w,
@@ -293,7 +282,6 @@ <h3>Avebury Stone Circle</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg"
 			data-medium="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg"
 			srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w,
@@ -312,7 +300,6 @@ <h3>el castil de tierra</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm8.staticflickr.com/7356/11122919374_55294abec3_m.jpg"
 			data-medium="https://farm8.staticflickr.com/7356/11122919374_55294abec3_n.jpg"
 			srcset="https://farm8.staticflickr.com/7356/11122919374_55294abec3_m.jpg 240w,
@@ -334,7 +321,6 @@ <h3>sunset</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_m.jpg"
 			data-medium="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_n.jpg"
 			srcset="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_m.jpg 240w,
@@ -356,7 +342,6 @@ <h3>Sky and earth</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_n.jpg"
 			data-medium="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf.jpg"
 			srcset="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_n.jpg 240w,
@@ -375,7 +360,6 @@ <h3>Missing Ulsoor lake (Explore)</h3>
 <div class="thumbnail">
 	<img
 			sizes="49vw"
-			src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 			data-low="https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_n.jpg"
 			data-medium="https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d.jpg"
 			srcset="https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_n.jpg 227w,

component.json

@@ -1,6 +1,6 @@
 {
 	"name": "respimage",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"repo": "afarkas/respimage",
 	"main": "respimage.min.js",
 	"scripts": ["respimage.min.js"],

how-respimg-works.md

@@ -4,11 +4,15 @@ In case you want to know how to use ``respimage``, simply go to the [readme](REA
 ``respimage`` uses several techniques to increase perceived performance or reduce bandwidth:
 
 ##Polyfill vs. graceful degradation / progressive enhancement and "image data trashing"
-Polyfilling responsive images with a fallback ``src`` can lead to a wasted / trashed double request in non-supporting browsers and therefore some polyfills recommend to fully omit the src attribute, which antagonizes the natively and [specified](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element:attr-img-src-2) build-in graceful degradation support in responsive images. As it turns out it's also [not the](http://lists.w3.org/Archives/Public/public-respimage/2014Sep/0028.html) [best thing to do](https://twitter.com/grigs/status/327429827726561280) [performancewise](http://www.stevesouders.com/blog/2013/04/26/i/). As also a big problem for search engine/bot visibility and the general validity of the document.
+Polyfilling responsive images with a fallback ``src`` can lead to a wasted / trashed double request in non-supporting browsers and therefore some polyfills recommend to fully omit the src attribute, which antagonizes the natively and [specified](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element:attr-img-src-2) build-in graceful degradation support in responsive images. As it turns out it's also [not the](http://lists.w3.org/Archives/Public/public-respimage/2014Sep/0028.html) [best thing to do](https://twitter.com/grigs/status/327429827726561280) [performancewise](http://www.stevesouders.com/blog/2013/04/26/i/). As also a problem for search engine/bot visibility and the general validity of the document.
 
-While ``respimage`` also supports omitting the ``src`` attribute, ``respimage`` plays nicely with your progressive enhancement strategy (your valid markup) and does not waste an already started image download.
+While ``respimage`` also supports omitting the ``src`` attribute, ``respimage`` plays nicely with your progressive enhancement strategy (your valid markup) and does not waste an already started image download. respimage automatically adapts to your own ``src`` strategy by implementing various techniques:
 
-``respimage`` instead either aborts loading images (IE and FF 36+) or implements a variation of the [low quality image placeholder pattern](http://www.guypo.com/feo/introducing-lqip-low-quality-image-placeholders/) to increase perceived performance.[^]
+if the initially set image ``src``...
+
+* ... is to heavy and the browser supports image request abortion (all IEs and FF 36+) respimage will abort the request and load a smaller image
+* ... isn't perfect, but still has a good quality respimage won't change the ``src``
+* ... is detected as too fuzzy respimage will not simply change the ``src`` but implements a variation of the [low quality image placeholder pattern (LQIP)](http://www.guypo.com/feo/introducing-lqip-low-quality-image-placeholders/) to increase perceived performance.[^]
 
 As it turns out, the LQIP pattern works so nice, that it could also be used as an enhancement by browser vendors especially in case of a low bandwidth situation and I developed a [lazylaoder, which brings the same perceived performance improvements to supporting browsers](https://github.com/aFarkas/lazysizes).
 
@@ -63,7 +67,7 @@ What ``respimage``'s resource selection is doing is quite simple. It searches fo
 
 Here is a simple [demo](http://codepen.io/aFarkas/full/tplJE/).
 
-The algorithm used for this is based on the following math. 
+The algorithm used for this is based on the following math.
 
 Let's start to include a simple "get the nearest candidate algorithm" and then refine it. We assume a 2x device and two candidates one with a resolution of 1.8x and one with a resolution with 2.6x.
 
@@ -126,4 +130,4 @@ Note: That ``respimage`` does only work in browsers, which do not support the sr
 
 
 
-[^]: The way how LIQP is implemented by ``respimage`` is not the implementation described by [Guypo](http://www.guypo.com/feo/introducing-lqip-low-quality-image-placeholders/) but variation suggested by [Steve Souders](http://www.guypo.com/feo/introducing-lqip-low-quality-image-placeholders/#post-850994943). As a result it can often decrease the duration until the ``onload`` event is triggered, but it will always improve perceived performance dramatically. In case you want to use the LQIP pattern for all browsers, not only Safari and FF35-, we suggest using [lazySizes]().
+[^]: The way how LIQP is implemented by ``respimage`` is not the implementation described by [Guypo](http://www.guypo.com/feo/introducing-lqip-low-quality-image-placeholders/) but variation suggested by [Steve Souders](http://www.guypo.com/feo/introducing-lqip-low-quality-image-placeholders/#post-850994943). As a result it can often decrease the duration until the ``onload`` event is triggered, but it will always improve perceived performance dramatically. In case you want to use the LQIP pattern for all browsers, not only Safari and FF35-, we suggest using [lazySizes]().

package.json

@@ -1,7 +1,8 @@
 {
   "name": "respimage",
-  "version": "1.2.0",
-  "browser": "respimage.js",
+  "version": "1.2.1",
+  "filename": "respimage.min.js",
+  "browser": "respimage.min.js",
   "scripts": {
     "test": "grunt test --verbose"
   },
@@ -36,6 +37,10 @@
     "picture",
     "srcset",
     "polyfill",
-    "picturefill"
+    "respimg",
+    "respimage",
+    "picturefill",
+    "performance",
+    "bandwidth"
   ]
 }

plugins/intrinsic-dimension/README.md

@@ -19,6 +19,7 @@ In case you want to include **respimage** only if the browser doesn't support re
 function loadJS(u){var r = document.getElementsByTagName( "script" )[ 0 ], s = document.createElement( "script" );s.src = u;r.parentNode.insertBefore( s, r );}
 
 if(!window.HTMLPictureElement){
+	document.createElement('picture');
 	loadJS("respimage.min.js");
 	loadJS("plugins/intrinsic-dimension/ri.intrinsic.min.js");
 }
@@ -27,6 +28,19 @@ if(!window.HTMLPictureElement){
 
 Of course it is recommend to combine your scripts.
 
+In case you want to use a CDN you can use the combohandler service by jsDelivr:
+
+```html
+<script>
+function loadJS(u){var r = document.getElementsByTagName( "script" )[ 0 ], s = document.createElement( "script" );s.src = u;r.parentNode.insertBefore( s, r );}
+
+if(!window.HTMLPictureElement){
+	document.createElement('picture');
+	loadJS("http://cdn.jsdelivr.net/g/respimage(respimage.min.js+plugins/intrinsic-dimension/ri.intrinsic.min.js)");
+}
+</script>
+```
+
 Note: To get this fully work in IE8 the ``img`` elements need a ``height: auto``. Simply add the following line to your CSS normalization:
 
 ```html