better use picturefill

Gruntfile.js

@@ -77,7 +77,8 @@ module.exports = function(grunt){
                 },
                 files: {
                     '<%= config.site %>/<%= config.assets.js %>/kremalicious3.min.js': [
-                        '<%= config.src %>/<%= config.assets.js %>/script.js'
+                        '<%= config.src %>/<%= config.assets.js %>/picturefill.js',
+                        '<%= config.src %>/<%= config.assets.js %>/app.js'
                     ]
                 }
             }
@@ -207,7 +208,7 @@ module.exports = function(grunt){
         'less',
         'cmq',
         'cssmin',
-        //'uglify',
+        'uglify',
         'connect',
         'watch'
     ]);

_src/_includes/head.html

@@ -33,6 +33,8 @@
 	<script data-cfasync="false" src="//use.typekit.com/msu4qap.js"></script>
 	<script data-cfasync="false">try{Typekit.load();}catch(e){}</script>
     
+    <script src="/assets/js/kremalicious3.min.js"></script>
+    
     <!-- Twitter Cards -->
     <meta name="twitter:card" content="summary">
     <meta name="twitter:site" content="@kremaliciouscom">

_src/assets/js/picturefill.js

@@ -0,0 +1,67 @@
+/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
+
+(function( w ){
+
+	// Enable strict mode
+	"use strict";
+
+	w.picturefill = function() {
+		var ps = w.document.getElementsByTagName( "span" );
+
+		// Loop the pictures
+		for( var i = 0, il = ps.length; i < il; i++ ){
+			if( ps[ i ].getAttribute( "data-picture" ) !== null ){
+
+				var sources = ps[ i ].getElementsByTagName( "span" ),
+					matches = [];
+
+				// See if which sources match
+				for( var j = 0, jl = sources.length; j < jl; j++ ){
+					var media = sources[ j ].getAttribute( "data-media" );
+					// if there's no media specified, OR w.matchMedia is supported 
+					if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
+						matches.push( sources[ j ] );
+					}
+				}
+
+			// Find any existing img element in the picture element
+			var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
+
+			if( matches.length ){
+				var matchedEl = matches.pop();
+				if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){
+					picImg = w.document.createElement( "img" );
+					picImg.alt = ps[ i ].getAttribute( "data-alt" );
+				}
+				else if( matchedEl === picImg.parentNode ){
+					// Skip further actions if the correct image is already in place
+					continue;
+				}
+
+				picImg.src =  matchedEl.getAttribute( "data-src" );
+				matchedEl.appendChild( picImg );
+				picImg.removeAttribute("width");
+				picImg.removeAttribute("height");
+			}
+			else if( picImg ){
+				picImg.parentNode.removeChild( picImg );
+			}
+		}
+		}
+	};
+
+	// Run on resize and domready (w.load as a fallback)
+	if( w.addEventListener ){
+		w.addEventListener( "resize", w.picturefill, false );
+		w.addEventListener( "DOMContentLoaded", function(){
+			w.picturefill();
+			// Run once only
+			w.removeEventListener( "load", w.picturefill, false );
+		}, false );
+		w.addEventListener( "load", w.picturefill, false );
+	}
+	else if( w.attachEvent ){
+		w.attachEvent( "onload", w.picturefill );
+	}
+
+}( this ));

_src/assets/less/media.less

@@ -31,7 +31,8 @@ a.linkedImage img {
 	border-color: @link-color-hover;
 }
 
-.teaser {
+.teaser,
+.teaser img {
     margin-top: @line-height-computed*1.5;
     margin-bottom: @line-height-computed*1.5;
 }

_src/index.html

@@ -31,9 +31,17 @@ description: 'Blog of designer & developer Matthias Kretschmann'
             <a class="photoPost" href="{{ post.url }}">
             	<figure class="hmedia">
                     
-            		<img 
+                    <span data-picture data-alt="">
-                        src="/media/640/{{ post.image }}"
+                        <span data-src="/media/320/{{ post.image }}"></span>
-                        srcset="/media/1280/{{ post.image }} 2x" />
+                        <span data-src="/media/640/{{ post.image }}"   data-media="(min-device-pixel-ratio: 1.5)"></span>
+                        <span data-src="/media/640/{{ post.image }}"   data-media="(min-width: 500px)"></span>
+                        <span data-src="/media/1280/{{ post.image }}"  data-media="(min-width: 640px) and (min-device-pixel-ratio: 2.0)"></span>
+
+                        <noscript>
+                            <img src="small.jpg">
+                        </noscript>
+                    </span>
+                    
             		<figcaption class="entry-title fn">{{ post.title }}</figcaption>
             		exif
             	</figure>
@@ -52,9 +60,16 @@ description: 'Blog of designer & developer Matthias Kretschmann'
                 
                 {% if post.image %}
                     <a href="{{ post.url }}">
-                        <img class="teaser" 
+                        <span class="teaser" data-picture data-alt="">
-                            src="/media/640/{{ post.image }}"
+                            <span data-src="/media/320/{{ post.image }}"></span>
-                            srcset="/media/1280/{{ post.image }} 2x" />
+                            <span data-src="/media/640/{{ post.image }}"   data-media="(min-device-pixel-ratio: 1.5)"></span>
+                            <span data-src="/media/640/{{ post.image }}"   data-media="(min-width: 500px)"></span>
+                            <span data-src="/media/1280/{{ post.image }}"  data-media="(min-width: 640px) and (min-device-pixel-ratio: 2.0)"></span>
+
+                            <noscript>
+                                <img src="small.jpg">
+                            </noscript>
+                        </span>
                     </a>
                 {% endif %}