png to webp, and properly size images

tscircuit · Jan 11, 2025 · e24002b · e24002b
1 parent 4aaa975
commit e24002b
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 2 deletions.
diff --git a/src/assets/editor_example_1.png b/src/assets/editor_example_1.png
diff --git a/src/assets/editor_example_1.webp b/src/assets/editor_example_1.webp
diff --git a/src/assets/editor_example_1_more_square.png b/src/assets/editor_example_1_more_square.png
diff --git a/src/assets/editor_example_1_more_square.webp b/src/assets/editor_example_1_more_square.webp
diff --git a/src/assets/editor_example_2.png b/src/assets/editor_example_2.png
diff --git a/src/assets/editor_example_2.webp b/src/assets/editor_example_2.webp
diff --git a/src/assets/example_schematic.png b/src/assets/example_schematic.png
diff --git a/src/assets/example_schematic.webp b/src/assets/example_schematic.webp
diff --git 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}