0.9.3

README.md

@@ -15,7 +15,7 @@ Responsive images can be technically differentiated between 2 types.
 * ``srcset`` with source descriptors (let the browser choose the right image based on screen size/resolution, bandwidth…):
 	* density descriptor (``x``) (for static image sizes, Retina vs. normal resolution)
 	* width descriptor (``w``) and the corresponding ``sizes`` attribute (for flexible, responsive / adaptive images)
-* and the ``picture`` element with its ``source[media]`` children (gives the author control about what ``srcset` `should be chosen by the browser depending on specific media queries)
+* and the ``picture`` element with its ``source[media]`` children (gives the author control about what ``srcset`` should be chosen by the browser depending on specific media queries)
 
 
 ###``srcset`` with the density ``x`` descriptor
@@ -133,14 +133,13 @@ The perfselection plugin hooks into the smart selection algorithm to provide mor
 ##Known issues/caveats
 * Browsers without picture and srcset support and disabled JS will either show the image specified with the ``src`` attribute or - if omitted - show only the ``alt`` text
 * **respimage** is quite good at detecting not to download a source candidate, because an image with a good resolution was already downloaded. If a fallback src with a lower resolution or another art direction set is used, **respimage** however will start to download the better candidate, after the browser might have already started to download the worse fallback candidate. Possible solutions/workarounds: 
