---
title: "共有前に画像を圧縮するときの手順と注意点"
description: "HTMLプレビューを共有する前の画像圧縮作業を確実に進めたいデザイナー向け。圧縮の手順と見落としやすい注意点を具体的に解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/how-to-compress-images-before-share-steps-note"
markdown: "https://giga-site.com/articles/how-to-compress-images-before-share-steps-note/index.md"
category: "ハウツー"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 共有前に画像を圧縮するときの手順と注意点

HTMLプレビューの共有前に画像を圧縮する作業は、一見シンプルに見えて実際にはファイルの管理ミスや圧縮設定の誤りが起きやすいステップです。正しい手順と注意点を把握しておくことで、クライアントにとって読み込みが速く、品質的にも問題のないプレビューを確実に届けられます。

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

## 準備するもの

作業を始める前に、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>`要素に置き換えるのが最も効果的な軽量化方法です。

## 関連記事

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

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "共有前に画像を圧縮するときの手順と注意点",
  "description": "HTMLプレビューを共有する前の画像圧縮作業を確実に進めたいデザイナー向け。圧縮の手順と見落としやすい注意点を具体的に解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/how-to-compress-images-before-share-steps-note",
  "url": "https://giga-site.com/articles/how-to-compress-images-before-share-steps-note",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ハウツー",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "画像を圧縮するとSEOに影響はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "適切な圧縮はPageSpeedスコアを上げてSEOにプラスに働きます。ただし代替テキスト（alt属性）の内容はSEOに影響するため、圧縮作業時にalt属性を誤って削除しないよう注意してください。"
      }
    },
    {
      "@type": "Question",
      "name": "Retina（高解像度）ディスプレイ向けの画像は圧縮しても品質が落ちませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "2倍解像度の画像を品質85でWebP圧縮しても、通常の1倍解像度のJPEGよりはるかに鮮明です。srcset属性を使って解像度別に画像を指定している場合は、各解像度の画像をそれぞれ圧縮してください。"
      }
    },
    {
      "@type": "Question",
      "name": "アニメーションGIFを含むHTMLはどう対処すればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "アニメーションGIFはファイルサイズが大きくなりがちです。ffmpegで`WebPアニメーション`または`mp4/WebM動画`に変換するとサイズを大幅に削減できます。`<video autoplay loop muted playsinline>`要素に置き換えるのが最も効果的な軽量化方法です。"
      }
    }
  ]
}
```