update webp mixin and all images to webp

templates/blog.jade

@@ -37,6 +37,8 @@ block main
 
     div.Site-content-container
 
+      include includes/blog_webp
+
       div.Grid.Grid--1of2.Grid--gutters-lg
         each article, i in articles.slice(1)
 
@@ -55,7 +57,8 @@ block main
               else
                 a(href=article.url)
                   div.Feature-image--blog-archive--wrapper.Grid--center.Grid--justifyCenter.Grid-cell--fillHeight
-                    div(src=img_src style="background-image: url('"+img_src+"');").Background-img--blog-archive.Background-img-contain
+                    +picture(img_src)
+                    //- div(src=img_src style="background-image: url('"+img_src+"');").Background-img--blog-archive.Background-img-contain
 
               a(href=article.url)
                 h2.Blog-article-title= article.title

templates/home.jade

@@ -23,6 +23,7 @@ block main
         h1.Background-img-caption Open source eye tracking.
         //- h2.Background-img--caption-h2 
 
+    include includes/imgSize
     //- pupil intro row
     div(id="content-top" class="Site-content-container")
       div.Feature-container-column
@@ -39,8 +40,7 @@ block main
                 p All hardware is designed, developed, and assembled in our Berlin office and ships worldwide. Check out products on our #[a(href="/store" title="Pupil Labs store") store]. 
               div.Grid-cell
                 figure.Feature-figure.u-padBottom--1
-                  img(class="Feature-image" src="media/images/home/platform/eye_debug_01_opaque.png" title="Binocular 3D gaze mapper" alt="Binocular 3D gaze mapper")
-
+                  +picture("/media/images/home/platform/eye_debug_01_opaque.png", "Binocular 3D gaze mapper", "Binocular 3D gaze mapper")
 
     //- oss motivation row
     div.Site-gray-bkg

templates/includes/imgSize.jade

@@ -10,4 +10,4 @@ mixin picture(path, title, alt)
     source(srcset="#{path_nosuffix}.png" type="image/png")
     source(srcset="#{path_nosuffix}.jpg" type="image/jpeg")
     img(src="#{path_nosuffix}.webp").img-small
-    img(data-src="#{path_nosuffix}.webp" title="#{title}" alt="#{alt}").img-large.lazyload
+    img(data-src="#{path_nosuffix}.webp" title="#{title}" alt="#{alt}").img-large-webp.lazyload

templates/pupil.jade

@@ -163,7 +163,8 @@ block main
             div.Feature.u-padTop--2
               h4 Navigate to the #[a(href='/store#pupil' title='Pupil Store - pupil configurator') store] to check all configurations,  technical specs, and download sample videos.
 
-
+
+      include includes/imgSize
     //- open source
     div.Site-gray-bkg
       div.Site-content-container
@@ -180,8 +181,7 @@ block main
           div.Grid-cell
             div.Feature
               figure.Feature-figure
-                img(class="Feature-image" src="../media/images/pupil_page/web/pupil_source_code.png" title="Pupil Plugin screenshot" alt="Pupil Plugin screenshot")
-
+                +picture("/media/images/pupil_page/web/pupil_source_code.png", "Pupil Plugin screenshot" , "Pupil Plugin screenshot")
 
     //- design
     div.Site-content-container
@@ -197,8 +197,7 @@ block main
           div.Grid-cell
             div.Feature
               figure.Feature-figure
-                img(class="Feature-image" src="../media/images/pupil_page/web/frame_flex.jpg" title="Pupil Headset" alt="Pupil Headset")
-
+                +picture("/media/images/pupil_page/web/frame_flex.jpg", "Pupil Headset" , "Pupil Headset")
 
     //- Modular & Hackable
     div.Site-gray-bkg    
@@ -210,7 +209,8 @@ block main
             div.Feature
               figure.Feature-figure
                 figure.Feature-figure
-                img(class="Feature-image" src="../media/images/pupil_page/web/dev_explo_transp.png" title="DIY Pupil Headset" alt="DIY Pupil Headset")
+                  +picture("/media/images/pupil_page/web/dev_explo_transp.png", "DIY Pupil Headset" , "DIY Pupil Headset")
+
           div.Grid-cell
             div.Feature
               h1 Modular & Hackable

templates/vr-ar.jade

@@ -7,6 +7,7 @@ block page_scripts
   script(src=contents.js['bkg_video.js'].url)
 
 block main
+
   div(id="VR-AR" class="Site-transform")
 
     div(id="Oculus-addon-cup-video-container").Background-img-top.Background-video-container 
@@ -40,6 +41,7 @@ block main
               p You can use the VR or AR hardware you already own, and augment it with our tool-free, drop-in eye tracking hardware. 
               p You can use our software platform, or roll your own. With our open source software and direct access to the raw eye video feeds you are never locked into a platform.
 
