HeroImageを最適化して高速化

cp-20 · Mar 24, 2024 · 15f9c4b · 15f9c4b
1 parent 91bf85b
commit 15f9c4b
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 1 deletion.
diff --git a/workspaces/app/src/pages/TopPage/internal/HeroImage.tsx b/workspaces/app/src/pages/TopPage/internal/HeroImage.tsx
@@ -14,7 +14,14 @@ const _Image = styled.img`
 export const HeroImage: React.FC = () => {
   return (
     <_Wrapper>
-      <_Image alt="Cyber TOON" src={'/assets/images/hero.avif'} />
+      <_Image
+        alt="Cyber TOON"
+        decoding="async"
+        loading="eager"
+        sizes="(max-width: 1024px) 100vw, 1024px"
+        src="/assets/images/hero_1024.avif"
+        srcSet="/assets/images/hero_256.avif 256w,/assets/images/hero_384.avif 384w,/assets/images/hero_512.avif 512w,/assets/images/hero_768.avif 768w,/assets/images/hero_1024.avif 1024w"
+      />
     </_Wrapper>
   );
 };
diff --git a/workspaces/client/assets/images/hero_1024.avif b/workspaces/client/assets/images/hero_1024.avif
diff --git a/workspaces/client/assets/images/hero_256.avif b/workspaces/client/assets/images/hero_256.avif
diff --git a/workspaces/client/assets/images/hero_384.avif b/workspaces/client/assets/images/hero_384.avif
diff --git a/workspaces/client/assets/images/hero_512.avif b/workspaces/client/assets/images/hero_512.avif
diff --git a/workspaces/client/assets/images/hero_768.avif b/workspaces/client/assets/images/hero_768.avif
diff --git a/workspaces/scripts/hero-image.ts b/workspaces/scripts/hero-image.ts
@@ -0,0 +1,16 @@
+import sharp from 'sharp';
+
+const assetsDir = '../client/assets/images/hero.avif';
+
+const widths = [1024, 768, 512, 384, 256];
+
+await Promise.all(
+  widths.map(async (width) => {
+    const output = `${assetsDir.replace('.avif', `_${width}.avif`)}`;
+    await sharp(assetsDir)
+      .resize(width)
+      .avif({ quality: 30 })
+      .toFile(output)
+      .then(() => console.log(`Compressed ${assetsDir} to ${output}`));
+  }),
+);