共有前に画像を圧縮する方法

準備するもの

圧縮前に、対象HTMLが参照している画像ファイルの一覧を把握します。フォルダ構成が`img/`や`assets/`などにまとまっているか確認し、HTMLと画像が同一フォルダにある場合はそのまま作業できます。画像が外部CDN（Unsplashなど）のURLを参照している場合は、圧縮対象外なので区別しておきます。

圧縮ツールの選定も事前に行います。コマンドラインが使える環境であれば`imagemin`や`sharp`がおすすめです。GUIツールを好む場合はSquooshまたはTinyPNGのWebアプリが手軽です。大量の画像を一括処理したいならnpxで実行できる`@squoosh/cli`が効果的で、WebP変換と圧縮を同時に行えます。

• 相手がログインなしで開ける状態か確認する
• PCとスマホで最低1回ずつ表示を確認する
• 内部情報・個人情報・不要な外部送信が残っていないか見る
• レビュー期限と修正時の差し替え方を決めておく

実際の手順

最も手軽な方法はSquooshのWebアプリ（squoosh.app）を使う方法です。ブラウザにJPEGやPNGをドラッグすると、右半分でWebPまたは圧縮JPEGに変換でき、品質スライダーでファイルサイズと見た目のバランスをリアルタイムで確認できます。品質80〜85が視覚的な劣化がわかりにくい目安です。

複数画像を一括処理するには、`npx @squoosh/cli --webp '{}' img/*.png img/*.jpg`のようなコマンドで全PNGとJPEGをWebPに変換できます。WebP形式はJPEGの30〜50%のファイルサイズになることが多く、旧Edge以外の主要ブラウザで対応済みです。HTMLのimgタグも`<picture>`要素に変換してフォールバックを用意するとより確実です。

圧縮後はHTMLをブラウザで開き、画像が正しく表示されているかを確認します。特にロゴや細かいテキスト入り画像は過度な圧縮でジャグが目立つことがあるため、品質を落としすぎないよう注意してください。品質確認後にギガサイト便にアップロードしてURLを発行します。

失敗しやすい点

圧縮前のオリジナルファイルを上書きしてしまうミスが最もよくあります。必ず元のファイルをバックアップするか、圧縮後のファイルを別フォルダ（例：`img-compressed/`）に出力する形にしましょう。圧縮前と後のファイルサイズ比較も、差分が小さすぎる場合は設定ミスを疑う材料になります。

WebPに変換したあとHTMLのimgタグのsrc属性を更新し忘れると、画像が表示されなくなります。ファイル名と拡張子の変更に合わせてHTMLも必ず更新してください。`sed -i 's/.png/.webp/g' index.html`のようなコマンドで一括置換できますが、必ずバックアップを取ってから実行しましょう。

テンプレ文面

「プレビューURLをお送りします。ページの読み込みを速くするため画像を最適化しています。デザインの色・質感はオリジナルと同等ですが、気になる点がありましたらお知らせください。確認期限：〇月〇日。」

画像圧縮を行った旨を明示することで、クライアントが「画像が荒い」と感じた場合に質問してもらいやすくなります。制作側の意図として最適化していることをあらかじめ伝えることが、不要な問い合わせを防ぐポイントです。