feat: Webp images with fallback

Gemfile

@@ -18,6 +18,7 @@ gem "jekyll", "~> 3.7.2"
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.6"
   gem "jekyll-assets"
+  gem "jekyll-webp"
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -55,6 +55,7 @@ GEM
       sass (~> 3.4)
     jekyll-watch (2.1.2)
       listen (~> 3.0)
+    jekyll-webp (1.0.0)
     kramdown (1.17.0)
     liquid (4.0.3)
     liquid-tag-parser (1.9.0)
@@ -98,7 +99,8 @@ DEPENDENCIES
   jekyll (~> 3.7.2)
   jekyll-assets
   jekyll-feed (~> 0.6)
+  jekyll-webp
   tzinfo-data
 
 BUNDLED WITH
-   1.16.1
+   2.0.1

_config.yml

@@ -46,3 +46,34 @@ exclude:
   - CONTRIBUTING.md
   - LICENSE.md
   - WEBSITE-CODE-OF-CONDUCT.md
+
+############################################################
+# Site configuration for the WebP Generator Plugin
+# The values here represent the defaults if nothing is set
+webp:
+  enabled: true
+
+  # The quality of the webp conversion 0 to 100 (where 100 is least lossy)
+  quality: 75
+
+  # List of directories containing images to optimize, nested directories will not be checked
+  # By default the generator will search for a folder called `/img` under the site root and process all jpg, png and tiff image files found there.
+  img_dir: ["/assets/images"]
+
+  # add ".gif" to the format list to generate webp for animated gifs as well
+  formats: [".jpeg", ".jpg", ".png", ".tiff"]
+
+  # File extensions for animated gif files 
+  gifs: [".gif"]
+
+  # Set to true to always regenerate existing webp files
+  regenerate: false
+
+  # Local path to the WebP utilities to use (relative or absolute)
+  # Omit or leave as nil to use the utilities shipped with the gem, override only to use your local install
+  webp_path: nil
+
+  # List of files or directories to exclude
+  # e.g. custom or hand generated webp conversion files
+  exclude: []
+############################################################

_includes/footer.html

@@ -3,17 +3,23 @@
     <div class="row">
       <div class="col-md-3 text-center">
         <ul class="list-inline">
-          <li><a target="_blank" href="https://www.facebook.com/PyConIndia/">{% asset fb.png alt="Facebook" %}</a></li>
-          <li><a target="_blank" href="https://twitter.com/pyconindia">{% asset tw.png alt="Twitter" %}</a></li>
+          <li><a target="_blank" href="https://www.facebook.com/PyConIndia/">
+            {% picture src=fb alt="Facebook"%}
+          </a></li>
+          <li><a target="_blank" href="https://twitter.com/pyconindia">
+            {% picture src=tw alt="Twitter"%}
+          </a></li>
         </ul>
         <a target="_blank" href="mailto:[email protected]">[email protected]</a>
       </div>
       <div class="col-md-6 text-center">
-        {% asset logo-small.png alt="PyCon India 2019 Logo" width="70%" %}
+          {% picture src=logo-small alt="Twitter" width="70%"%}
       </div>
       <div class="col-md-3 text-center">
         <p class="design-by">Design by</p>
-        <a target="_blank" href="http://webchirpy.com">{% asset wclogo.png alt="Webchirpy Logo" width="40%" %}</a>
+        <a target="_blank" href="http://webchirpy.com">
+          {% picture src=wclogo alt="Webchirpy Logo" width="40%"%}
+        </a>
       </div>
     </div>
   </div>

_plugins/picture.rb

@@ -0,0 +1,28 @@
+module Jekyll
+class RenderTimeTag < Liquid::Tag
+
+    def initialize(tag_name, markup, tokens)
+        super
+        @args = Parser.new(markup)
+    end
+
+    def render(context)
+        attributes = ""
+        @args.each do |key, value|
+            if key == :src
+                attributes.concat("#{key}='./assets/images/#{value}.png'")
+            else
+                attributes.concat("#{key}='#{value}' ");
+            end
+        end
+        tag = "<picture>
+        <source srcset='./assets/images/#{@args[:src]}.webp' type='image/webp'>
+        <img #{attributes}>
+        </picture>
+        "
+        return tag
+    end
+end
+end
+
+Liquid::Template.register_tag('picture', Jekyll::RenderTimeTag)