diff --git a/assets/css/style.css b/assets/css/style.css
index 9708038..bc716fd 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -431,7 +431,7 @@ 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;
@@ -439,7 +439,7 @@ section img[src*="Neurophysiology-min.png"] {
 }
 
 /* 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;
diff --git a/content/tools/community/deeplabcut.md b/content/tools/community/deeplabcut.md
index 46ebeed..ecc349e 100644
--- a/content/tools/community/deeplabcut.md
+++ b/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
 
diff --git a/content/tools/community/nwbexplorer.md b/content/tools/community/nwbexplorer.md
index e293e87..a22f32c 100644
--- a/content/tools/community/nwbexplorer.md
+++ b/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).
 
diff --git a/content/tools/community/nwbwidgets.md b/content/tools/community/nwbwidgets.md
index 606434f..7142b8c 100644
--- a/content/tools/community/nwbwidgets.md
+++ b/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
 
diff --git a/content/tools/community/sleap.md b/content/tools/community/sleap.md
index aa1e2ae..a6d49eb 100644
--- a/content/tools/community/sleap.md
+++ b/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
 
diff --git a/content/tools/community/suite2p.md b/content/tools/community/suite2p.md
index 27e40bf..3e7f68e 100644
--- a/content/tools/community/suite2p.md
+++ b/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
 
diff --git a/content/tools/community/visiomode.md b/content/tools/community/visiomode.md
index 69c31ca..37d5fde 100644
--- a/content/tools/community/visiomode.md
+++ b/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
 
diff --git a/hugo.yaml b/hugo.yaml
index 9ca4513..dcd0f5a 100644
--- a/hugo.yaml
+++ b/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
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
new file mode 100644
index 0000000..d80d6bb
--- /dev/null
+++ b/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 */ -}}
diff --git a/layouts/about-nwb/list.html b/layouts/about-nwb/list.html
index 15d2972..3fff5d0 100644
--- a/layouts/about-nwb/list.html
+++ b/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">
diff --git a/layouts/archives/list.html b/layouts/archives/list.html
index 521f899..3b462e0 100644
--- a/layouts/archives/list.html
+++ b/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>
diff --git a/layouts/community/educators.html b/layouts/community/educators.html
index 539b1e6..e85fe82 100644
--- a/layouts/community/educators.html
+++ b/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 }}
diff --git a/layouts/community/gallery.html b/layouts/community/gallery.html
index e44ca85..bc355e5 100644
--- a/layouts/community/gallery.html
+++ b/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">
diff --git a/layouts/community/list.html b/layouts/community/list.html
index 4c6e11a..c6b3bce 100644
--- a/layouts/community/list.html
+++ b/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">
diff --git a/layouts/contact-us/list.html b/layouts/contact-us/list.html
index 114f53b..9659781 100644
--- a/layouts/contact-us/list.html
+++ b/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>
diff --git a/layouts/convert/list.html b/layouts/convert/list.html
index 1e83288..7470109 100644
--- a/layouts/convert/list.html
+++ b/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>
diff --git a/layouts/enhancement-proposals/list.html b/layouts/enhancement-proposals/list.html
index f6b325a..b118d4b 100644
--- a/layouts/enhancement-proposals/list.html
+++ b/layouts/enhancement-proposals/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">
@@ -25,7 +25,7 @@ <h4 class="inter-600 text-20 dark-900">{{ . | markdownify }}</h4>
                 {{ range $i, $p := .items }}
                 <div class="d-flex gap-3 ms-1 {{ if eq $i 0 }}pt-4{{ else }}pt-3{{ end }}">
                     <div>
-                        <img src="{{ .icon }}" alt="" width="20">
+                        <img src="{{ partial "img-src.html" (dict "src" .icon "width" 60) }}" loading="lazy" alt="" width="20">
                     </div>
                     <div>
                         {{ if .heading }}
@@ -44,7 +44,7 @@ <h4 class="inter-600 text-20 dark-900">{{ . | markdownify }}</h4>
                             {{ range $index, $params := .nested_list }}
                             <div class="d-flex gap-3 ms-1 {{ if eq $index 0 }}pt-4{{ else }}pt-3{{ end }}">
                                 <div>
-                                    <img src="{{ .icon }}" alt="" width="20">
+                                    <img src="{{ partial "img-src.html" (dict "src" .icon "width" 60) }}" loading="lazy" alt="" width="20">
                                 </div>
                                 <div>
                                     <a href="{{ .link }}" class="inter-600 text-16 blue nav-link">{{ .heading | markdownify }}</a>
