diff --git a/assets/css/style.css b/assets/css/style.css
index 9708038..3d89a12 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;
   }
 }
diff --git a/hugo.yaml b/hugo.yaml
index df8463b..c85e82d 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -24,3 +24,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..66c3347 100644
--- a/layouts/archives/list.html
+++ b/layouts/archives/list.html
@@ -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..ab929b2 100644
--- a/layouts/community/educators.html
+++ b/layouts/community/educators.html
@@ -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..6f1d550 100644
--- a/layouts/community/gallery.html
+++ b/layouts/community/gallery.html
@@ -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/contact-us/list.html b/layouts/contact-us/list.html
index 114f53b..17433e2 100644
--- a/layouts/contact-us/list.html
+++ b/layouts/contact-us/list.html
@@ -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..a9039fc 100644
--- a/layouts/convert/list.html
+++ b/layouts/convert/list.html
@@ -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..8710a62 100644
--- a/layouts/enhancement-proposals/list.html
+++ b/layouts/enhancement-proposals/list.html
@@ -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..c7ff447 100644
--- a/layouts/event-cards/list.html
+++ b/layouts/event-cards/list.html
@@ -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/grants-and-projects/list.html b/layouts/grants-and-projects/list.html
index 06eed4b..e4303e6 100644
--- a/layouts/grants-and-projects/list.html
+++ b/layouts/grants-and-projects/list.html
@@ -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..ec718cc 100644
--- a/layouts/news/list.html
+++ b/layouts/news/list.html
@@ -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..0115450 100644
--- a/layouts/news/single.html
+++ b/layouts/news/single.html
@@ -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..1b62780 100644
--- a/layouts/online-resources/list.html
+++ b/layouts/online-resources/list.html
@@ -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..598520c 100644
--- a/layouts/policies/list.html
+++ b/layouts/policies/list.html
@@ -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..d79d6ca 100644
--- a/layouts/publications/list.html
+++ b/layouts/publications/list.html
@@ -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..cea78b4 100644
--- a/layouts/team/list.html
+++ b/layouts/team/list.html
@@ -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/working-groups/list.html b/layouts/working-groups/list.html
index 7546d4a..38376d7 100644
--- a/layouts/working-groups/list.html
+++ b/layouts/working-groups/list.html
@@ -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">{{