     .pipe(image_min(options))
     .pipe(gulp.dest('./'))
 
+# =================================================================                      
+# lazyload & webp tasks
+# ================================================================= 
+
+gulp.task 'img:make:previews', ->
+  options = {
+    resize: [20,20],
+    quality: 85,
+    progressive: true,
+    compressionLevel: 6,
+    sequentialRead: true,
+    trellisQuantisation: false
+  }
+
+  return gulp.src('build/media/images/**/*.{jpg,png}',{base: './'})
+    .pipe(plumber())
+    .pipe(image_min(options))
+    .pipe rename
+      suffix: '_preview'
+    .pipe(gulp.dest('./'))
+
+gulp.task 'webp:make', ->
+  return gulp.src('contents/media/images/**/*.{jpg,png}',{base: './'})
+    .pipe plumber()
+    .pipe size()
+    .pipe webp
+      quality: 80
+    .pipe size()
+    .pipe gulp.dest('./')
 
 # =================================================================                      
 # site compile tasks

clean = require "gulp-clean"
rev = require 'gulp-rev'
rev_replace = require 'gulp-rev-replace'

# =================================================================                      
# high level tasks


gulp.task "preview", (cb)->
  return runSequence  ['build:clean', 'js:clean'],
                      ['css:build','js:build','img:make:previews'],
                      'build_wintersmith',
                      'css:clean',
                      cb
