diff --git a/src/assets/editor_example_1.png b/src/assets/editor_example_1.png
deleted file mode 100644
index f24f6e41..00000000
Binary files a/src/assets/editor_example_1.png and /dev/null differ
diff --git a/src/assets/editor_example_1.webp b/src/assets/editor_example_1.webp
new file mode 100644
index 00000000..79285336
Binary files /dev/null and b/src/assets/editor_example_1.webp differ
diff --git a/src/assets/editor_example_1_more_square.png b/src/assets/editor_example_1_more_square.png
deleted file mode 100644
index 34b1e99c..00000000
Binary files a/src/assets/editor_example_1_more_square.png and /dev/null differ
diff --git a/src/assets/editor_example_1_more_square.webp b/src/assets/editor_example_1_more_square.webp
new file mode 100644
index 00000000..08769252
Binary files /dev/null and b/src/assets/editor_example_1_more_square.webp differ
diff --git a/src/assets/editor_example_2.png b/src/assets/editor_example_2.png
deleted file mode 100644
index 5f1b9e6c..00000000
Binary files a/src/assets/editor_example_2.png and /dev/null differ
diff --git a/src/assets/editor_example_2.webp b/src/assets/editor_example_2.webp
new file mode 100644
index 00000000..5563eacf
Binary files /dev/null and b/src/assets/editor_example_2.webp differ
diff --git a/src/assets/example_schematic.png b/src/assets/example_schematic.png
deleted file mode 100644
index da81fad8..00000000
Binary files a/src/assets/example_schematic.png and /dev/null differ
diff --git a/src/assets/example_schematic.webp b/src/assets/example_schematic.webp
new file mode 100644
index 00000000..962f297c
Binary files /dev/null and b/src/assets/example_schematic.webp differ
diff --git a/src/components/OptimizedImage.tsx b/src/components/OptimizedImage.tsx
index 216b6f36..e5e2cc72 100644
--- a/src/components/OptimizedImage.tsx
+++ b/src/components/OptimizedImage.tsx
@@ -19,11 +19,36 @@ export function OptimizedImage({
 }: OptimizedImageProps) {
   const [imageLoading, setImageLoading] = useState(true)
 
+  const generateSrcSet = (format: string) => {
+    const sizes = [320, 640, 960, 1280, 1920]
+    return sizes
+      .map((size) => `${src}?format=${format}&w=${size} ${size}w`)
+      .join(", ")
+  }
+
+  const getSizes = () => {
+    if (width) {
+      // If width is specified, use it as a max-width
+      return `(max-width: ${width}px) 100vw, ${width}px`
+    }
+    // Default responsive sizes
+    return "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+  }
+
   return (
     <picture>
-      <source srcSet={`${src}?format=webp`} type="image/webp" />
+      <source
+        type="image/avif"
+        srcSet={generateSrcSet("avif")}
+        sizes={getSizes()}
+      />
+      <source
+        type="image/webp"
+        srcSet={generateSrcSet("webp")}
+        sizes={getSizes()}
+      />
       <img
-        src={src}
+        src={`${src}?format=webp&w=${width || 1280}`}
         alt={alt}
         width={width}
         height={height}