---
title: "共有前に画像を圧縮する方法"
description: "HTMLプレビューを共有する前に画像を圧縮してファイルサイズを削減したいWeb制作者向け。ツール選定から実施手順まで、品質を落とさない圧縮方法を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/how-to-compress-images-before-share-method"
markdown: "https://giga-site.com/articles/how-to-compress-images-before-share-method/index.md"
category: "ハウツー"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 共有前に画像を圧縮する方法

デザインカンプやLPのHTMLをそのまま共有すると、未圧縮の画像が含まれていてファイルサイズが数十MBになることがあります。モバイル回線のクライアントが開くと表示が遅く、レビューへの集中を妨げてしまいます。共有前の画像圧縮は品質を保ちながらファイルを軽くする重要なステップです。

> Source HTML: https://giga-site.com/articles/how-to-compress-images-before-share-method
> Article index: https://giga-site.com/articles/index.md

## 準備するもの

圧縮前に、対象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をお送りします。ページの読み込みを速くするため画像を最適化しています。デザインの色・質感はオリジナルと同等ですが、気になる点がありましたらお知らせください。確認期限：〇月〇日。」

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

## よくある質問

### AVIF形式とWebPではどちらを使うべきですか？

2024年時点でAVIFはChrome・Firefox・Safariで対応済みですが、圧縮処理が重く時間がかかります。WebPは処理が速く広くサポートされているため、プレビュー用途ではWebPを選ぶのが実用的です。本番環境ではAVIFとWebPを`<picture>`で使い分けるのがおすすめです。

### CSSの背景画像も同様に圧縮する必要がありますか？

はい。`background-image`で指定されたファイルも画像として読み込まれるため、圧縮対象に含めます。CSSファイル内のurl()を検索して参照先ファイルを洗い出し、同様の圧縮手順を適用してください。

### SVG形式の画像も圧縮できますか？

SVGはXMLテキストなので、SVGO（SVG Optimizer）を使うと不要なメタデータやコメントを削除してファイルサイズを30〜60%削減できます。`npx svgo --folder img/`で一括処理が可能です。ただし最適化後に見た目が変わっていないか必ず確認してください。

## 関連記事

- [共有前に画像を圧縮するときの手順と注意点](https://giga-site.com/articles/how-to-compress-images-before-share-steps-note/index.md)
- [共有前に画像を圧縮するためのチェックリスト](https://giga-site.com/articles/how-to-compress-images-before-share-checklist/index.md)
- [フォームを無効化して共有する方法](https://giga-site.com/articles/how-to-disable-form-before-share-method/index.md)
- [レビュー用URLをSlackで配る方法](https://giga-site.com/articles/how-to-slack-distribute-method/index.md)
- [レビュー用URLをTeamsで配る方法](https://giga-site.com/articles/how-to-teams-distribute-method/index.md)
- [メールで期限付きURLを送る方法](https://giga-site.com/articles/how-to-email-expiry-url-method/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "共有前に画像を圧縮する方法",
  "description": "HTMLプレビューを共有する前に画像を圧縮してファイルサイズを削減したいWeb制作者向け。ツール選定から実施手順まで、品質を落とさない圧縮方法を解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/how-to-compress-images-before-share-method",
  "url": "https://giga-site.com/articles/how-to-compress-images-before-share-method",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ハウツー",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "AVIF形式とWebPではどちらを使うべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "2024年時点でAVIFはChrome・Firefox・Safariで対応済みですが、圧縮処理が重く時間がかかります。WebPは処理が速く広くサポートされているため、プレビュー用途ではWebPを選ぶのが実用的です。本番環境ではAVIFとWebPを`<picture>`で使い分けるのがおすすめです。"
      }
    },
    {
      "@type": "Question",
      "name": "CSSの背景画像も同様に圧縮する必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。`background-image`で指定されたファイルも画像として読み込まれるため、圧縮対象に含めます。CSSファイル内のurl()を検索して参照先ファイルを洗い出し、同様の圧縮手順を適用してください。"
      }
    },
    {
      "@type": "Question",
      "name": "SVG形式の画像も圧縮できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SVGはXMLテキストなので、SVGO（SVG Optimizer）を使うと不要なメタデータやコメントを削除してファイルサイズを30〜60%削減できます。`npx svgo --folder img/`で一括処理が可能です。ただし最適化後に見た目が変わっていないか必ず確認してください。"
      }
    }
  ]
}
```