diff --git a/templates/blog.jade b/templates/blog.jade index ade549f7..4b2e7f7b 100644 --- a/templates/blog.jade +++ b/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 diff --git a/templates/home.jade b/templates/home.jade index 1ecf688f..e55faa82 100644 --- a/templates/home.jade +++ b/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 diff --git a/templates/includes/imgSize.jade b/templates/includes/imgSize.jade index 958c8a9f..caec8238 100644 --- a/templates/includes/imgSize.jade +++ b/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 diff --git a/templates/pupil.jade b/templates/pupil.jade index 1a9fc553..e83b5e7f 100644 --- a/templates/pupil.jade +++ b/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 diff --git a/templates/vr-ar.jade b/templates/vr-ar.jade index 5a055c18..3067b470 100644 --- a/templates/vr-ar.jade +++ b/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