Add webp images for Chrome and Firefox

Gemfile

@@ -14,3 +14,6 @@ gem 'redcarpet', '~> 3.3.2'
 
 # For "summary"-Helper
 gem 'nokogiri', '~> 1.6.6.2'
+
+# Images
+gem 'middleman-webp', '~> 0.3.2'

Gemfile.lock

@@ -94,6 +94,8 @@ GEM
     middleman-syntax (2.0.0)
       middleman-core (~> 3.2)
       rouge (~> 1.0)
+    middleman-webp (0.3.2)
+      middleman-core (>= 3.3.0, < 3.5.0)
     mime-types (2.6.1)
     mini_portile (0.6.2)
     minitest (5.8.0)
@@ -153,8 +155,9 @@ DEPENDENCIES
   middleman-deploy (~> 1.0)
   middleman-livereload (~> 3.4.3)
   middleman-syntax (~> 2.0.0)
+  middleman-webp (~> 0.3.2)
   nokogiri (~> 1.6.6.2)
   redcarpet (~> 3.3.2)
 
 BUNDLED WITH
-   1.10.6
+   1.14.3

config.rb

@@ -210,6 +210,14 @@ set :haml, {
   escape_attrs: :once
 }
 
+activate :webp do |webp|
+  webp.conversion_options = {
+    'images/**/*.{png,gif}' => {lossless: true},
+    'images/**/*.{jpg,jpeg}' => {q: 100}
+  }
+  webp.append_extension = true
+end
+
 set :css_dir, 'stylesheets'
 set :js_dir, 'javascripts'
 set :images_dir, 'images'

source/.htaccess.erb

@@ -30,8 +30,8 @@ ExpiresDefault "access plus 1 year"
 </FilesMatch>
 
 # Unset the Vary: Host header inserted by global Uberspace config
-# Append Vary: Accept-Encoding due to optionsl gziped content
-Header set Vary Accept-Encoding
+# Append Vary: Accept due to optional gziped content
+Header set Vary Accept
 
 # Add security related headers
 Header set X-Frame-Options "DENY"
@@ -58,3 +58,10 @@ RewriteRule ^favicon.ico$ /images/favicon.ico
 RewriteCond %{HTTP:Accept-Encoding} \b(x-)?gzip\b
 RewriteCond %{REQUEST_FILENAME}\.gz -s
 RewriteRule ^(.+) /$1\.gz [QSA]
+
+# Check if browser support WebP images
+RewriteCond %{HTTP:Accept} image/webp
+RewriteCond %{REQUEST_FILENAME}\.webp -s
+RewriteRule ^(.+) /$1\.webp [QSA]
+
+AddType image/webp .webp