+    include includes/imgSize
     //- additional products
     section.Site-content-container
       div.Feature-container-column
@@ -52,46 +54,40 @@ block main
               div.Grid-cell
                 div.Feature
                 figure.Feature-figure
-                  picture(class="ratio-box lazy-img")
-                    source(srcset="../media/images/store_vr_ar/htcviveb.webp" type="image/webp")
-                    source(srcset="../media/images/store_vr_ar/htcviveb.png" type="image/png")
-                    img(class="img-small" src="../media/images/store_vr_ar/htcviveb.webp")
-                    img(class="img-large lazyload" data-src="../media/images/store_vr_ar/htcviveb.webp" title="HTC Vive Binocular Add-on" alt="HTC Vive Binocular Add-on")
+                  +picture("/media/images/store_vr_ar/htcviveb.png", 
+                  "HTC Vive Binocular Add-on", 
+                  "HTC Vive Binocular Add-on")
                   p #[a(href="/store#vr-ar" title="Pupil Labs Store HTC Vive Binocular Add-on") HTC Vive Binocular Add-on]
               div.Grid-cell
                 div.Feature
                 figure.Feature-figure
-                  picture(class="ratio-box lazy-img")
-                    source(srcset="../media/images/store_vr_ar/addon_hololens.webp" type="image/webp")
-                    source(srcset="../media/images/store_vr_ar/addon_hololens.jpg" type="image/jpeg")
-                    img(class="img-small" src="../media/images/store_vr_ar/addon_hololens.webp")
-                    img(class="img-large lazyload" data-src="../media/images/store_vr_ar/addon_hololens.webp" title="Microsoft Hololens Add-on" alt="Microsoft Hololens Binocular Add-on")
+                  +picture("/media/images/store_vr_ar/addon_hololens.jpg", 
+                  "Microsoft Hololens Binocular Add-on", 
+                  "Microsoft Hololens Binocular Add-on")
                   p #[a(href="/store#vr-ar" title="Pupil Labs Store Microsoft Hololens Binocular Add-on") Microsoft Hololens Binocular Add-on]
           div.Grid-cell.Grid-cell--full.u-textCenter
             div.Grid.Grid--gutters.Grid--1of2.Grid--bottom        
               div.Grid-cell
                 div.Feature
                 figure.Feature-figure
-                  picture(class="ratio-box lazy-img")
-                    source(srcset="../media/images/store_vr_ar/addon_epson_bt300b.webp" type="image/webp")
-                    source(srcset="../media/images/store_vr_ar/addon_epson_bt300b.jpg" type="image/jpeg")
-                    img(class="Feature-image img-small" src="../media/images/store_vr_ar/addon_epson_bt300b.jpg")
-                    img(class="Feature-image img-large lazyload" data-src="../media/images/store_vr_ar/addon_epson_bt300b.jpg" title="Epson BT-300 Add-on" alt="Epson BT-300 Add-on")
+                  +picture("/media/images/store_vr_ar/addon_epson_bt300b.jpg", 
+                  "Epson BT-300 Add-on", 
+                  "Epson BT-300 Add-on")
                   p #[a(href="/store#vr-ar" title="Pupil Labs Store Epson BT-300 add-on") Epson BT-300 Add-on]
               div.Grid-cell
                 div.Feature
                 figure.Feature-figure
-                  picture(class="ratio-box lazy-img")
-                    source(srcset="../media/images/store_vr_ar/oculusdk2m.webp" type="image/webp")
-                    source(srcset="../media/images/store_vr_ar/oculusdk2m.png" type="image/png")
-                    img(class="img-small" src="../media/images/store_vr_ar/oculusdk2m.png")
-                    img(class="img-large lazyload" data-src="../media/images/store_vr_ar/oculusdk2m.png" title="Oculus Rift DK2 Binocular Add-on" alt="Oculus Rift DK2 Binocular Add-on")
+                  +picture("/media/images/store_vr_ar/oculusdk2m.png", 
+                  "Oculus Rift DK2 Binocular Add-on", 
+                  "Oculus Rift DK2 Binocular Add-on")
                   p #[a(href="/store#vr-ar" title="Oculus Rift DK2 Binocular Add-on") Oculus Rift DK2 Binocular Add-on]
           div.Grid-cell.Grid-cell--full.u-padTop--2
             p Our add-ons give your AR/VR Headset eye tracking superpowers. Eye videos are transferred to your host via USB 2.0. 
             p The hardware is easily attached and removed. Eye cameras can run up to 120hz and have a latency of 5.7ms. Fast enough for interaction applications and detection of saccades and quick fixations.
 
 
+
+
     //- software
     section.Site-gray-bkg
       div.Site-content-container