diff --git a/layouts/event-cards/list.html b/layouts/event-cards/list.html
index f2ef9d7..909a4e0 100644
--- a/layouts/event-cards/list.html
+++ b/layouts/event-cards/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/eventsBg.png');">
+    style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/eventsBg.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">
@@ -16,7 +16,7 @@ <h1 class="inter-700 text-48 text-white text-center z-4">{{ .Title | markdownify
   <div class="container-lg">
     <div class="row justify-content-center justify-content-md-between gy-5 g-md-0 align-items-center">
       <div class="col-sm-8 col-md-4">
-        <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 class="col-sm-8 col-md-7">
         <h3 class="inter-700 text-48 dark-900 mb-4">{{ .title | markdownify }}</h3>
diff --git a/layouts/events/list.html b/layouts/events/list.html
index 94b076c..b1350ff 100644
--- a/layouts/events/list.html
+++ b/layouts/events/list.html
@@ -13,7 +13,7 @@ <h1 class="inter-700 text-48 text-white text-center">{{ .title | markdownify }}<
         <p class="dark-700 text-16 inter-400 lh-md mb-4">{{ .content | markdownify }}</p>
       </div>
       <div class="col-12 col-md-4">
-        <img src="{{ .image }}" alt="NWB Events" class="img-fluid">
+        <img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="NWB Events" class="img-fluid">
       </div>
     </div>
   </div>
diff --git a/layouts/events/single.html b/layouts/events/single.html
index 5768684..8072afc 100644
--- a/layouts/events/single.html
+++ b/layouts/events/single.html
@@ -17,7 +17,7 @@ <h1 class="inter-700 text-48 text-white text-center z-4">{{ .Title | markdownify
                 <div class="bg-white p-4 rounded-3 shadow-sm">
                     {{ if .Params.image }}
                     <div class="mb-4">
-                        <img src="{{ .Params.image }}" alt="{{ .Title }}" class="img-fluid rounded-3 w-100">
+                        <img src="{{ partial "img-src.html" (dict "src" .Params.image "width" 2000) }}" alt="{{ .Title }}" class="img-fluid rounded-3 w-100">
                     </div>
                     {{ end }}
                     <div class="d-flex flex-wrap gap-4 mb-4">
diff --git a/layouts/faq/list.html b/layouts/faq/list.html
index d3c2337..c35be6c 100644
--- a/layouts/faq/list.html
+++ b/layouts/faq/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">
diff --git a/layouts/faq/single.html b/layouts/faq/single.html
index a8c8bbb..6d030ba 100644
--- a/layouts/faq/single.html
+++ b/layouts/faq/single.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">
diff --git a/layouts/grants-and-projects/list.html b/layouts/grants-and-projects/list.html
index 06eed4b..9e43510 100644
--- a/layouts/grants-and-projects/list.html
+++ b/layouts/grants-and-projects/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">
@@ -22,7 +22,7 @@ <h4 class="inter-600 text-32 dark-900 pb-3">{{ .title | markdownify }}</h4>
                 <p class="inter-400 text-16 dark-700">{{ .content | markdownify }}</p>
             </div>
             <div class="col-sm-10 col-md-5">
-                <img src="{{ .image }}" alt="" class="img-fluid rounded-3">
+                <img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid rounded-3">
             </div>
         </div>
         {{ end }}
@@ -134,7 +134,7 @@ <h3 class="inter-700 text-48 dark-900 text-center mb-5">Past Projects</h3>
                     <div
                         class="row justify-content-center justify-content-md-between {{ if not (modBool $i 2) }}flex-row-reverse{{ end }}">
                         <div class="col-sm-10 col-md-5 mb-4 mb-md-0">
-                            <img src="{{ .image }}" alt="" class="img-fluid rounded-3">
+                            <img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid rounded-3">
                         </div>
                         <div class="col-sm-10 col-md-6">
                             <h4 class="inter-600 text-32 dark-900 mb-4">{{ .title | markdownify }}</h4>
@@ -163,7 +163,7 @@ <h4 class="inter-600 text-36 dark-900 mb-3">{{ .title | markdownify }}</h4>
                         <p class="inter-400 text-16 dark-700">{{ .content | markdownify }}</p>
                     </div>
                     <div class="pt-3">
-                        <img src="{{ .image }}" alt="" class="img-fluid rounded-3">
+                        <img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid rounded-3">
                     </div>
                 </div>
             </div>
diff --git a/layouts/index.html b/layouts/index.html
index 0d07224..97aec44 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -65,7 +65,7 @@ <h1 class="inter-700 text-white text-48-responsive">{{ .title | markdownify }}</
     <div class="col-12 col-sm-6 col-lg-3 mx-auto px-0 px-sm-2">
       <div
         class="rounded-3 px-5 py-4 d-flex flex-column justify-content-between align-items-center aboutBox animate h-100 row-gap-4">
-        <img src="{{ .image }}" alt="about-nwb" width="64">
+        <img src="{{ partial "img-src.html" (dict "src" .image "width" 192) }}" loading="lazy" alt="about-nwb" width="64">
         <div class="h-25">
           <p class="inter-600 text-20 text-center mb-0">{{ .title | markdownify }}</p>
         </div>
@@ -86,7 +86,7 @@ <h1 class="inter-700 text-white text-48-responsive">{{ .title | markdownify }}</
 <section class="section w-100 h-100 pt-0">
   <div class="container-lg row mx-auto justify-content-between">
     <div class="col-12 col-md-5 rounded-3 px-0 mb-5 mb-md-0">
-      <img src="{{ .image }}" alt="nwb-portfolio" class="w-100">
+      <img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="nwb-portfolio" class="w-100">
     </div>
     <div class="col-12 col-md-6 d-flex flex-column gap-4 px-0">
       <h3 class="inter-700 text-40 mb-0">{{ .heading | markdownify }}</h3>
@@ -96,7 +96,7 @@ <h3 class="inter-700 text-40 mb-0">{{ .heading | markdownify }}</h3>
       <div class="d-flex gap-3 ms-1 ms-md-0">
         {{ range .logos }}
         <div class="p-1 shadow-sm rounded-3 achiImg">
-          <img src="{{ .logo }}" alt="nwb-achivements" class="img-fluid">
+          <img src="{{ partial "img-src.html" (dict "src" .logo "width" 240) }}" loading="lazy" alt="nwb-achivements" class="img-fluid">
         </div>
         {{ end }}
       </div>
@@ -154,7 +154,7 @@ <h2 class="text-white inter-700 text-40 mb-0 text-center text-md-start">Latest N
       <div class="swiper-slide">
         <div class="shadow">
           <div class="shadow-sm">
-            <img src="{{ .Params.image }}" alt="" class="rounded-top-3" style="width: 100% !important; height: 240px !important; object-fit: cover !important;">
+            <img src="{{ partial "img-src.html" (dict "src" .Params.image "width" 900) }}" loading="lazy" alt="" class="rounded-top-3" style="width: 100% !important; height: 240px !important; object-fit: cover !important;">
         </div>
           <div class="h-40 p-4 bg-main rounded-bottom-3 d-flex flex-column gap-3">
             <div class="d-flex gap-2 align-items-center">
@@ -208,7 +208,7 @@ <h3 class="inter-600 text-24 text-center">Current Sponsors</h3>
         {{ range .logos }}
         <div class="logo clients">
           <a href="{{ .link }}" target="_blank">
-            <img src="{{ .image }}" alt="Logo 1">
+            <img src="{{ partial "img-src.html" (dict "src" .image "width" 400) }}" loading="lazy" alt="Logo 1">
           </a>
         </div>
         {{ end }}
diff --git a/layouts/news/list.html b/layouts/news/list.html
index cab08cf..8b76f4d 100644
--- a/layouts/news/list.html
+++ b/layouts/news/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/newsPageBg.png');">
+    style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/newsPageBg.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">
@@ -43,7 +43,7 @@ <h3 class="inter-700 dark-900 text-48">All Post</h3>
                     {{ range $paginator.Pages }}
                     <div class="col-sm-8 col-md-6 mx-auto">
                         <div class="rounded-top-3 shadow-sm overflow-hidden">
-                            <img data-pagefind-meta="image[src]" src="{{ .Params.image }}" alt="" style="width: 100% !important; height: 240px !important; object-fit: cover !important;">
+                            <img data-pagefind-meta="image[src]" src="{{ partial "img-src.html" (dict "src" .Params.image "width" 1400) }}" loading="lazy" alt="" style="width: 100% !important; height: 240px !important; object-fit: cover !important;">
                         </div>
                         <div class="p-4 bg-white d-flex flex-column gap-3 rounded-bottom-3 shadow-sm">
                             {{ with .Date }}
@@ -119,7 +119,7 @@ <h4 class="inter-600 text-24 dark-900">Recent News</h4>
                         <div class="rounded-3 shadow-sm bg-white p-2">
                             <div class="d-flex  gap-3 align-items-center">
                                 <div class="flex-shrink-0">
-                                    <img src="{{ .Params.image }}" alt=""
+                                    <img src="{{ partial "img-src.html" (dict "src" .Params.image "width" 360) }}" loading="lazy" alt=""
                                         class="rounded-3"
                                         style="width: 120px; height: 75px; object-fit: cover;">
                                 </div>
diff --git a/layouts/news/single.html b/layouts/news/single.html
index 9f0c26f..1862911 100644
--- a/layouts/news/single.html
+++ b/layouts/news/single.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/newsPageBg.png');">
+    style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/newsPageBg.webp');">
     {{ with .Parent.Title }}
     <h1 class="inter-700 text-48 text-white text-center z-4">{{ . | markdownify }}</h1>
     {{ end }}
@@ -31,7 +31,7 @@ <h3 class="inter-700 dark-900 text-48-responsive">{{ .Title | markdownify }}</h3
         <div class="row justify-content-between">
             <div class="col-lg-9">
                 <div>
-                    <img src="{{ .Params.image }}" alt="" class="rounded-top-3"
+                    <img src="{{ partial "img-src.html" (dict "src" .Params.image "width" 2000) }}" alt="" class="rounded-top-3"
                         style="width: 100% !important; height: auto !important;">
                 </div>
                 <div class="mt-4 bg-white px-5 py-2">
@@ -110,7 +110,7 @@ <h3 class="inter-700 dark-900 text-48-responsive">{{ .Title | markdownify }}</h3
                     <div class="p-3 bg-slate border">
                         <div class="d-flex flex-wrap gap-3 align-items-center">
                             <div style="width: 100px;">
-                                <img src="{{ .image }}" alt="" class="img-fluid rounded-circle">
+                                <img src="{{ partial "img-src.html" (dict "src" .image "width" 300) }}" loading="lazy" alt="" class="img-fluid rounded-circle">
                             </div>
                             <div>
                                 <p class="mb-1 blue inter-600 text-20">{{ .name }}</p>
@@ -147,7 +147,7 @@ <h4 class="inter-600 text-24 dark-900">Recent News</h4>
                         <div class="rounded-3 shadow-sm bg-white p-2">
                             <div class="d-flex  gap-3 align-items-center">
                                 <div class="flex-shrink-0">
-                                    <img data-pagefind-meta="image[src]" src="{{ .Params.image }}" alt=""
+                                    <img data-pagefind-meta="image[src]" src="{{ partial "img-src.html" (dict "src" .Params.image "width" 360) }}" loading="lazy" alt=""
                                         class="rounded-3"
                                         style="width: 120px; height: 75px; object-fit: cover;">
                                 </div>
diff --git a/layouts/nwb-software/list.html b/layouts/nwb-software/list.html
index 0ab64a0..a552af6 100644
--- a/layouts/nwb-software/list.html
+++ b/layouts/nwb-software/list.html
@@ -21,7 +21,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
                     <div class="d-flex flex-column row-gap-4">
                         <div>
                             <div class="shadow-inner p-3 border rounded-2 d-inline-block">
-                                <img src="{{ .icon }}" alt="" class="img-fluid typeBox">
+                                <img src="{{ partial "img-src.html" (dict "src" .icon "width" 96) }}" loading="lazy" alt="" class="img-fluid typeBox">
                             </div>
                         </div>
                         <div class="">
@@ -47,7 +47,7 @@ <h5 class="inter-700 text-20 dark-900 mb-4">{{ .title | markdownify }}</h5>
         <div
             class="row {{ if $even }}flex-lg-row-reverse{{ end }} gy-4 justify-content-center justify-content-md-between section">
             <div class="col-sm-10 col-md-5">
-                <img src="{{ $p.image }}" alt="" class="img-fluid {{ if $p.community_software }}fixedHeight{{ end }}">
+                <img src="{{ partial "img-src.html" (dict "src" $p.image "width" 1400) }}" loading="lazy" alt="" class="img-fluid {{ if $p.community_software }}fixedHeight{{ end }}">
             </div>
             <div class="col-sm-10 col-lg-6">
                 <div class="d-flex flex-column row-gap-2">
@@ -139,7 +139,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
             
             {{ if .image }}
             <div class="mt-4">
-                <img src="{{ .image }}" alt="NWB Tools Architecture" class="img-fluid" style="max-width: 90%;">
+                <img src="{{ partial "img-src.html" (dict "src" .image "width" 2000) }}" loading="lazy" alt="NWB Tools Architecture" class="img-fluid" style="max-width: 90%;">
             </div>
             {{ end }}
         </div>
diff --git a/layouts/online-resources/list.html b/layouts/online-resources/list.html
index 59c290a..cd07af1 100644
--- a/layouts/online-resources/list.html
+++ b/layouts/online-resources/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-4" target="_blank">
                 <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>
@@ -49,7 +49,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-4" target="_blank">
                 <div class="bg-dark-100 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>
@@ -77,7 +77,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-4" target="_blank">
                 <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>
@@ -105,7 +105,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-4" target="_blank">
                 <div class="bg-dark-100 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>
diff --git a/layouts/partials/img-src.html b/layouts/partials/img-src.html
new file mode 100644
index 0000000..d91cfda
--- /dev/null
+++ b/layouts/partials/img-src.html
@@ -0,0 +1,37 @@
+{{/*
+  Returns the URL to use for an image.
+
+  PNG and JPEG files under /images/ that are wider than "width" are scaled down
+  to that width and converted to WebP. Narrower ones are converted to WebP at
+  their own size. The converted file is used only when it is smaller than the
+  original. Anything else (remote URLs, SVG, GIF, small files, paths that do
+  not resolve) is returned unchanged, so it is always safe to call.
+
+  "width" must be at least as wide as the image is ever displayed, and ideally
+  twice that so it stays sharp on high-density screens. It defaults to 2000.
+
+  Usage: <img src="{{ partial "img-src.html" (dict "src" .image "width" 900) }}">
+*/}}
+{{ $src := .src | default "" }}
+{{ $width := .width | default 2000 }}
+{{ $out := $src }}
+{{ if hasPrefix $src "/images/" }}
+  {{ $parts := split $src "#" }}
+  {{ $path := index $parts 0 }}
+  {{ $fragment := "" }}
+  {{ if gt (len $parts) 1 }}{{ $fragment = printf "#%s" (index $parts 1) }}{{ end }}
+  {{ with resources.Get (strings.TrimPrefix "/" $path) }}
+    {{ if and (in (slice "png" "jpeg") .MediaType.SubType) (gt (len .Content) 20000) }}
+      {{ $webp := "" }}
+      {{ if gt .Width $width }}
+        {{ $webp = .Resize (printf "%dx webp q82 lanczos" $width) }}
+      {{ else }}
+        {{ $webp = .Process "webp q82" }}
+      {{ end }}
+      {{ if lt (len $webp.Content) (len .Content) }}
+        {{ $out = printf "%s%s" $webp.RelPermalink $fragment }}
+      {{ end }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+{{ return $out }}
diff --git a/layouts/policies/list.html b/layouts/policies/list.html
index 26360f9..eaa8f63 100644
--- a/layouts/policies/list.html
+++ b/layouts/policies/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">
@@ -25,7 +25,7 @@ <h4 class="inter-600 text-20 dark-900">{{ . | markdownify }}</h4>
                 {{ range $i, $p := .items }}
                 <div class="d-flex gap-3 ms-1 {{ if eq $i 0 }}pt-4{{ else }}pt-3{{ end }}">
                     <div>
-                        <img src="{{ .icon }}" alt="" width="20">
+                        <img src="{{ partial "img-src.html" (dict "src" .icon "width" 60) }}" loading="lazy" alt="" width="20">
                     </div>
                     <div>
                         {{ if .heading }}
@@ -40,7 +40,7 @@ <h4 class="inter-600 text-20 dark-900">{{ . | markdownify }}</h4>
                             {{ range $index, $params := .nested_list }}
                             <div class="d-flex gap-3 ms-1 {{ if eq $index 0 }}pt-4{{ else }}pt-3{{ end }}">
                                 <div>
-                                    <img src="{{ .icon }}" alt="" width="20">
+                                    <img src="{{ partial "img-src.html" (dict "src" .icon "width" 60) }}" loading="lazy" alt="" width="20">
                                 </div>
                                 <div>
                                     <a href="{{ .link }}" class="inter-600 text-16 blue nav-link">{{ .heading | markdownify }}</a>
diff --git a/layouts/publications/list.html b/layouts/publications/list.html
index 019a21b..2154bb4 100644
--- a/layouts/publications/list.html
+++ b/layouts/publications/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">
@@ -24,7 +24,7 @@ <h1 class="inter-700 text-48 text-white text-center z-4">{{ .Title | markdownify
                         class='bg-white rounded-3 shadow-sm px-3 py-2 d-flex align-items-center gap-2 nav-link sideLink'>
                         {{ with .Params.icon }}
                         <div class="">
-                            <img src="{{ . }}" alt="" width="20"
+                            <img src="{{ partial "img-src.html" (dict "src" . "width" 60) }}" loading="lazy" alt="" width="20"
                                 class="filter-icon animate">
                         </div>
                         {{ end }}
@@ -50,7 +50,7 @@ <h3 class="inter-700 text-36 dark-900 mb-3">{{ .Title | markdownify }}</h3>
                                 <div class="border-dark-50 border rounded-3 p-3 h-100">
                                     {{ with .icon }}
                                     <div class="rounded-3 bg-slate p-3 d-inline-block mb-3">
-                                        <img src="{{ . }}" alt="" width="24">
+                                        <img src="{{ partial "img-src.html" (dict "src" . "width" 72) }}" loading="lazy" alt="" width="24">
                                     </div>
                                     {{ end }}
                                     <h4 class="inter-600 text-18 dark-700 mb-0">{{ .title | markdownify }}</h4>
@@ -93,7 +93,7 @@ <h3 class="inter-700 text-36 dark-900 mb-3">{{ .Title | markdownify }}</h3>
                                 </div>
                                 {{ with .image }}
                                 <div class="ms-4 mb-3">
-                                    <img src="{{ . }}" alt="" class="listImg">
+                                    <img src="{{ partial "img-src.html" (dict "src" . "width" 640) }}" loading="lazy" alt="" class="listImg">
                                 </div>
                                 {{ end }}
                                 {{ end }}
@@ -102,7 +102,7 @@ <h3 class="inter-700 text-36 dark-900 mb-3">{{ .Title | markdownify }}</h3>
                         </div>
                         {{ with .Params.main_image }}
                         <div class="col-md-5 mb-4 mb-md-0">
-                            <img src="{{ . }}" alt="" class="img-fluid rounded-3">
+                            <img src="{{ partial "img-src.html" (dict "src" . "width" 1400) }}" loading="lazy" alt="" class="img-fluid rounded-3">
                         </div>
                         {{ end }}
                     </div>
diff --git a/layouts/shortcodes/instructors.html b/layouts/shortcodes/instructors.html
index 80636cc..de519d8 100644
--- a/layouts/shortcodes/instructors.html
+++ b/layouts/shortcodes/instructors.html
@@ -4,7 +4,7 @@
   <div class="col-6 col-md-4">
     <div class="h-100 bg-dark-100 rounded-3 p-3">
       {{ with .image }}
-      <img src="{{ . }}" alt="" class="img-fluid rounded-3 w-100" style="aspect-ratio: 1 / 1; object-fit: cover;">
+      <img src="{{ partial "img-src.html" (dict "src" . "width" 800) }}" loading="lazy" alt="" class="img-fluid rounded-3 w-100" style="aspect-ratio: 1 / 1; object-fit: cover;">
       {{ end }}
       <h5 class="inter-700 text-18 dark-900 pt-3 mb-1">{{ .name | markdownify }}</h5>
       {{ with .affiliation }}<p class="inter-400 text-14 dark-700 mb-0">{{ . | markdownify }}</p>{{ end }}
diff --git a/layouts/shortcodes/tool-grid.html b/layouts/shortcodes/tool-grid.html
index 68dad5f..a473fdc 100644
--- a/layouts/shortcodes/tool-grid.html
+++ b/layouts/shortcodes/tool-grid.html
@@ -5,7 +5,7 @@
     <div class="tool-card" style="display: flex; flex-direction: column;">
       {{ if .Params.image }}
       <div class="tool-image">
-        <img src="{{ .Params.image }}" alt="{{ .Title }}" />
+        <img src="{{ partial "img-src.html" (dict "src" .Params.image "width" 600) }}" loading="lazy" alt="{{ .Title }}" />
       </div>
       {{ end }}
       <div class="tool-content" style="display: flex; flex-direction: column; flex-grow: 1;">
diff --git a/layouts/supporting-nwb/list.html b/layouts/supporting-nwb/list.html
index 7797168..81c1c01 100644
--- a/layouts/supporting-nwb/list.html
+++ b/layouts/supporting-nwb/list.html
@@ -63,7 +63,7 @@ <h2 class="inter-700 text-40 dark-900 mb-4">{{ .title | markdownify }}</h2>
             {{ range .actions }}
             <div class="col-12 col-md-6">
                 <div class="bg-light p-4 rounded-4 text-center h-100">
-                    <img src="{{ .icon }}" alt="" width="64" class="mb-3">
+                    <img src="{{ partial "img-src.html" (dict "src" .icon "width" 192) }}" loading="lazy" alt="" width="64" class="mb-3">
                     <h3 class="inter-600 text-24 dark-900 mb-3">{{ .title | markdownify }}</h3>
                     <p class="inter-400 text-16 dark-700 mb-0">{{ .description | markdownify }}</p>
                 </div>
@@ -90,11 +90,11 @@ <h2 class="inter-700 text-40 dark-900 mb-4">{{ .title | markdownify }}</h2>
             <div class="col-12 col-md-6 col-lg-4">
                 <div class="bg-white p-4 rounded-4 text-center h-100 shadow-sm d-flex flex-column justify-content-between">
                     <div>
-                        <img src="{{ .icon }}" alt="" width="48" class="mb-3">
+                        <img src="{{ partial "img-src.html" (dict "src" .icon "width" 144) }}" loading="lazy" alt="" width="48" class="mb-3">
                         <h3 class="inter-700 text-32 text-main mb-2">{{ .number }}</h3>
                         <h4 class="inter-600 text-20 dark-900 mb-2">{{ .label }}</h4>
                         <div class="text-center mb-3">
-                            <img src="{{ .additional_image }}" alt="" class="img-fluid rounded-4">
+                            <img src="{{ partial "img-src.html" (dict "src" .additional_image "width" 1400) }}" loading="lazy" alt="" class="img-fluid rounded-4">
                         </div>
                         <p class="inter-400 text-16 dark-700 mb-0">{{ .description | markdownify }}</p>
                     </div>
@@ -111,11 +111,11 @@ <h4 class="inter-600 text-20 dark-900 mb-2">{{ .label }}</h4>
             {{ range .metrics }}
             <div class="col-12 col-md-6 col-lg-4">
                 <div class="bg-white p-4 rounded-4 text-center h-100 shadow-sm">
-                    <img src="{{ .icon }}" alt="" width="48" class="mb-3">
+                    <img src="{{ partial "img-src.html" (dict "src" .icon "width" 144) }}" loading="lazy" alt="" width="48" class="mb-3">
                     <h3 class="inter-700 text-32 text-second mb-2">{{ .number }}</h3>
                     <h4 class="inter-600 text-20 dark-900 mb-2">{{ .label }}</h4>
                     <div class="text-center mb-3">
-                        <img src="{{ .additional_image }}" alt="" class="img-fluid rounded-4">
+                        <img src="{{ partial "img-src.html" (dict "src" .additional_image "width" 1400) }}" loading="lazy" alt="" class="img-fluid rounded-4">
                     </div>
                     <p class="inter-400 text-16 dark-700 mb-0">{{ .description | markdownify }}</p>
                 </div>
@@ -134,7 +134,7 @@ <h3 class="inter-600 text-28 dark-900 mb-3">{{ .title | markdownify }}</h3>
                 <div class="col-12 col-md-6 col-lg-4">
                     <div class="bg-white p-3 rounded-3 shadow-sm h-100 d-flex align-items-center">
                         {{ if .image }}
-                        <img src="{{ .image }}" alt="{{ .name }}" width="40" height="40" class="me-3 flex-shrink-0">
+                        <img src="{{ partial "img-src.html" (dict "src" .image "width" 120) }}" loading="lazy" alt="{{ .name }}" width="40" height="40" class="me-3 flex-shrink-0">
                         {{ else }}
                         <div class="bg-main rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 40px; height: 40px;">
                             <i class="fas fa-brain text-white"></i>
diff --git a/layouts/team/list.html b/layouts/team/list.html
index bd64e02..c82f8c1 100644
--- a/layouts/team/list.html
+++ b/layouts/team/list.html
@@ -1,6 +1,6 @@
 {{ 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');">
+<section class="hero teamSect d-flex justify-content-center align-items-center position-relative" 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">
@@ -43,7 +43,7 @@ <h4 class="inter-600 dark-900 text-32 pb-5">Current Membership of the Executive
               {{ range $index, $element := .team_members }}
               <div class="col-6 col-sm-4 col-md-3 team-member {{ if gt $index 7 }}d-none{{ end }}" data-index="{{ $index }}">
                 <div class="h-100 bg-white rounded-3 p-md-4 p-2 shadow-sm pb-md-3">
-                  <img src="{{ $element.image }}" alt="" class="img-fluid rounded-3">
+                  <img src="{{ partial "img-src.html" (dict "src" $element.image "width" 800) }}" loading="lazy" alt="" class="img-fluid rounded-3">
                   <h5 class="inter-700 text-20 dark-900 pt-4">{{ $element.name | markdownify }}</h5>
                   {{ if $element.post }}<p class="inter-400 text-14 dark-900">{{ $element.post | markdownify }}</p>{{ end }}
                 </div>
@@ -117,7 +117,7 @@ <h4 class="inter-600 dark-900 text-32 pb-5">Current Membership of the Technical
           {{ range $i, $p := .team_members }}
           <div class="col-12 col-sm-4 col-md-3 team-member-tech {{ if gt $i 7 }}d-none{{ end }}" data-index="{{ $i }}">
             <div class="h-100 bg-white rounded-3 p-2 p-md-4 shadow-sm pb-md-3">
-              <img src="{{ $p.image }}" alt="" class="img-fluid rounded-3">
+              <img src="{{ partial "img-src.html" (dict "src" $p.image "width" 800) }}" loading="lazy" alt="" class="img-fluid rounded-3">
               <h5 class="inter-700 text-20 dark-900 pt-4">{{ $p.name | markdownify }}</h5>
               {{ if $p.post }}<p class="inter-400 text-14 dark-900">{{ $p.post | markdownify }}</p>{{ end }}
             </div>
@@ -182,7 +182,7 @@ <h3 class="inter-600 dark-900 text-36">NWB Core Software</h3>
                 <div class="col-6 col-sm-4 col-md-3">
                     <div class="h-100 bg-white rounded-3 p-4 shadow-sm pb-2 d-flex flex-column justify-content-between">
                         <div class="d-flex flex-column justify-content-center align-items-center">
-                            <img src="{{ .image }}" alt="" class="img-fluid rounded-3">
+                            <img src="{{ partial "img-src.html" (dict "src" .image "width" 800) }}" loading="lazy" alt="" class="img-fluid rounded-3">
                         </div>
                         <div>
                           <h5 class="inter-700 text-20 dark-900 pt-4">{{ .name | markdownify }}</h5>
@@ -206,7 +206,7 @@ <h3 class="inter-600 dark-900 text-36">NWB Community Liaison</h3>
                 <div class="col-6 col-sm-4 col-md-3">
                     <div class="h-100 bg-white rounded-3 p-4 shadow-sm pb-2 d-flex flex-column justify-content-between">
                         <div class="d-flex flex-column justify-content-center align-items-center">
-                            <img src="{{ .image }}" alt="" class="img-fluid rounded-3">
+                            <img src="{{ partial "img-src.html" (dict "src" .image "width" 800) }}" loading="lazy" alt="" class="img-fluid rounded-3">
                         </div>
                         <div>
                             <h5 class="inter-700 text-20 dark-900 pt-4">{{ .name | markdownify }}</h5>
@@ -230,7 +230,7 @@ <h3 class="inter-600 dark-900 text-36">Previous Members</h3>
                 <div class="col-6 col-sm-4 col-md-3">
                     <div class="h-100 bg-white rounded-3 p-4 shadow-sm pb-2 d-flex flex-column justify-content-between">
                         <div class="d-flex flex-column justify-content-center align-items-center">
-                            <img src="{{ .image }}" alt="" class="img-fluid rounded-3">
+                            <img src="{{ partial "img-src.html" (dict "src" .image "width" 800) }}" loading="lazy" alt="" class="img-fluid rounded-3">
                         </div>
                         <div>
                           <h5 class="inter-700 text-20 dark-900 pt-4">{{ .name | markdownify }}</h5>
diff --git a/layouts/tools/list.html b/layouts/tools/list.html
index bff2075..d1540b1 100644
--- a/layouts/tools/list.html
+++ b/layouts/tools/list.html
@@ -1,6 +1,6 @@
 {{ 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');">
+<section class="hero teamSect d-flex justify-content-center align-items-center position-relative" 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">
diff --git a/layouts/tools/single.html b/layouts/tools/single.html
index 3c9f5aa..c5706d8 100644
--- a/layouts/tools/single.html
+++ b/layouts/tools/single.html
@@ -1,6 +1,6 @@
 {{ 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');">
+<section class="hero teamSect d-flex justify-content-center align-items-center position-relative" 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">
diff --git a/layouts/working-groups/list.html b/layouts/working-groups/list.html
index 7546d4a..e9cf560 100644
--- a/layouts/working-groups/list.html
+++ b/layouts/working-groups/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">
@@ -33,7 +33,7 @@ <h3 class="inter-700 dark-900 mb-4 {{ if .bg_white }}text-32{{ else }}text-48{{
                 <p class="inter-400 text-16 black-700 softwareSectA">{{ .content | markdownify }}</p>
             </div>
             <div class="col-sm-10 col-md-5">
-                <img src="{{ .image }}" alt="" class="img-fluid rounded-3">
+                <img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid rounded-3">
             </div>
         </div>
     </div>
@@ -52,7 +52,7 @@ <h3 class="inter-700 text-48 dark-900 text-center">Past Working Groups</h3>
         <div
             class="row justify-content-center justify-content-md-between align-items-center {{ if not (modBool $i 2) }}flex-row-reverse{{ end }} mt-5">
             <div class="col-sm-10 col-md-5">
-                <img src="{{ .image }}" alt="" class="img-fluid rounded-3">
+                <img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid rounded-3">
             </div>
             <div class="col-sm-10 col-md-6">
                 <h3 class="inter-700 dark-900 mb-4 text-32">{{
diff --git a/static/images/essentials/aboutBg.png b/static/images/essentials/aboutBg.png
deleted file mode 100644
index ac965e3..0000000
Binary files a/static/images/essentials/aboutBg.png and /dev/null differ
diff --git a/static/images/essentials/aboutBg.webp b/static/images/essentials/aboutBg.webp
new file mode 100644
index 0000000..49d03c6
Binary files /dev/null and b/static/images/essentials/aboutBg.webp differ
diff --git a/static/images/essentials/ctaBg.png b/static/images/essentials/ctaBg.png
deleted file mode 100644
index 4346988..0000000
Binary files a/static/images/essentials/ctaBg.png and /dev/null differ
diff --git a/static/images/essentials/ctaBg.webp b/static/images/essentials/ctaBg.webp
new file mode 100644
index 0000000..1602d62
Binary files /dev/null and b/static/images/essentials/ctaBg.webp differ
diff --git a/static/images/essentials/eventsBg.png b/static/images/essentials/eventsBg.png
deleted file mode 100644
index a47ddb6..0000000
Binary files a/static/images/essentials/eventsBg.png and /dev/null differ
diff --git a/static/images/essentials/eventsBg.webp b/static/images/essentials/eventsBg.webp
new file mode 100644
index 0000000..60967ba
Binary files /dev/null and b/static/images/essentials/eventsBg.webp differ
diff --git a/static/images/essentials/newsBg.png b/static/images/essentials/newsBg.png
deleted file mode 100644
index 1e6010f..0000000
Binary files a/static/images/essentials/newsBg.png and /dev/null differ
diff --git a/static/images/essentials/newsBg.webp b/static/images/essentials/newsBg.webp
new file mode 100644
index 0000000..5016173
Binary files /dev/null and b/static/images/essentials/newsBg.webp differ
diff --git a/static/images/essentials/newsPageBg.webp b/static/images/essentials/newsPageBg.webp
new file mode 100644
index 0000000..d6c052d
Binary files /dev/null and b/static/images/essentials/newsPageBg.webp differ
diff --git a/static/images/essentials/newspageBg.png b/static/images/essentials/newspageBg.png
deleted file mode 100644
index 2724fbb..0000000
Binary files a/static/images/essentials/newspageBg.png and /dev/null differ
diff --git a/static/images/essentials/softwareBg.png b/static/images/essentials/softwareBg.png
deleted file mode 100644
index ac965e3..0000000
Binary files a/static/images/essentials/softwareBg.png and /dev/null differ
diff --git a/static/images/essentials/softwareBg.webp b/static/images/essentials/softwareBg.webp
new file mode 100644
index 0000000..49d03c6
Binary files /dev/null and b/static/images/essentials/softwareBg.webp differ
diff --git a/static/images/tools/deeplabcut/deeplabcut.gif b/static/images/tools/deeplabcut/deeplabcut.gif
deleted file mode 100644
index d1b6da6..0000000
Binary files a/static/images/tools/deeplabcut/deeplabcut.gif and /dev/null differ
diff --git a/static/images/tools/deeplabcut/deeplabcut.mp4 b/static/images/tools/deeplabcut/deeplabcut.mp4
new file mode 100644
index 0000000..57a56a5
Binary files /dev/null and b/static/images/tools/deeplabcut/deeplabcut.mp4 differ
diff --git a/static/images/tools/deeplabcut/deeplabcut.webp b/static/images/tools/deeplabcut/deeplabcut.webp
new file mode 100644
index 0000000..8b315c0
Binary files /dev/null and b/static/images/tools/deeplabcut/deeplabcut.webp differ
diff --git a/static/images/tools/nwbexplorer/nwbexplorer.gif b/static/images/tools/nwbexplorer/nwbexplorer.gif
deleted file mode 100644
index 35eaf39..0000000
Binary files a/static/images/tools/nwbexplorer/nwbexplorer.gif and /dev/null differ
diff --git a/static/images/tools/nwbexplorer/nwbexplorer.mp4 b/static/images/tools/nwbexplorer/nwbexplorer.mp4
new file mode 100644
index 0000000..9a1e617
Binary files /dev/null and b/static/images/tools/nwbexplorer/nwbexplorer.mp4 differ
diff --git a/static/images/tools/nwbwidgets/jupyter_widgets_demo.gif b/static/images/tools/nwbwidgets/jupyter_widgets_demo.gif
deleted file mode 100644
index c932266..0000000
Binary files a/static/images/tools/nwbwidgets/jupyter_widgets_demo.gif and /dev/null differ
diff --git a/static/images/tools/nwbwidgets/jupyter_widgets_demo.mp4 b/static/images/tools/nwbwidgets/jupyter_widgets_demo.mp4
new file mode 100644
index 0000000..373d2d0
Binary files /dev/null and b/static/images/tools/nwbwidgets/jupyter_widgets_demo.mp4 differ
diff --git a/static/images/tools/sleap/sleap.gif b/static/images/tools/sleap/sleap.gif
deleted file mode 100644
index 9f52ade..0000000
Binary files a/static/images/tools/sleap/sleap.gif and /dev/null differ
diff --git a/static/images/tools/sleap/sleap.mp4 b/static/images/tools/sleap/sleap.mp4
new file mode 100644
index 0000000..5183bdd
Binary files /dev/null and b/static/images/tools/sleap/sleap.mp4 differ
diff --git a/static/images/tools/sleap/sleap.webp b/static/images/tools/sleap/sleap.webp
new file mode 100644
index 0000000..a0b8758
Binary files /dev/null and b/static/images/tools/sleap/sleap.webp differ
diff --git a/static/images/tools/suite2p/multiselect.gif b/static/images/tools/suite2p/multiselect.gif
deleted file mode 100644
index 46ff32f..0000000
Binary files a/static/images/tools/suite2p/multiselect.gif and /dev/null differ
diff --git a/static/images/tools/suite2p/multiselect.mp4 b/static/images/tools/suite2p/multiselect.mp4
new file mode 100644
index 0000000..26eec79
Binary files /dev/null and b/static/images/tools/suite2p/multiselect.mp4 differ
diff --git a/static/images/tools/visiomode/visiomode-nwb-export.gif b/static/images/tools/visiomode/visiomode-nwb-export.gif
deleted file mode 100644
index 427657a..0000000
Binary files a/static/images/tools/visiomode/visiomode-nwb-export.gif and /dev/null differ
diff --git a/static/images/tools/visiomode/visiomode-nwb-export.mp4 b/static/images/tools/visiomode/visiomode-nwb-export.mp4
new file mode 100644
index 0000000..7860f6b
Binary files /dev/null and b/static/images/tools/visiomode/visiomode-nwb-export.mp4 differ