0.5.1

Author: aFarkas

README.md

@@ -92,7 +92,7 @@ The LQIP pattern (low quality image placeholder): Simply add a low quality image
 <img src="lqip-src.jpg" data-src="image.jpg" class="lazyload" />
 ```
 
-The LQIP pattern has the following advantages: The lqip-src is not hidden from the preload parser and loads very fast, which leads to an extreme fast first impression and in case of legacy browsers/devices or searchengines (bots) as a good enough fallback (IE8 and Android 2 devices as also JS disabled). In case your lqip source is extreme fuzzy, you should consider serving either a higher quality, setting ``preloadAfterLoad`` to ``true`` or use the "noscript" pattern. The human eye/brain dislikes too heavy image quality jumps...
+The LQIP pattern has the following advantages: The lqip-src is not hidden from the preload parser and loads very fast, which leads to an extreme fast first impression and in case of legacy browsers/devices or searchengines (bots) as a good enough fallback (IE8 and Android 2 devices as also JS disabled). In case your lqip source is extreme fuzzy, you should consider serving either a higher quality, setting ``preloadAfterLoad`` to ``true`` or use the "noscript" or the "SEO" pattern. The human eye/brain dislikes too heavy image quality jumps...
 
 ###The noscript pattern
 In case you want to save more initial image data the LQIP pattern can't be used (an extreme fuzzy image does neither work as a good enough first impression nor as a fallback) or in case you can't even generate a LQIP src, but the image is important you can use the noscript pattern, which uses a 1x1 pixel grey image combined with a noscript tag:
@@ -129,7 +129,7 @@ In case you don't need to account for JS off or legacy browers, but still for se
 	<meta itemprop="contentUrl" content="image.jpg" />
 	<meta itemprop="name" content="my image" />
 </span>
-<img src="data:image/gif;base64,R0lGODlhAQABAAAAADs="
+<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
 	class="lazyload"
 	data-srcset="image.jpg 1x, image2.jpg 2x"
     alt="my image" />

bower.json

@@ -1,7 +1,7 @@
 {
 	"name": "lazysizes",
 	"repo": "afarkas/lazysizes",
-	"version": "0.5.0",
+	"version": "0.5.1",
 	"main": "lazysizes.min.js",
 	"scripts": [
 		"lazysizes.min.js"

component.json

@@ -1,6 +1,6 @@
 {
 	"name": "lazysizes",
-	"version": "0.5.0",
+	"version": "0.5.1",
 	"repo": "afarkas/lazysizes",
 	"main": "lazysizes.min.js",
 	"scripts": ["lazysizes.min.js"],

lazysizes.min.js

@@ -1,6 +1,6 @@
 {
   "name": "lazysizes",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "author": "Alexander Farkas <[email protected]>",
   "repository": {
     "type": "git",

package.json

@@ -78,26 +78,36 @@
 	}
 
 	function takeHighRes(beforeCan, curCanWidth, width){
-		var low, high;
+		var low, high, curRes;
 		if(!beforeCan || !beforeCan.w){
 			return true;
 		}
+		curRes = beforeCan.w / width;
 		low = (1 - (beforeCan.w / width)) * 0.9;
 		high = (curCanWidth / width) - 1;
+
+		high *= Math.pow(curRes, 1.3);
+
 		return high - low < 0;
 	}
 
 	function getConstrainedSrcSet(data, width){
-		var i, can;
+		var i, can, take;
 
 		for(i = data.index + 1; i < data.cands.length; i++){
 			can = data.cands[i];
-			if(!can.w || can.w <= width || takeHighRes(data.cands[i - 1], can.w, width)){
-				data.cSrcset.push(can.url +' '+ can.w + 'w');
-				data.index = i;
+			take = false;
+			if(!can.w && can.x){
+				take = 'x';
+			} else if(can.w <= width || takeHighRes(data.cands[i - 1], can.w, width)){
+				take = 'w';
 			} else {
 				break;
 			}
+			if(take){
+				data.cSrcset.push(can.url +' '+ can[take] + take);
+				data.index = i;
+			}
 		}
 	}