Merge pull request #9 from euglena1215/euglena1215/image-optimize2

pre resize images

package.json

@@ -69,6 +69,7 @@
     "axios": "^0.25.0",
     "bezier-easing": "^2.1.0",
     "fastify": "^3.25.3",
+    "fastify-modern-images": "^0.1.2",
     "fastify-sensible": "^3.1.2",
     "fastify-static": "^4.5.0",
     "framer-motion": "^6.2.8",

src/client/foundation/components/media/TrimmedImage/TrimmedImage.jsx

@@ -1,34 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 /**
  * アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小したサイズを返す
  */
 
-/**
- * @typedef Size
- * @property {number} width
- * @property {number} height
- */
-
-/** @type {(cv: Size, img: Size) => Size} */
-const calcImageSize = (cv, img) => {
-  const constrainedHeight = cv.width * (img.height / img.width);
-
-  if (constrainedHeight >= cv.height) {
-    return {
-      height: constrainedHeight,
-      width: cv.width,
-    };
-  }
-
-  const constrainedWidth = cv.height * (img.width / img.height);
-
-  return {
-    height: cv.height,
-    width: constrainedWidth,
-  };
-};
-
 /**
  * @typedef Props
  * @property {string} src
@@ -38,32 +13,15 @@ const calcImageSize = (cv, img) => {
 
 /** @type {React.VFC<Props>} */
 export const TrimmedImage = ({ height, src, width }) => {
-  const [dataUrl, setDataUrl] = useState(null);
-
-  useEffect(() => {
-    const img = new Image();
-    img.src = src;
-    img.onload = () => {
-      const canvas = document.createElement("canvas");
-      canvas.width = width;
-      canvas.height = height;
 
-      const size = calcImageSize(
-        { height: canvas.height, width: canvas.width },
-        { height: img.height, width: img.width },
-      );
-
-      const ctx = canvas.getContext("2d");
-      ctx.drawImage(
-        img,
-        -(size.width - canvas.width) / 2,
-        -(size.height - canvas.height) / 2,
-        size.width,
-        size.height,
-      );
-      setDataUrl(canvas.toDataURL());
-    };
-  }, [height, src, width]);
-
-  return <img src={dataUrl} />;
+  if (width === 100 & height === 100) {
+    const url = src.replace('.jpg', '_100x100.avif')
+    return <img src={url} />;
+  }
+  if (width === 400 & height === 225) {
+    const url = src.replace('.jpg', '_400x225.avif')
+    return <img src={url} />;
+  }
+
+  return <img src={src} />;
 };

src/server/routes/spa.js

@@ -1,6 +1,7 @@
 import { join } from "path";
 
 import compression from "@fastify/compress";
+// import modernImages from "fastify-modern-images";
 import fastifyStatic from "fastify-static";
 
 /**
@@ -12,6 +13,7 @@ export const spaRoute = async (fastify) => {
     root: join(__dirname, "public"),
     wildcard: false,
   });
+  // fastify.register(modernImages, { quality: 1 });
 
   fastify.get("/favicon.ico", () => {
     throw fastify.httpErrors.notFound();