設定・環境構築
【自動化】eyecatch画像の一括WebP変換で31MB削減した方法
Share
概要: ブログ55記事のeyecatch画像をPNG→WebPに一括変換し、合計31MBのサイズ削減を実現。sharpでの変換、R2への再アップロード、NotionのURL自動更新までのスクリプトを公開。
はじめに
eyecatch画像をGemini APIで自動生成してR2に保存していたが、全てPNG形式でサイズが大きかった。再生成せずに既存画像をWebPに変換したい。
この記事でわかること
-
sharpを使ったPNG→WebP一括変換
-
Cloudflare R2へのダウンロード→変換→再アップロード
-
Notion APIでEyecatch URLを自動更新
-
実際の削減率（88-96%）
対象読者
-
ブログ画像を最適化したい方
-
R2で画像ホスティングしている方
1. スクリプトの流れ
-
Notion APIで全記事のEyecatch URLを取得
-
PNGのURLをフィルタ
-
R2からPNGをダウンロード
-
sharpでWebPに変換（quality: 85）
-
WebPをR2にアップロード
-
NotionのEyecatchとカバー画像を更新
2. 変換コード
import sharp from 'sharp';
async function uploadToR2(buffer, filename) {
const webpBuffer = await sharp(buffer)
.webp({ quality: 85 })
.toBuffer();
const webpFilename = filename.replace(/\.png$/, '.webp');
// R2にアップロード...
}
3. 実行結果
55枚全て成功、31.41MB削減。
個別の削減率:
-
595KB → 27KB（96%削減）
-
662KB → 57KB（91%削減）
-
706KB → 78KB（89%削減）
平均で90%以上のサイズ削減。
Tips
-
sharpはdevDependenciesでOK。スクリプト専用なのでビルドに影響しない -
quality: 85で見た目の差はほぼないがサイズは劇的に減る
-
既存のPNGを削除せずWebPを追加する形なのでロールバック可能
参考リンク
まとめ
-
PNG→WebPで90%以上のサイズ削減が可能
-
sharp + R2 + Notion APIの組み合わせで全自動化
-
新規記事は生成時に自動WebP変換される
この記事が役に立ったら共有しよう
Share
Koki
フルスタックエンジニア / React, Next.js, TypeScript