-    * omit the ``src`` attribute, 
-    * add the attribute ``data-no-ri`` to the images, which shouldn't be polyfilled,
+    * omit the ``src`` attribute,
     * use a [lazyLoading](https://github.com/aFarkas/lazysizes) script (what you should do, if you are a performance aware developer anyway) or
     * simply live with it. (recommended, because **respimage** does not simply switch the image src, but implements the [low quality image placeholder (LQIP)](how-respimg-works.md) technique
 * Media queries support in old IEs (IE8/IE9) are limited to ``min-width`` and ``max-width``. For IE9 it is possible to extend support by including a [``matchMedia`` polyfill](https://github.com/paulirish/matchMedia.js).
 
 ##Responsive images and lazy loading
-Beside the fact, that lazy loading improves performance, there is an interesting side effect. Due to delayed image loading the sizes attribute can be dynamically calculated with JS and makes integrating responsive images therefore easy.
+Beside the fact, that lazy loading improves performance, there is an interesting side effect. Due to delayed image loading the sizes attribute can be dynamically calculated with JS and makes integrating responsive images in any environment therefore easy. We recommend [lazysizes](https://github.com/aFarkas/lazysizes).
 
 ##Authors
 * Authors of the original work: Scott Jehl, Mat Marquis, Shawn Jansepar (2.0 refactor lead)

bower.json

@@ -1,7 +1,7 @@
 {
 	"name": "respimage",
 	"repo": "afarkas/respimage",
-	"version": "0.9.3-RC1",
+	"version": "0.9.3",
 	"main": "respimage.min.js",
 	"scripts": [
 		"respimage.min.js"

component.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "respimage",
-  "version": "0.9.3-RC1",
+  "version": "0.9.3",
   "engines": {
     "node": ">= 0.8.0"
   },

plugins/perfselection/README.md

@@ -3,17 +3,17 @@
 While the normal smart selection algorithm does a great job in balancing performance vs. image quality the performance selection plugins hooks into the smart selection algorithm to greed for more performance on biased opinions.
 
 ##``respimage.config( "constrainDPI", true )``
-The ``"constrainDPI"`` option defaults to true. It is based on the biased opinion, that usually a normal image on a 2x retina device also looks good enough, if it is served with 1.6x quality. The plugin won't greed for more performance, if it assumes that a .gif, .png or .svg is used. Here is a demo: [normal smart selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html) and [constrainDPI selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html?perfselection). (In case you have only a 1x device, you wont see any differences).
+The ``"constrainDPI"`` option defaults to true. It is based on the [biased opinion](http://www.quirksmode.org/blog/archives/2012/03/the_ipad_3_and.html), that usually a normal image on a 2x retina device also looks good enough, if it is served with 1.5x quality. The plugin won't greed for more performance, if it assumes that a .gif, .png or .svg is used. Here is a demo: [normal smart selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html) and [constrainDPI selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html?perfselection). (In case you have only a 1x device, you wont see any differences).
 
 ##``respimage.config( "lowbandwidth", true )``
 The ``"lowbandwidth"`` option defaults to false. In case a developer knows or assumes that he visitor has a lowbandwidth, he can turn this option on.
 
 ```js
 respimage.config( "lowbandwidth", true );
-````
+```
 
-Note this wont turn on a feature detection. It will simply change the smart algorithm to search for lower resolution candidates. It is designed to be used in conjunction with the ``constrainDPI`` option.
-Here is a demo: [normal smart selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html) and [constrainDPI selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html?lowbandwidth).
+Note this won't turn on a feature detection. It will simply change the smart selection algorithm to search for lower resolution candidates. It is designed to be used in conjunction with the ``constrainDPI`` option.
+Here is a demo: [normal smart selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html) and [lowbandwidth selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html?lowbandwidth).
 
 ##Download and embed
 Simply download the ``ri.perfselection.min.js`` and include it after the respimage script:

plugins/perfselection/ri.perfselection.js

@@ -23,10 +23,10 @@
 	var cfg = ri.cfg;
 	var extraCfgs = {
 		lowbandwidth: {
-			greed: 1.6,
+			greed: 2,
 			tHigh: 0.6,
 			tLow: 1.1,
-			xQuant: ri.DPR > 1 ? 0.85 : 0.95,
+			xQuant: ri.DPR > 1 ? 0.8 : 0.93,
 			tLazy: 2
 		}
 	};
@@ -66,18 +66,18 @@
 			};
 			extraCfgs.constrainDPI =  {
 				tHigh: 0.9,
-				xQuant: 0.97,
-				greed: 1.1
+				xQuant: 0.95,
+				greed: 1.5
 			};
 
 
 			ri.getX = function(candidates){
 				var set = candidates[0].set;
 				var ret = ri.DPR * cfg.xQuant;
 				if (cfg.constrainDPI && !isSharpType(set)) {
-					ret *= 0.87;
-					if ( ret > 1.6 ) {
-						ret = 1.6;
+					ret *= 0.85;
+					if ( ret > 1.5 ) {
+						ret = 1.5;
 					}
 				}
 				return ret;

respimage.dev.js

@@ -57,8 +57,6 @@
 		tHigh: 0.5,
 		tLazy: 0.1,
 		greed: 0.4
-		//useGD: if set to true: always prefer gracefully degradation over polyfill
-		//,useGD: false
 	};
 	var srcAttr = "data-risrc";
 	var srcsetAttr = srcAttr + "set";
@@ -859,12 +857,6 @@
 			}
 		}
 
-		if ( imageData.src && ( (cfg.useGD && element.getAttribute("data-ri") == null) || element.getAttribute("data-no-ri") != null ) ) {
-			imageData.supported = true;
-			imageData.parsed = true;
-			return;
-		}
-
 		if ( imageData.srcset === undefined ) {
 			srcsetAttribute = getImgAttr.call( element, "srcset" );
 			imageData.srcset = srcsetAttribute;

respimage.js

@@ -1,4 +1,4 @@
-/*! respimage - v0.9.3-RC1 - 2014-10-12
+/*! respimage - v0.9.3 - 2014-10-12
  Licensed MIT */
 !function(window, document, undefined) {
     "use strict";
@@ -253,10 +253,9 @@
     var alwaysCheckWDescriptor = ri.supSrcset && !ri.supSizes;
     ri.parseSets = function(element, parent) {
         var srcsetAttribute, fallbackCandidate, isWDescripor, srcsetParsed, hasPicture = "PICTURE" == parent.nodeName.toUpperCase(), imageData = element[ri.ns];
-        return imageData.src === undefined && (imageData.src = getImgAttr.call(element, "src"), 
+        imageData.src === undefined && (imageData.src = getImgAttr.call(element, "src"), 
         imageData.src ? setImgAttr.call(element, srcAttr, imageData.src) : removeImgAttr.call(element, srcAttr)), 
-        imageData.src && (cfg.useGD && null == element.getAttribute("data-ri") || null != element.getAttribute("data-no-ri")) ? (imageData.supported = !0, 
-        void (imageData.parsed = !0)) : (imageData.srcset === undefined && (srcsetAttribute = getImgAttr.call(element, "srcset"), 
+        imageData.srcset === undefined && (srcsetAttribute = getImgAttr.call(element, "srcset"), 
         imageData.srcset = srcsetAttribute, srcsetParsed = !0), imageData.dims === undefined && (imageData.dims = getImgAttr.call(element, "height") && getImgAttr.call(element, "width")), 
         imageData.sets = [], hasPicture && (imageData.pic = !0, getAllSourceElements(parent, imageData.sets)), 
         imageData.srcset ? (fallbackCandidate = {
@@ -269,7 +268,7 @@
             sizes: null
         }), imageData.curCan = null, imageData.supported = !(hasPicture || fallbackCandidate && !ri.supSrcset || isWDescripor), 
         srcsetParsed && ri.supSrcset && !imageData.supported && (srcsetAttribute ? (setImgAttr.call(element, srcsetAttr, srcsetAttribute), 
-        element.srcset = "") : removeImgAttr.call(element, srcsetAttr)), void (imageData.parsed = !0));
+        element.srcset = "") : removeImgAttr.call(element, srcsetAttr)), imageData.parsed = !0;
     };
     var reevaluateAfterLoad = function() {
         var onload = function() {