準備するもの
作業を始める前に、HTMLファイルと画像ファイルが同じプロジェクトフォルダにまとまっているか確認します。画像が複数のサブフォルダに分散している場合は`find . -name '*.png' -o -name '*.jpg'`で一覧を取得しておくと、漏れなく圧縮できます。
圧縮後のファイルを保存する場所を決めておきます。オリジナルと同じフォルダに上書きする方法と、`compressed/`や`output/`フォルダに別出力する方法があります。後者の方がオリジナルを保護できて安全です。フォルダ構成を決めたら圧縮ツール（Squooshまたはimageminなど）をセットアップしてから作業を開始してください。
送付先のクライアントが使用するデバイスと回線速度も把握しておくと、目標ファイルサイズの設定に役立ちます。スマートフォンメインのユーザーであれば1枚あたり100KB以下を目標にし、デスクトップPCで光回線のユーザーであれば200KB程度まで許容できます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
実際の手順
手順①：圧縮前の総ファイルサイズを計測します（macOSなら`du -sh img/`、Windowsならエクスプローラーでフォルダのプロパティを確認）。圧縮後と比較するための基準値として記録しておきます。
手順②：Squooshなどのツールで各画像を圧縮します。JPEG・PNGはWebPに変換しながら品質80〜85に設定。圧縮後のファイルを`img-compressed/`フォルダに保存します。手順③：HTMLファイルの画像パスを`img/`から`img-compressed/`に更新するか、または`img-compressed/`の内容を`img/`にコピーして上書きします。
手順④：ブラウザでHTMLを開いて画像が正しく表示されているか全ページ確認します。特に細かいテキストが含まれた図版（料金表のスクリーンショットなど）は拡大表示でジャグが出ていないか確認してください。手順⑤：問題なければギガサイト便にアップロードしてURL発行、送付します。
失敗しやすい点
圧縮後にHTMLのimgパスを更新し忘れるのが最も多い失敗です。`img/hero.png`を圧縮して`img/hero.webp`として保存した場合、HTMLの`src='img/hero.png'`を`src='img/hero.webp'`に変更しないと画像が表示されません。変換後は必ずHTMLのsrc属性を検索して確認してください。
圧縮設定を低品質にしすぎてクライアントから「画像が汚い」と言われるケースも珍しくありません。品質値65以下ではテキスト入り画像でブロックノイズが目立つため、70以上を最低ラインに設定するのが安全です。圧縮後の画像を100%表示で確認することを必ずルーティンに含めましょう。
テンプレ文面
「お疲れ様です。デザイン確認用プレビューURLをご案内します。ページの画像は軽量化処理を施しており、表示速度を優先しています。仕上がり品質の確認は別途高解像度データをお送りしますので、本レビューはレイアウト・構成・文字の確認にご利用ください。」
圧縮済み画像を使っているプレビューと、本番用高解像度データを明確に区別して伝えることで、クライアントが「これが最終品質か」と誤解するリスクを防げます。「このプレビューは表示確認用です」という一文がトラブル回避に非常に効果的です。
よくある質問
画像を圧縮するとSEOに影響はありますか？
適切な圧縮はPageSpeedスコアを上げてSEOにプラスに働きます。ただし代替テキスト（alt属性）の内容はSEOに影響するため、圧縮作業時にalt属性を誤って削除しないよう注意してください。
Retina（高解像度）ディスプレイ向けの画像は圧縮しても品質が落ちませんか？
2倍解像度の画像を品質85でWebP圧縮しても、通常の1倍解像度のJPEGよりはるかに鮮明です。srcset属性を使って解像度別に画像を指定している場合は、各解像度の画像をそれぞれ圧縮してください。
アニメーションGIFを含むHTMLはどう対処すればよいですか？
アニメーションGIFはファイルサイズが大きくなりがちです。ffmpegで`WebPアニメーション`または`mp4/WebM動画`に変換するとサイズを大幅に削減できます。`<video autoplay loop muted playsinline>`要素に置き換えるのが最も効果的な軽量化方法です。