grunt-responsive-images and retina teaser with srcset

Gruntfile.js

@@ -83,6 +83,32 @@ module.exports = function(grunt){
             }
         },
         
+        responsive_images: {
+            production: {
+                options: {
+                    sizes: [{
+                      name: 'small',
+                      width: 320
+                    },{
+                      name: 'medium',
+                      width: 640
+                    },{
+                      name: 'large',
+                      width: 1280
+                    },{
+                      name: 'jumbo',
+                      width: 2560
+                    }]
+                },
+                files: [{
+                    expand: true,
+                    cwd: '_src/_media',
+                    src: ['**.{jpg,jpeg,gif,png}'],
+                    custom_dest: '_site/media/{%= width %}/'
+                }]
+            }
+        },
+        
         // image optimization
         imagemin: {
             assets: {
@@ -185,10 +211,17 @@ module.exports = function(grunt){
         'watch'
     ]);
     
+    // Images only tasks
+    grunt.registerTask('images', [
+        'responsive_images',
+        'imagemin'
+    ]);
+    
     // Production build
     grunt.registerTask('build', [
         'clean',
         'jekyll',
+        'responsive_images',
         'imagemin',
         'less',
         'cmq',

_src/_plugins/rsync_media_folder.rb

@@ -3,7 +3,7 @@ module Jekyll
     class RsyncMediaFolder < Generator
         def generate(site)
             system('mkdir -p _site'); # We may be called before _site exists.
-            system('rsync --archive --delete _src/_media/ _site/media/');
+            system('rsync --archive _src/_media/ _site/media/');
         end
     end
 end

_src/feed.xml

@@ -32,7 +32,7 @@ layout: nil
     		<id>{{ site.url }}/{{ post.url }}</id>
     		<content type="html">
                 {% if post.image %}
-                    &lt;img src=&quot;{{ site.url }}/media/{{ post.image }}&quot; /&gt;
+                    &lt;img src=&quot;{{ site.url }}/media/640/{{ post.image }}&quot; /&gt;
                 {% endif %}
             
                 {{ post.content | xml_escape }}

_src/index.html

@@ -31,7 +31,9 @@ description: 'Blog of designer & developer Matthias Kretschmann'
             <a class="photoPost" href="{{ post.url }}">
             	<figure class="hmedia">
                     
-            		<img src="/media/{{ post.image }}" />
+            		<img 
+                        src="/media/640/{{ post.image }}"
+                        srcset="/media/1280/{{ post.image }} 2x" />
             		<figcaption class="entry-title fn">{{ post.title }}</figcaption>
             		exif
             	</figure>
@@ -50,7 +52,9 @@ description: 'Blog of designer & developer Matthias Kretschmann'
                 
                 {% if post.image %}
                     <a href="{{ post.url }}">
-                        <img class="teaser" src="/media/{{ post.image }}" />
+                        <img class="teaser" 
+                            src="/media/640/{{ post.image }}"
+                            srcset="/media/1280/{{ post.image }} 2x"> />
                     </a>
                 {% endif %}
                 

package.json

@@ -16,7 +16,8 @@
     "grunt-jekyll": "~0.4.0",
     "grunt-contrib-connect": "~0.5.0",
     "grunt-contrib-clean": "~0.5.0",
-    "grunt-rsync": "~0.2.1"
+    "grunt-rsync": "~0.2.1",
+    "grunt-responsive-images": "0.0.4"
   },
   "repository": {
     "type": "git",