【自動化】eyecatch画像の一括WebP変換で31MB削減した方法
実装約3分で読めます
この記事でわかること
- 既存の PNG を再生成せずに WebP に変換するバッチ処理の流れ
- sharp での変換と、R2 への再アップロード、Notion の URL 更新までを繋ぐスクリプト
- 実際の削減率（55 枚で 31MB、個別に 89〜96%）
- 万一のときに戻せるようにしておく手順
Node.js でスクリプトを実行できること。画像を R2（または S3 互換ストレージ）に置いていること。
概要: ブログ55記事のeyecatch画像をPNG→WebPに一括変換し、合計31MBのサイズ削減を実現。sharpでの変換、R2への再アップロード、NotionのURL自動更新までのスクリプトを公開。
はじめに
eyecatch画像をGemini APIで自動生成してR2に保存していたが、全てPNG形式でサイズが大きかった。再生成せずに既存画像をWebPに変換したい。
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
Tips
sharp は devDependencies で OK。スクリプト専用なのでビルドに影響しないTips
quality: 85 で見た目の差はほぼないがサイズは劇的に減る。幾何学模様のような平坦な画像ほど効きますTips
既存の PNG を削除せず WebP を追加する形にしておくと、URL を戻すだけでロールバックできます。ストレージは安いので、消すのは落ち着いてからで十分
注意
Notion の URL を書き換える前に、WebP が実際に取得できるか確かめてください。アップロードの失敗に気づかずに URL だけ先に差し替えると、全記事のアイキャッチが一斉に壊れます。
参考リンク
まとめ
- PNG→WebPで90%以上のサイズ削減が可能
- sharp + R2 + Notion APIの組み合わせで全自動化
- 新規記事は生成時に自動WebP変換される
更新履歴
- 自動目次を追加。箸条書きの Tips を callout に統一し、URL を先に差し替えると全記事のアイキャッチが壊れるリスクを警告として追加。参考リンクに関連記事を追加。「この記事でわかること」「対象読者」を概要プロパティへ移動。
