picturefill, imagemin refinements

Gruntfile.js

@@ -122,6 +122,16 @@ module.exports = function(grunt){
                     }
                 ]
             },
+            media: {
+                files: [
+                    {
+                        expand: true,
+                        cwd: '<%= config.site %>/media/',
+                        src: ['**/*.{png,jpg,jpeg,gif}'],
+                        dest: '<%= config.site %>/media/'
+                    }
+                ]
+            },
             touchicons: {
                 files: [
                     {
@@ -166,7 +176,7 @@ module.exports = function(grunt){
                     '<%= config.src %>/_layouts/**',
                     '<%= config.src %>/_posts/**'
                 ],
-                tasks: ['jekyll', 'less']
+                tasks: ['jekyll', 'less', 'uglify']
             },
         },
         
@@ -219,6 +229,11 @@ module.exports = function(grunt){
         'imagemin'
     ]);
     
+    // Imagemin only task
+    grunt.registerTask('imagemin', [
+        'imagemin'
+    ]);
+    
     // Production build
     grunt.registerTask('build', [
         'clean',

_src/_includes/head.html

@@ -22,7 +22,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<meta name="HandheldFriendly" content="True">
 	<meta name="MobileOptimized" content="320">
-    <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="cleartype" content="on">
     
     <link rel="stylesheet" href="/assets/css/kremalicious3.min.css">
@@ -33,7 +33,7 @@
 	<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>
+    <script src="/assets/js/kremalicious3.min.js" defer async></script>
     
     <!-- Twitter Cards -->
     <meta name="twitter:card" content="summary">

_src/_layouts/image.html

@@ -6,8 +6,18 @@ layout: base
     
     <div class="photoPost">
     	<figure class="hmedia">
-        
+            
-    		<img src="/media/{{ page.image }}" />
+            <span data-picture data-alt="{{ page.title }}">
+                <span data-src="/media/320/{{ page.image }}"></span>
+                <span data-src="/media/640/{{ page.image }}"   data-media="(min-device-pixel-ratio: 1.5)"></span>
+                <span data-src="/media/640/{{ page.image }}"   data-media="(min-width: 500px)"></span>
+                <span data-src="/media/1280/{{ page.image }}"  data-media="(min-width: 640px) and (min-device-pixel-ratio: 2.0)"></span>
+
+                <noscript>
+                    <img src="/media/{{ page.image }}">
+                </noscript>
+            </span>
+            
             <figcaption class="entry-title fn">{{ page.title }}</figcaption>
     		exif
     	</figure>

_src/_layouts/post.html

@@ -9,7 +9,16 @@ layout: base
 
     <section class="entry-content">
         {% if page.image %}
-            <img class="teaser" src="/media/{{ page.image }}" />
+            <span class="teaser" data-picture data-alt="">
+                <span data-src="/media/320/{{ post.image }}"></span>
+                <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="/media/{{ post.image }}">
+                </noscript>
+            </span>
         {% endif %}
         
         {{ content }}

_src/_posts/2011-12-15-badged.markdown

@@ -2,7 +2,7 @@
 layout: post
 
 title: Badged - iOS Style Notification Badges for WordPress
-image: Badged-Teaser-kremalicious.png
+image: Badged-Teaser-kremalicious@2x.png
 author: Matthias Kretschmann
 moddate: 2013-11-10 07:56:46+00:00
 

_src/index.html

@@ -38,7 +38,7 @@ description: 'Blog of designer & developer Matthias Kretschmann'
                         <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">
+                            <img src="/media/{{ post.image }}">
                         </noscript>
                     </span>
                     
@@ -67,7 +67,7 @@ description: 'Blog of designer & developer Matthias Kretschmann'
                             <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">
+                                <img src="/media/{{ post.image }}">
                             </noscript>
                         </span>
                     </a>