jpgをwebpに置き換え&リサイズ

client/src/utils/get_path.js

@@ -3,7 +3,7 @@
  * @returns {string}
  */
 function getImagePath(imageId) {
-  return `/images/${imageId}.jpg`;
+  return `/images/${imageId}.webp`;
 }
 
 /**
@@ -27,7 +27,7 @@ function getSoundPath(soundId) {
  * @returns {string}
  */
 function getProfileImagePath(profileImageId) {
-  return `/images/profiles/${profileImageId}.jpg`;
+  return `/images/profiles/${profileImageId}.webp`;
 }
 
 export { getImagePath, getMoviePath, getSoundPath, getProfileImagePath };

server/convert_jpg2webp.js

@@ -0,0 +1,33 @@
+import fs from 'fs/promises'
+import path from 'path'
+import { PUBLIC_PATH } from './src/paths.js'
+import sharp from 'sharp'
+
+const dir = path.resolve(PUBLIC_PATH, './images')
+// const dir = path.resolve(PUBLIC_PATH, './images/profiles')
+
+;(async () => {
+  const files = await fs.readdir(dir)
+
+  for (const file of files) {
+    if (path.extname(file) !== '.jpg') continue
+
+    const newFile = `${path.basename(file, '.jpg')}.webp`
+
+    await sharp(path.resolve(dir, file))
+      .resize({
+        fit: 'contain',
+        width: 640,
+      })
+      // .resize({
+      //   fit: 'contain',
+      //   width: 128,
+      //   position: 'top',
+      //   withoutEnlargement: true
+      // })
+      .toFormat('webp')
+      .toFile(path.resolve(dir, `./${newFile}`))
+
+    console.log(`outputed: ${newFile}`)
+  }
+})()

server/package.json

@@ -10,7 +10,8 @@
     "start": "babel-node --experimental-wasm-threads src/index.js",
     "prestart:clean": "rimraf ../upload",
     "prestart:init": "mkdirp ../upload/images ../upload/movies ../upload/sounds",
-    "convert:movie": "babel-node --experimental-wasm-threads convert_gif2webm.js"
+    "convert:movie": "babel-node --experimental-wasm-threads convert_gif2webm.js",
+    "convert:img": "babel-node convert_jpg2webp.js"
   },
   "dependencies": {
     "@babel/core": "7.16.0",

server/src/converters/convert_image.js

@@ -15,7 +15,7 @@ async function convertImage(buffer, options) {
       height: options.height,
       width: options.width,
     })
-    .toFormat(options.extension ?? 'jpeg')
+    .toFormat(options.extension ?? 'webp')
     .toBuffer();
 }
 

server/src/routes/api/image.js

@@ -9,7 +9,7 @@ import { convertImage } from '../../converters/convert_image';
 import { UPLOAD_PATH } from '../../paths';
 
 // 変換した画像の拡張子
-const EXTENSION = 'jpg';
+const EXTENSION = 'webp';
 
 const router = Router();
 
@@ -29,7 +29,7 @@ router.post('/images', async (req, res) => {
     // 画像の縦サイズを指定する (undefined は元画像に合わせる)
     height: undefined,
     // 画像の横サイズを指定する (undefined は元画像に合わせる)
-    width: undefined,
+    width: 640,
   });
 
   const filePath = path.resolve(UPLOAD_PATH, `./images/${imageId}.${EXTENSION}`);