Serve smaller images and replace GIF demos with video

assets/css/style.css

@@ -431,15 +431,15 @@ h6 {
 }
 
 /* Limit the maximum size of images in the about page */
-section img[src*="Neurophysiology-min.png"] {
+section img[src*="Neurophysiology-min"] {
   width: 100% !important;
   max-width: 800px !important;
   margin: 0 auto !important;
   display: block !important;
 }
 
 /* Limit the maximum size of pynapple graphic abstract image */
-.content img[src*="pynapple/GraphicAbstract.png"] {
+.content img[src*="pynapple/GraphicAbstract"] {
   width: 100% !important;
   max-width: 600px !important;
   margin: 0 auto !important;
@@ -448,10 +448,10 @@ section img[src*="Neurophysiology-min.png"] {
 
 /* Ensure the image is responsive on smaller screens */
 @media (max-width: 900px) {
-  section img[src*="Neurophysiology-min.png"] {
+  section img[src*="Neurophysiology-min"] {
     max-width: 95% !important;
   }
-  .content img[src*="pynapple/GraphicAbstract.png"] {
+  .content img[src*="pynapple/GraphicAbstract"] {
     max-width: 90% !important;
   }
 }
@@ -739,7 +739,7 @@ header {
 .newsSect {
   display: table;
   background: linear-gradient(#05223ae5, #072742, #052037e5),
-    url("/images/essentials/newsBg.png");
+    url("/images/essentials/newsBg.webp");
   background-position: center top;
   background-size: cover;
 }
@@ -795,7 +795,7 @@ header {
 /* CTA */
 .ctaSect {
   display: table;
-  background: url("/images/essentials/ctaBg.png"), #114b7c;
+  background: url("/images/essentials/ctaBg.webp"), #114b7c;
   background-position: center center;
   background-size: cover;
 }
@@ -813,7 +813,7 @@ header {
 /* About */
 .aboutSect {
   background: radial-gradient(#063053e5, #062e52e5),
-    url("/images/essentials/aboutBg.png");
+    url("/images/essentials/aboutBg.webp");
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
@@ -837,7 +837,7 @@ header {
 /* Hero */
 .softwareSect {
   background: radial-gradient(#063053e5, #062e52e5),
-    url("/images/essentials/softwareBg.png");
+    url("/images/essentials/softwareBg.webp");
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;

content/tools/community/deeplabcut.md

@@ -2,7 +2,7 @@
 title: "DeepLabCut"
 description: "An efficient method for 2D and 3D markerless pose estimation based on transfer learning with deep neural networks that achieves excellent results with minimal training data."
 category: "behavior-analysis"
-image: "/images/tools/deeplabcut/deeplabcut.gif"
+image: "/images/tools/deeplabcut/deeplabcut.webp"
 source_url: "https://github.com/DeepLabCut/DeepLabCut"
 docs_url: "http://www.mackenziemathislab.org/deeplabcut"
 weight: 190
@@ -12,7 +12,7 @@ weight: 190
 
 DeepLabCut is an efficient method for 2D and 3D markerless pose estimation based on transfer learning with deep neural networks. It achieves excellent results (matching human labeling accuracy) with minimal training data (typically 50-200 frames). The framework has been proven versatile in tracking various body parts in multiple species across a broad collection of behaviors.
 
-![DeepLabCut Demo](/images/tools/deeplabcut/deeplabcut.gif)
+<video autoplay loop muted playsinline width="300" height="224" aria-label="DeepLabCut Demo" style="width: 100%; height: auto;"><source src="/images/tools/deeplabcut/deeplabcut.mp4" type="video/mp4"></video>
 
 ## NWB Integration
 

content/tools/community/nwbexplorer.md

@@ -13,7 +13,7 @@ NWB Explorer is a web application developed by MetaCell for reading, visualizing
 
 ## Demo
 
-![NWB Explorer Demo](/images/tools/nwbexplorer/nwbexplorer.gif)
+<video autoplay loop muted playsinline width="600" height="338" aria-label="NWB Explorer Demo" style="width: 100%; height: auto;"><source src="/images/tools/nwbexplorer/nwbexplorer.mp4" type="video/mp4"></video>
 
 You can try NWB Explorer online at [https://nwbexplorer.v2.opensourcebrain.org](https://nwbexplorer.v2.opensourcebrain.org).
 

content/tools/community/nwbwidgets.md

@@ -14,7 +14,7 @@ NWB Widgets is a library of widgets for visualization NWB data in a Jupyter note
 
 ## Demo
 
-![NWB Widgets Demo](/images/tools/nwbwidgets/jupyter_widgets_demo.gif)
+<video autoplay loop muted playsinline width="1006" height="872" aria-label="NWB Widgets Demo" style="width: 100%; height: auto;"><source src="/images/tools/nwbwidgets/jupyter_widgets_demo.mp4" type="video/mp4"></video>
 
 ## Installation
 

content/tools/community/sleap.md

@@ -2,7 +2,7 @@
 title: "SLEAP"
 description: "An open source deep-learning based framework for multi-animal pose tracking, capable of tracking any type or number of animals with an advanced labeling/training GUI for active learning and proofreading."
 category: "behavior-analysis"
-image: "/images/tools/sleap/sleap.gif"
+image: "/images/tools/sleap/sleap.webp"
 source_url: "https://github.com/talmolab/sleap"
 docs_url: "https://sleap.ai"
 weight: 200
@@ -12,7 +12,7 @@ weight: 200
 
 SLEAP is an open source deep-learning based framework for multi-animal pose tracking. It can be used to track any type or number of animals and includes an advanced labeling/training GUI for active learning and proofreading.
 
-![SLEAP Demo](/images/tools/sleap/sleap.gif)
+<video autoplay loop muted playsinline width="600" height="278" aria-label="SLEAP Demo" style="width: 100%; height: auto;"><source src="/images/tools/sleap/sleap.mp4" type="video/mp4"></video>
 
 ## NWB Integration
 

content/tools/community/suite2p.md

@@ -12,7 +12,7 @@ weight: 120
 
 Suite2p is an imaging processing pipeline written in Python. It provides a comprehensive set of tools for analyzing calcium imaging data.
 
-![Suite2p Demo](/images/tools/suite2p/multiselect.gif)
+<video autoplay loop muted playsinline width="1600" height="854" aria-label="Suite2p Demo" style="width: 100%; height: auto;"><source src="/images/tools/suite2p/multiselect.mp4" type="video/mp4"></video>
 
 ## Features
 

content/tools/community/visiomode.md

@@ -18,7 +18,7 @@ Visiomode is an open-source platform for building touchscreen-based behavioral t
 
 Visiomode session data can be exported to the NWB format directly from the web interface. Navigate to the "History" tab, choose the session you wish to export and select "NWB" from the "Download" dropdown menu.
 
-![Visiomode NWB Export](/images/tools/visiomode/visiomode-nwb-export.gif)
+<video autoplay loop muted playsinline width="800" height="484" aria-label="Visiomode NWB Export" style="width: 100%; height: auto;"><source src="/images/tools/visiomode/visiomode-nwb-export.mp4" type="video/mp4"></video>
 
 ### Data Structure
 

hugo.yaml

@@ -25,3 +25,7 @@ module:
   mounts:
     - source: assets
       target: assets
+    # Lets templates resize images that live in static/images. See
+    # layouts/partials/img-src.html.
+    - source: static/images
+      target: assets/images

layouts/_default/_markup/render-image.html

@@ -0,0 +1,2 @@
+<img src="{{ partial "img-src.html" (dict "src" .Destination) }}" alt="{{ .PlainText }}"{{ with .Title }} title="{{ . }}"{{ end }} loading="lazy">
+{{- /* chomp trailing newline */ -}}

layouts/about-nwb/list.html

@@ -12,7 +12,7 @@ <h1 class="inter-700 text-48 text-white text-center">{{ .Title | markdownify }}<
     <div class="d-flex flex-column flex-lg-row gap-4 container-lg mx-auto align-items-center justify-content-center justify-content-md-between">
         <div class="col-12 col-sm-4 col-lg-3">
             <div>
-                <img src="{{ .image }}" alt="" class="img-fluid">
+                <img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid">
             </div>
         </div>
         <div class="col-12 col-sm-8 col-lg-8">
@@ -42,7 +42,7 @@ <h3 class="dark-900 inter-700 text-40 mb-4">{{ .title | markdownify }}</h3>
         </div>
         <div class="col-12 col-sm-8 col-lg-6">
             <div>
-                <img src="{{ .image }}" alt="" class="img-fluid">
+                <img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid">
             </div>
         </div>
     </div>
@@ -75,7 +75,7 @@ <h3 class="inter-700 text-40 dark-900">{{ .title | markdownify }}</h3>
         <p class="inter-400 text-16 dark-700 mb-0">{{ . | markdownify }}</p>
         {{ end }}
         {{ with .image }}
-        <img src="{{ . }}" alt="nwb-neuro" class="img-fluid my-5">
+        <img src="{{ partial "img-src.html" (dict "src" . "width" 2000) }}" loading="lazy" alt="nwb-neuro" class="img-fluid my-5">
         {{ end }}
         {{ with .wide_image }}
         <div class="wide-image-container">
@@ -100,7 +100,7 @@ <h3 class="inter-700 text-40 dark-900 text-center">{{ .title | markdownify }}</h
             <div class="col-12 col-sm-6 col-md-4">
                 <div class="bg-white p-4 rounded-4 d-flex gap-4 h-100">
                     <div class="boxImg">
-                        <img src="{{ .icon }}" alt="" width="36">
+                        <img src="{{ partial "img-src.html" (dict "src" .icon "width" 108) }}" loading="lazy" alt="" width="36">
                     </div>
                     <div class="d-flex flex-column gap-2">
                         <strong class="inter-600 text-20 text-black mb-1">{{ .title | markdownify }}</strong>
@@ -132,7 +132,7 @@ <h3 class="inter-700 text-40 dark-900">{{ .title | markdownify }}</h3>
         <p class="inter-400 text-18 dark-700 mb-0">{{ . | markdownify }}</p>
         {{ end }}
         {{ with .image }}
-        <img src="{{ . }}" alt="nwb-neuro" class="img-fluid my-5">
+        <img src="{{ partial "img-src.html" (dict "src" . "width" 2000) }}" loading="lazy" alt="nwb-neuro" class="img-fluid my-5">
         {{ end }}
         {{ with .wide_image }}
         <div class="wide-image-container">

layouts/archives/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 {{/* Hero Section */}}
 <section class="hero teamSect d-flex justify-content-center align-items-center position-relative"
-         style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.png');">
+         style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.webp');">
     <h1 class="inter-700 text-48 text-white text-center z-4">{{ .Title | markdownify }}</h1>
     <div class="position-absolute ellipses">
         <img src="/images/essentials/ellipses.png" alt="" class="ellipseW">
@@ -21,7 +21,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
             <a href="{{ .url }}" class="col-12 col-md-6" target="_blank">
                 <div class="bg-white h-100 rounded-3 p-4 shadow-sm">
                     <div class="d-flex flex-column flex-sm-row gap-4">
-                        <img src="{{ .image }}" alt="{{ .title }}" width="80" height="80" class="flex-shrink-0" style="object-fit: contain;">
+                        <img src="{{ partial "img-src.html" (dict "src" .image "width" 240) }}" loading="lazy" alt="{{ .title }}" width="80" height="80" class="flex-shrink-0" style="object-fit: contain;">
                         <div class="">
                             <h5 class="inter-700 text-18 dark-900 mb-2">{{ .title | markdownify }}</h5>
                             <p class="inter-400 text-14 dark-700">{{ .content | markdownify }}</p>

layouts/community/educators.html

@@ -2,7 +2,7 @@
 <div class="community-educators">
 {{/* Hero Section */}}
 <section class="hero teamSect d-flex justify-content-center align-items-center position-relative"
-         style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.png');">
+         style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.webp');">
     <h1 class="inter-700 text-48 text-white text-center z-4">{{ .Title | markdownify }}</h1>
     <div class="position-absolute ellipses">
         <img src="/images/essentials/ellipses.png" alt="" class="ellipseW">
@@ -49,7 +49,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
                         {{ if .image }}
                         <div class="me-4 flex-shrink-0">
                             <a href="{{ .url }}" target="_blank">
-                                <img src="{{ .image }}" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
+                                <img src="{{ partial "img-src.html" (dict "src" .image "width" 300) }}" loading="lazy" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
                             </a>
                         </div>
                         {{ end }}
@@ -99,7 +99,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
                         {{ if .image }}
                         <div class="me-4 flex-shrink-0">
                             <a href="{{ .url }}" target="_blank">
-                                <img src="{{ .image }}" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
+                                <img src="{{ partial "img-src.html" (dict "src" .image "width" 300) }}" loading="lazy" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
                             </a>
                         </div>
                         {{ end }}

layouts/community/gallery.html

@@ -2,7 +2,7 @@
 <div class="community-gallery">
 {{/* Hero Section */}}
 <section class="hero teamSect d-flex justify-content-center align-items-center position-relative"
-         style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.png');">
+         style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.webp');">
     <h1 class="inter-700 text-48 text-white text-center z-4">{{ .Title | markdownify }}</h1>
     <div class="position-absolute ellipses">
         <img src="/images/essentials/ellipses.png" alt="" class="ellipseW">
@@ -35,7 +35,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
                         {{ if .image }}
                         <div class="me-4 flex-shrink-0">
                             <a href="{{ .url }}" target="_blank">
-                                <img src="{{ .image }}" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
+                                <img src="{{ partial "img-src.html" (dict "src" .image "width" 300) }}" loading="lazy" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
                             </a>
                         </div>
                         {{ end }}
@@ -71,7 +71,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
                         {{ if .image }}
                         <div class="me-4 flex-shrink-0">
                             <a href="{{ .url }}" target="_blank">
-                                <img src="{{ .image }}" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
+                                <img src="{{ partial "img-src.html" (dict "src" .image "width" 300) }}" loading="lazy" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
                             </a>
                         </div>
                         {{ end }}
@@ -106,7 +106,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
                     <div class="d-flex flex-row">
                         <div class="me-4">
                             <a href="{{ .url }}" target="_blank">
-                                <img src="{{ .image }}" alt="{{ .title }}" class="rounded-3" style="width: 100px; height: 100px; object-fit: cover;">
+                                <img src="{{ partial "img-src.html" (dict "src" .image "width" 300) }}" loading="lazy" alt="{{ .title }}" class="rounded-3" style="width: 100px; height: 100px; object-fit: cover;">
                             </a>
                         </div>
                         <div class="flex-grow-1">

layouts/community/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 {{/* Hero Section */}}
 <section class="hero teamSect d-flex justify-content-center align-items-center position-relative"
-         style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.png');">
+         style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.webp');">
     <h1 class="inter-700 text-48 text-white text-center z-4">{{ .Title | markdownify }}</h1>
     <div class="position-absolute ellipses">
         <img src="/images/essentials/ellipses.png" alt="" class="ellipseW">

layouts/contact-us/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 {{/* Hero Section */}}
 <section class="hero teamSect d-flex justify-content-center align-items-center position-relative"
-         style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.png');">
+         style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.webp');">
     <h1 class="inter-700 text-48 text-white text-center z-4">{{ .Title | markdownify }}</h1>
     <div class="position-absolute ellipses">
         <img src="/images/essentials/ellipses.png" alt="" class="ellipseW">
@@ -21,7 +21,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
             <a href=" {{ .url }}" class="col-12 col-sm-6 col-md-4 col-lg-3">
                 <div class="bg-white h-100 rounded-3 p-4 shadow-sm">
                     <div class="d-flex flex-column row-gap-4">
-                        <img src="{{ .image }}" alt="" width="40">
+                        <img src="{{ partial "img-src.html" (dict "src" .image "width" 120) }}" loading="lazy" alt="" width="40">
                         <div class="">
                             <h5 class="inter-700 text-18 dark-900 mb-2">{{ .title | markdownify }}</h5>
                             <p class="inter-400 text-14 dark-700">{{ .content | markdownify }}</p>
@@ -54,7 +54,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
                     <div class="rounded-3 shadow-sm p-3 h-100">
                         <div class="mx-auto text-center d-flex flex-column justify-content-center align-items-center">
                             <div>
-                                <img src="{{ .icon }}" alt="" width="100">
+                                <img src="{{ partial "img-src.html" (dict "src" .icon "width" 300) }}" loading="lazy" alt="" width="100">
                             </div>
                             <div>
                                 <p class="inter-400 lighter text-14 mb-2">{{ .title | markdownify }}</p>

layouts/convert/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 {{/* Hero Section */}}
 <section class="hero teamSect d-flex justify-content-center align-items-center position-relative"
-    style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.png');">
+    style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.webp');">
     <h1 class="inter-700 text-48 text-white text-center z-4">{{ .Title | markdownify }}</h1>
     <div class="position-absolute ellipses">
         <img src="/images/essentials/ellipses.png" alt="" class="ellipseW">
@@ -44,7 +44,7 @@ <h3 class="inter-700 dark-900 text-36">Available Tools</h3>
                 <div class="d-flex flex-column row-gap-4">
                     <div class="d-flex align-items-center gap-4">
                         {{ with .icon }}
-                        <img src="{{ . }}" alt="" width="60">
+                        <img src="{{ partial "img-src.html" (dict "src" . "width" 180) }}" loading="lazy" alt="" width="60">
                         {{ end }}
                         {{ with .title }}
                         <h3 class="inter-700 text-28 dark-900 mb-0 mt-2">{{ . | markdownify }}</h3>