diff --git a/assets/css/style.css b/assets/css/style.css
index 9708038..969b307 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -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/layouts/archives/list.html b/layouts/archives/list.html
index 521f899..76decab 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">
diff --git a/layouts/community/educators.html b/layouts/community/educators.html
index 539b1e6..738b59e 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">
diff --git a/layouts/community/gallery.html b/layouts/community/gallery.html
index e44ca85..6d67976 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">
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..b7e27df 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">
diff --git a/layouts/convert/list.html b/layouts/convert/list.html
index 1e83288..3a10aaa 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">
diff --git a/layouts/enhancement-proposals/list.html b/layouts/enhancement-proposals/list.html
index f6b325a..37ba1c8 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">
diff --git a/layouts/event-cards/list.html b/layouts/event-cards/list.html
index f2ef9d7..658d9d6 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">
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..f58456a 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">
diff --git a/layouts/news/list.html b/layouts/news/list.html
index cab08cf..7457252 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">
diff --git a/layouts/news/single.html b/layouts/news/single.html
index 9f0c26f..3110879 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 }}
diff --git a/layouts/online-resources/list.html b/layouts/online-resources/list.html
index 59c290a..1836bae 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">
diff --git a/layouts/policies/list.html b/layouts/policies/list.html
index 26360f9..f9acb5a 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">
diff --git a/layouts/publications/list.html b/layouts/publications/list.html
index 019a21b..14d9547 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">
diff --git a/layouts/team/list.html b/layouts/team/list.html
index bd64e02..07da46d 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">
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..add6096 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">
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