画像12MBを3.7MBに圧縮した｜公開してから遅さに気づく前にやること

ゲーム用の画像27枚を用意したら、合計12MBありました。そのまま公開してもエラーは出ませんが、スマホでの初回表示が明確に遅くなります。3.7MBまで落とした手順を書きます。

実測：12MB → 3.7MB

学習ゲームアプリ用に、画像を27枚用意しました。生成した直後の合計サイズはこうです。

見た目の劣化は、ゲーム内の表示サイズでは判別できませんでした。

なぜ気づきにくいのか

12MBのままでも、公開作業は普通に成功します。 エラーも警告も出ません。

問題が出るのは、スマホの回線で初回に開いたときです。そして開発中は自分の環境で見ているので、気づく機会がありません。

これは他の「静かに起きる問題」と同じ構造でした。

• 自分の環境では再現しない
• エラーとして通知されない
• 訪問者の画面でだけ起きる

生成した画像がそのままでは重い理由

AIで生成した画像は、用途より大きいサイズで出てくることが多いです。

• 表示は256pxなのに、生成物は1024px
• 透過が不要なのにアルファチャンネル付き
• メタデータが残っている

表示サイズに対して情報が多すぎる状態です。ここを落としても見た目は変わりません。

やったこと

1. 表示サイズに合わせる

一番効きます。画面上で256pxで表示するなら、画像も256pxで十分です。

高解像度ディスプレイを考慮しても2倍までで、それ以上は無駄になります。

表示サイズ × 2 = 用意するサイズの上限

2. 透過が不要なら外す

透過（アルファチャンネル）はファイルサイズを増やします。背景の上に重ねる必要がない画像なら、不要です。

用意する画像の一覧を作るときに、「透過が必要か」を項目として持たせると、あとから判断しなくて済みます。

3. 形式を選ぶ

イラストを何も考えずJPEGにすると、輪郭がにじみます。 逆に写真をPNGにすると無駄に重くなります。

4. スクリプトにする

27枚を手作業で処理するのは現実的ではありません。一括処理のスクリプトを用意しました。

重要なのは、生成と圧縮を一続きにすることです。分けると、圧縮を忘れます。

つまずきやすい点

圧縮を後回しにすると忘れる

「あとでまとめて圧縮しよう」は、実行されません。公開してから遅さに気づくのが典型的な流れです。

対策は、公開の手順に組み込むことです。当方では公開前の検査に各種チェックを入れていますが、画像サイズもここで見る対象になります。

圧縮しすぎると見た目が落ちる

削減率を追いすぎると、輪郭がぼやけたり色が変わったりします。

判断は実際の表示サイズで見ることです。等倍で拡大して粗探しをすると、必要以上に高品質にしてしまいます。ユーザーが見るサイズで判別できなければ十分です。

元画像を残しておく

圧縮後のファイルで上書きすると、やり直せなくなります。

あとから「もう少し品質を上げたい」となったとき、圧縮済みの画像を再圧縮しても劣化するだけです。元データは公開フォルダの外に保管してください。

公開フォルダに置くと、そのまま配信されてしまいます。実際、別の作業でバックアップファイルが公開対象に混ざっていたのを直前で見つけました。

遅延読み込みも併用する

画像が多いページでは、画面外の画像を後から読む設定が効きます。

<img src="..." loading="lazy" alt="...">

圧縮と組み合わせると、初回表示がさらに軽くなります。

よくある質問

まとめ

画像27枚を12MBから3.7MBまで落としました。やったことは4つです。

1. 表示サイズに合わせる（一番効く）
2. 透過が不要なら外す
3. 内容に合った形式を選ぶ
4. 生成と圧縮を一続きにする

そして最も重要なのは、公開の手順に組み込むことでした。「あとでやる」は実行されません。

サイトが重いことは、エラーとして通知されません。訪問者が黙って離脱するだけです。

関連：Codex CLIで画像を27枚まとめて生成した全手順｜サイトの画像をAIで作った