🙆‍♀️

Next.jsで、画像アップロード時に Webp変換する

2021/04/25に公開

概要:

前のNext.jsの、画像アップロードに Webp画像変換を追加する例となります
npm は、sharp を使う例です


環境

  • Next.js : 10.1.3
  • react: 17.0.2
  • node 14
  • npm / sharp
  • npm / multer

関連

https://qiita.com/Black-Yamasan/items/3f3b73e422dce883f498


前の参考ページ

https://zenn.dev/knaka0209/books/2f0e049833a8c4/viewer/0a4980


参考のコード

https://gist.github.com/kuc-arc-f/2abe3dc7047c598db7a8231bb9cf3d2d

file_upload.js :

webp変換部分で、 quality =75 にした場合

実行すると 指定フォルダに、webp形式画像が保存されます

file_upload.js
const changeWebpImages = (imgPath, outputDir, outputFilePath) => {
  const fileName = outputFilePath.split('/').reverse()[0]; // 拡張子を含む画像ファイル名
  const imgName = fileName.split('.')[0]; // 拡張子を除く画像ファイル名
  sharp(imgPath)
    .webp({
      quality: 75
    })
    .toFile(`${outputDir}${imgName}.webp`, (err) => {
      if ( err ) console.error(err);
      return;
    });
};

....

Discussion