9枚で 9.83MB。AI でアイキャッチを作っていると、画像はあっという間にこのくらい重くなります。さすがにこのままブログには載せられないので、リサイズと WebP 変換のスクリプトで一括最適化してみました。結果は 0.38MB、96% 減。しかも9枚まとめて0.57秒です。この記事では、そのスクリプトを全文そのまま置いておきます。「96% も削って画質は平気なの？」という不安にも、実際に目で見て確かめた結果でお答えします。
結論：9.83MB→0.38MB。スクリプト1本で96%軽くなった
結論から言うと、AI生成画像の最適化は、1回スクリプトを作ってしまえば毎回ほぼ手間ゼロになります。やることはたった2つ。
- 表示幅に合わせてリサイズ：元は1536px幅。ブログ本文に合わせて1200pxに縮める
- WebP に変換：見た目はそのままで、ファイルサイズだけが大きく減る
この2つを9枚にまとめてかけた実測が、9.83MB → 0.38MB（96%減）。時間は0.57秒でした。手作業なら15分以上かかる作業が、文字どおり一瞬で終わります。順に説明していきます。
なぜ最適化が要るのか（重い画像はLCPを悪化させる）
そもそも、なぜ画像を軽くする必要があるのか。画像が重いとページの表示が遅くなり、Core Web Vitals という指標、とくに LCP（一番大きい要素が表示されるまでの時間）が悪化します。この指標は検索評価にも効いてきます。
WebP は同じ画質でも JPEG より 25〜34% 小さい形式です（Google 公式の数値）。重いページで画像を WebP に変えるとダウンロードが軽くなり、LCP の改善につながりやすいと web.dev も説明しています。とくに AI が作るイラストや図の PNG は、写真より WebP で激しく縮みます。今回も、効いたのはまさにそこでした。
実測：AI生成画像9枚を変換した結果
では実際の数字を見てください。すべて今日このブログ用に作った本物の画像9枚を、そのまま変換しています。
| 画像 | before | after | 削減 |
|---|---|---|---|
| img-01 | 1,138 KB | 42 KB | 96% |
| img-02 | 2,288 KB | 164 KB | 93% |
| img-03 | 1,025 KB | 37 KB | 96% |
| img-04 | 832 KB | 18 KB | 98% |
| img-05 | 792 KB | 12 KB | 98% |
| img-06 | 877 KB | 14 KB | 98% |
| img-07 | 1,279 KB | 64 KB | 95% |
| img-08 | 848 KB | 11 KB | 99% |
| img-09 | 984 KB | 25 KB | 97% |
| 合計 | 9.83 MB | 0.38 MB | 96% |
9枚で0.57秒、1枚あたり64ミリ秒。準備も拍子抜けするほど軽くて、変換ライブラリの sharp は導入に4.4秒しかかかりません。追加の設定もいりませんでした。
コピペできる変換スクリプト（全文）
Node.js と sharp で動きます。src フォルダに PNG を入れて実行すると、out に WebP が出てきます。
// 事前に: npm install sharp
import sharp from "sharp";
import { readdir, stat, mkdir } from "node:fs/promises";
import path from "node:path";
const SRC = "./src"; // 元PNGを入れるフォルダ
const OUT = "./out"; // WebPの出力先
const MAX_WIDTH = 1200; // 本文の表示幅に合わせる
const QUALITY = 80; // WebP品質（80で十分）
await mkdir(OUT, { recursive: true });
const files = (await readdir(SRC)).filter((f) => f.endsWith(".png"));
for (const f of files) {
const inPath = path.join(SRC, f);
const outPath = path.join(OUT, f.replace(/\.png$/, ".webp"));
await sharp(inPath)
.resize({ width: MAX_WIDTH, withoutEnlargement: true })
.webp({ quality: QUALITY })
.toFile(outPath);
const before = (await stat(inPath)).size;
const after = (await stat(outPath)).size;
console.log(`${f}: ${Math.round(before/1024)}KB → ${Math.round(after/1024)}KB`);
}たった20行ほどです。MAX_WIDTH を自分のブログの本文幅に、QUALITY を好みに変えれば、もうそのまま使えます。
手作業 vs スクリプト
同じことを手作業でやるとどうなるか。画像を1枚ずつ開いて、リサイズして、WebP で書き出して、名前を付け直す。やったことのある人なら分かると思いますが、これが地味に時間を取られるんです。
| 指標 | 手作業（見積もり） | スクリプト（実測） |
|---|---|---|
| 9枚の変換時間 | 約15〜20分 | 0.57秒 |
| 合計サイズ | 9.83 MB | 0.38 MB |
| 手順 | 開く→リサイズ→書き出し→改名 | コマンド1回 |
正直に書くと、手作業の15〜20分は「1枚1〜2分 × 9枚」の見積もりで、人をストップウォッチで測った数字ではありません。一方、スクリプト側の0.57秒とサイズ96%減はどちらも実測です。ここは分けて受け取ってください。
画質は大丈夫か：96%減でも実用な理由
96%減と聞くと、さすがに画質が壊れていないか不安になりますよね。わたしも気になったので、一番情報量の多い1枚（2.2MB→164KB）を目視で確認しました。文字もちゃんと読めて、目立つ劣化はなし。ブログのアイキャッチ用途なら、幅1200px・品質80でまったく困りませんでした。
ただ、数字に驚いても、必ず1枚は自分の目で確かめてください。これは前にAI生成画像の検証記事でも書きましたが、画像は最後に目視するのが結局いちばん安全です。
向かない場面・注意
- 削減率は元画像次第：今回は PNG のイラストなので96%という極端な値です。元が写真の JPEG なら、削減は25〜34%くらいに収まります
- 大きく見せたい写真：作品写真を大きく見せたいときは、品質80・幅1200pxだと物足りないことがあります。そこは品質か幅を上げて調整します
- 古い環境の互換性：ごく古いブラウザは WebP 非対応です。いまの主要ブラウザは対応済みですが、要件次第で JPEG も用意しておきます
念のため補足すると、「いつでも96%減る」ではなく、「AIが作るイラストPNGは劇的に減る」という話です。そこは誇張せずに受け取ってください。
まとめ
- AI生成画像は重い。ブログに載せる前に一括最適化する仕組みを1つ作っておくと、毎回ラクになる
- リサイズ＋WebP変換で、今回は9.83MB→0.38MB（96%減）・0.57秒
- スクリプトは20行ほど。sharp の導入も4.4秒で済む
- 削減率は元画像次第。写真JPEGなら25〜34%が目安
- 削減率の数字に驚いても、必ず1枚は目視で画質を確認する
上のスクリプトはコピペでそのまま動きます。AI でアイキャッチを量産しているなら、最初に1本だけ用意しておくと、あとがずっとラクになりますよ。自動化の仕組みづくりについてはこちらの記事でも触れています。
画像も含めてブログ運用を仕組み化したい方へ
画像の最適化も含めて、ブログ運用をまるごと仕組みにしてしまいたい。そんなときは、AI を使った業務効率化の設計・導入支援もしています。まずは30 分の無料相談から始められます。 → サービス詳細はこちら
