diff --git a/public/images/themes-auto-dark.png b/public/images/themes-auto-dark.png
deleted file mode 100644
index 11e78f69..00000000
Binary files a/public/images/themes-auto-dark.png and /dev/null differ
diff --git a/public/images/themes-auto-dark.webp b/public/images/themes-auto-dark.webp
new file mode 100644
index 00000000..6a78ef1f
Binary files /dev/null and b/public/images/themes-auto-dark.webp differ
diff --git a/public/images/themes-auto-light.png b/public/images/themes-auto-light.png
deleted file mode 100644
index 2c8368ba..00000000
Binary files a/public/images/themes-auto-light.png and /dev/null differ
diff --git a/public/images/themes-auto-light.webp b/public/images/themes-auto-light.webp
new file mode 100644
index 00000000..31d3093f
Binary files /dev/null and b/public/images/themes-auto-light.webp differ
diff --git a/public/images/themes-bootstrap-4-dark.png b/public/images/themes-bootstrap-4-dark.png
deleted file mode 100644
index 24eb6611..00000000
Binary files a/public/images/themes-bootstrap-4-dark.png and /dev/null differ
diff --git a/public/images/themes-bootstrap-4-dark.webp b/public/images/themes-bootstrap-4-dark.webp
new file mode 100644
index 00000000..8e15d994
Binary files /dev/null and b/public/images/themes-bootstrap-4-dark.webp differ
diff --git a/public/images/themes-bootstrap-4-light.png b/public/images/themes-bootstrap-4-light.png
deleted file mode 100644
index 52935457..00000000
Binary files a/public/images/themes-bootstrap-4-light.png and /dev/null differ
diff --git a/public/images/themes-bootstrap-4-light.webp b/public/images/themes-bootstrap-4-light.webp
new file mode 100644
index 00000000..d6315c99
Binary files /dev/null and b/public/images/themes-bootstrap-4-light.webp differ
diff --git a/public/images/themes-bootstrap-5-dark.png b/public/images/themes-bootstrap-5-dark.png
deleted file mode 100644
index 19f46511..00000000
Binary files a/public/images/themes-bootstrap-5-dark.png and /dev/null differ
diff --git a/public/images/themes-bootstrap-5-dark.webp b/public/images/themes-bootstrap-5-dark.webp
new file mode 100644
index 00000000..a9f3b01a
Binary files /dev/null and b/public/images/themes-bootstrap-5-dark.webp differ
diff --git a/public/images/themes-bootstrap-5-light.png b/public/images/themes-bootstrap-5-light.png
deleted file mode 100644
index b42db447..00000000
Binary files a/public/images/themes-bootstrap-5-light.png and /dev/null differ
diff --git a/public/images/themes-bootstrap-5-light.webp b/public/images/themes-bootstrap-5-light.webp
new file mode 100644
index 00000000..e2ad80ad
Binary files /dev/null and b/public/images/themes-bootstrap-5-light.webp differ
diff --git a/public/images/themes-bulma-dark.png b/public/images/themes-bulma-dark.png
deleted file mode 100644
index b2195b43..00000000
Binary files a/public/images/themes-bulma-dark.png and /dev/null differ
diff --git a/public/images/themes-bulma-dark.webp b/public/images/themes-bulma-dark.webp
new file mode 100644
index 00000000..fb84f235
Binary files /dev/null and b/public/images/themes-bulma-dark.webp differ
diff --git a/public/images/themes-bulma-light.png b/public/images/themes-bulma-light.png
deleted file mode 100644
index 1e605776..00000000
Binary files a/public/images/themes-bulma-light.png and /dev/null differ
diff --git a/public/images/themes-bulma-light.webp b/public/images/themes-bulma-light.webp
new file mode 100644
index 00000000..e16a9bd2
Binary files /dev/null and b/public/images/themes-bulma-light.webp differ
diff --git a/public/images/themes-dark.png b/public/images/themes-dark.png
deleted file mode 100644
index 0dc586d8..00000000
Binary files a/public/images/themes-dark.png and /dev/null differ
diff --git a/public/images/themes-dark.webp b/public/images/themes-dark.webp
new file mode 100644
index 00000000..7229804b
Binary files /dev/null and b/public/images/themes-dark.webp differ
diff --git a/public/images/themes-material-ui-dark.png b/public/images/themes-material-ui-dark.png
deleted file mode 100644
index 592ac995..00000000
Binary files a/public/images/themes-material-ui-dark.png and /dev/null differ
diff --git a/public/images/themes-material-ui-dark.webp b/public/images/themes-material-ui-dark.webp
new file mode 100644
index 00000000..eb6010b0
Binary files /dev/null and b/public/images/themes-material-ui-dark.webp differ
diff --git a/public/images/themes-material-ui-light.png b/public/images/themes-material-ui-light.png
deleted file mode 100644
index ee9a8ce7..00000000
Binary files a/public/images/themes-material-ui-light.png and /dev/null differ
diff --git a/public/images/themes-material-ui-light.webp b/public/images/themes-material-ui-light.webp
new file mode 100644
index 00000000..acafc92e
Binary files /dev/null and b/public/images/themes-material-ui-light.webp differ
diff --git a/src/components/Themes.tsx b/src/components/Themes.tsx
index 9c07442a..dd59510f 100644
--- a/src/components/Themes.tsx
+++ b/src/components/Themes.tsx
@@ -19,7 +19,7 @@ export function Themes() {
               <td>
                 <h4>dark</h4>
                 <img
-                  src="/images/themes-dark.png"
+                  src="/images/themes-dark.webp"
                   alt="SweetAlert2 Dark Theme"
                   width={300}
                   height={143}
@@ -52,13 +52,13 @@ export function Themes() {
                 <h4>auto</h4>
                 <div className="theme-comparison">
                   <img
-                    src="/images/themes-auto-light.png"
+                    src="/images/themes-auto-light.webp"
                     alt="SweetAlert2 Auto Theme Light"
                     loading="lazy"
                     decoding="async"
                   />
                   <img
-                    src="/images/themes-auto-dark.png"
+                    src="/images/themes-auto-dark.webp"
                     alt="SweetAlert2 Auto Theme Dark"
                     loading="lazy"
                     decoding="async"
@@ -90,13 +90,13 @@ export function Themes() {
                 <h4>bootstrap-5</h4>
                 <div className="theme-comparison">
                   <img
-                    src="/images/themes-bootstrap-5-light.png"
+                    src="/images/themes-bootstrap-5-light.webp"
                     alt="SweetAlert2 Bootstrap 5 Theme Light"
                     loading="lazy"
                     decoding="async"
                   />
                   <img
-                    src="/images/themes-bootstrap-5-dark.png"
+                    src="/images/themes-bootstrap-5-dark.webp"
                     alt="SweetAlert2 Bootstrap 5 Theme Dark"
                     loading="lazy"
                     decoding="async"
@@ -132,13 +132,13 @@ Swal.fire({
                 <h4>bootstrap-4</h4>
                 <div className="theme-comparison">
                   <img
-                    src="/images/themes-bootstrap-4-light.png"
+                    src="/images/themes-bootstrap-4-light.webp"
                     alt="SweetAlert2 Bootstrap 4 Theme Light"
                     loading="lazy"
                     decoding="async"
                   />
                   <img
-                    src="/images/themes-bootstrap-4-dark.png"
+                    src="/images/themes-bootstrap-4-dark.webp"
                     alt="SweetAlert2 Bootstrap 4 Theme Dark"
                     loading="lazy"
                     decoding="async"
@@ -174,13 +174,13 @@ Swal.fire({
                 <h4>material-ui</h4>
                 <div className="theme-comparison">
                   <img
-                    src="/images/themes-material-ui-light.png"
+                    src="/images/themes-material-ui-light.webp"
                     alt="SweetAlert2 Material UI Theme Light"
                     loading="lazy"
                     decoding="async"
                   />
                   <img
-                    src="/images/themes-material-ui-dark.png"
+                    src="/images/themes-material-ui-dark.webp"
                     alt="SweetAlert2 Material UI Theme Dark"
                     loading="lazy"
                     decoding="async"
@@ -216,13 +216,13 @@ Swal.fire({
                 <h4>bulma</h4>
                 <div className="theme-comparison">
                   <img
-                    src="/images/themes-bulma-light.png"
+                    src="/images/themes-bulma-light.webp"
                     alt="SweetAlert2 Bulma Theme Light"
                     loading="lazy"
                     decoding="async"
                   />
                   <img
-                    src="/images/themes-bulma-dark.png"
+                    src="/images/themes-bulma-dark.webp"
                     alt="SweetAlert2 Bulma Theme Dark"
                     loading="lazy"
                     decoding="async"