撮影データの圧縮方法｜失敗しない軽量化手順

「撮影データが重すぎてサイトにアップできない」を、最短・安全・高品質に解決。
本記事は、広報スタッフが自力で再現できる圧縮ワークフローを、画像・動画別に手順化。形式選び、リサイズ基準、チェック表、NG集まで網羅します。

「撮影データが重すぎてサイトにアップできない」を、最短・安全・高品質に解決。
本記事は、広報スタッフが自力で再現できる圧縮ワークフローを、画像・動画別に手順化。形式選び、リサイズ基準、チェック表、NG集、運用テンプレ・自動化・セキュリティまで網羅します。

まず結論：最短は「サイズ最適化＋形式最適化＋適切な書き出し」

撮影データの圧縮は、①リサイズ（ピクセル最適化）→②形式選択（JPEG/WebP/PNG/AVIF, H.264/HEVC/AV1）→③書き出し設定の3段で行うと、画質を保ちながら容量を劇的に落とせます。特にWeb掲載は、最大表示幅に合わせたピクセル数とWebP（写真）、PNG（透過/ロゴ）、MP4（H.264）が実務で安定です。ここに、命名規則・alt・srcset・簡易計測を加えると公開後の手戻りが激減します。

判断フロー：この3質問にYes/Noで進める

最大表示幅は何px？ → 1200/800/400など、想定デバイスに合わせて決定。
被写体は写真？図版？ロゴ？ → 写真＝WebP/JPEG、ロゴ/図版＝PNG/SVG。
動画の視聴環境は？ → PC/LPなら1080p、スマホ主体のLPやSNS埋め込みなら720p。

この3点が決まれば、以降は機械的にバッチ処理が可能です。

画像の圧縮：最短ワークフロー（Windows/Mac共通）

掲載幅を決める：PCヒーロー横1200〜1600px、カード600〜800px、サムネ300〜400px。
一括リサイズ：元データを複製し、最大辺を上記に合わせて縮小。
形式選び：写真系＝WebP（次点：JPEG）、透過/ロゴ＝PNG（可能ならSVG）。
書き出し品質：WebP/JPEGは品質75%前後からテスト（比較して微調整）。
メタ情報：公開前にEXIFの位置情報を除去（個人情報対策）。
最終チェック：文字や髪の毛、斜め線の“にじみ/ブロック感”を確認。

リサイズの現実解（ピクセルと容量の目安）

ヒーロー画像：横1200〜1600px / 100〜200KB目安
一覧サムネ：横600〜800px / 50〜120KB目安
小サムネ/アイコン：横300〜400px / 20〜60KB目安

※DPIは印刷向け指標。Webはピクセルと容量（KB）が最重要。社内で「350dpiを維持」などの誤指示が多いので、掲載ピクセル基準で合意しましょう。

JPEG/WebP/PNG/AVIF：どう選ぶ？

WebP：写真向けの第一候補。高圧縮・高画質・透過可。主要ブラウザで広く対応。
JPEG：レガシー互換が必要なとき。品質75%前後で実用画質。
PNG：ロゴ/図版/テキストくっきり系。写真では容量が膨らみやすい。
AVIF：高圧縮・高画質だが運用難易度や変換時間が上がる。余力があるときに検討。

品質評価のコツ（差が出やすい箇所）

人肌・髪の毛・細い斜線・グラデーション・暗部ノイズ・テキスト縁取り。
比較は100%拡大と実寸表示の両方でチェック。社内合意はスクショで残す。

動画の圧縮：社内で失敗しない安定設定

解像度：PC埋め込みは1080p上限目安。スマホ主体LPは720pで十分。
フレームレート：撮影が30pなら30p維持（24p/60pは用途次第）。
ビットレート目安（H.264）：1080p＝6〜8Mbps、720p＝3〜5Mbps。
コーデック：H.264（mp4）が最互換。HEVC/H.265やAV1は用途限定で。
音声：AAC 128〜192kbps、ステレオ。不要部分は無音化で容量削減。

高圧縮での破綻は髪/草/水/夜景に出やすいので、該当カットで必ず比較再生。長尺は章分けし、短尺プレビュー＋本編に分けるとCV導線も改善します。
字幕（srt）を別ファイルにすると、再編集が容易で容量も増やしません。

ビットレート早見表（目安）

用途	解像度	フレーム	映像ビットレート	音声
LP埋め込み	720p	30p	3〜4 Mbps	AAC 128 kbps
製品説明	1080p	30p	6〜8 Mbps	AAC 160 kbps
SNS縦動画	1080×1920	30p	5〜7 Mbps	AAC 128 kbps

ツール不問で再現できる「手早い圧縮手順」

画像（バッチ処理の例）

Mac：プレビューで複数選択→サイズを調整→書き出し（WebP/JPEG）。
Win：フォトアプリのサイズ変更/エクスポート、またはバッチ変換ツール。
ブラウザ：Squoosh等でドラッグ＆ドロップ変換（オフラインでも可）。
CMS側：アップロード前に手元で圧縮。自動変換機能があっても事前に軽く。

動画（社内標準のプリセット化）

解像度別に「1080p-8M」「720p-4M」の2種プリセットを作成。
書き出し時は可変ビットレート（VBR）を優先、2passは納期に応じて。
縦動画は9:16/1080×1920で別書き出し（SNS活用を前提）。

自動化で時短：定型コマンド＆テンプレ

画像（例：ImageMagickの一括リサイズ）

# 画像を横1200px、WebPで品質80に一括変換
magick mogrify -path ./out -resize 1200x -format webp -quality 80 ./in/*.{jpg,jpeg,png}

動画（例：ffmpegの1080p/8Mbpsプリセット）

# H.264、1080p、VBR目安8M、AAC 160kbps
ffmpeg -i input.mov -vf "scale=-2:1080" -c:v libx264 -preset medium -b:v 8M -c:a aac -b:a 160k output.mp4

コマンドはGitに保存し、案件フォルダに同梱して運用すると属人化を防げます。

WordPressでの実装ポイント（安全運用）

メディア上限：サーバー上限に合わせ、巨大ファイルの直上げ禁止ルールを徹底。
命名規則：yyyymmdd_project_scene_1200.webpのように実寸を含める。
alt/タイトル：検索意図と視覚的内容を要約（例：横浜の店舗内観_撮影データ圧縮後）。
OGP：OG画像は別書き出し（1200×630px）。

レスポンシブ画像（srcset/sizes）の例

<img
  src="/images/store_800.webp"
  srcset="/images/store_400.webp 400w,
          /images/store_800.webp 800w,
          /images/store_1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  width="1200" height="800"
  alt="横浜の実店舗内観｜圧縮後の比較">

パフォーマンス計測と合格ライン

LCP：主要画像の読み込みを最適化（適切なサイズ・形式・プリロード）。
CLS：width/heightを指定してレイアウトシフトを防止。
簡易チェック：公開前にLighthouse/PageSpeedでスコア確認、主要端末で体感確認。

セキュリティ・コンプライアンス（EXIF/個人情報）

位置情報（GPS）や撮影者名が残っていないかを確認。必要に応じてEXIFを除去。
顔や名札など、個人情報が映る場合はモザイクやトリミングで配慮。

失敗しないチェックリスト（納品・公開前）

① 最大表示幅に合わせたリサイズ済みか？（1200/800/400など）
② 写真＝WebP/JPEG、ロゴ＝PNGを選べているか？
③ サムネがにじまないか？（100%/実寸で確認）
④ 動画の破綻が出やすいカットで再生確認済みか？
⑤ 代替テキスト（alt）・キャプション・width/heightは入っているか？
⑥ ページ速度を簡易計測（LCP/CLSの悪化なし）
⑦ EXIFの位置情報を削除済みか？

よくあるNGと回避策

NG：原寸6000pxのままJPEG品質を下げ続ける → 回避：まず縮小。
NG：ロゴをJPEGで保存 → 回避：PNG（またはSVG）。
NG：動画をビットレートだけ極端に下げる → 回避：解像度・fpsも適正化。
NG：DPIだけ350に → 回避：Webはピクセルと容量。
NG：同じ画像をCSS拡大で流用 → 回避：用途ごとに実寸を用意。

ケーススタディ：ヒーロー画像を1/5まで軽量化

Before：6000×4000px・JPEG・2.8MB → After：1200×800px・WebP品質80・180KB。
肌・髪・直線の劣化が見えない範囲で止め、LCP改善によりファーストビュー離脱を抑制。以後はテンプレ運用で同様の成果を再現できました。

サンプルHTML（画像の設置とalt例）

<figure>
  <img src="/images/case_yokohama_store_1200.webp"
       width="1200" height="800"
       alt="横浜の実店舗内観｜撮影データ圧縮前後の比較" />
  <figcaption>圧縮後1200px・約150KB。肉眼での差異は最小。</figcaption>
</figure>

運用テンプレ：命名・ディレクトリ・チェック表

命名：yyyymmdd_campaign_sceneWidth1200.webp
構成：/images/hero/、/images/thumb/、/videos/で用途別
提出物：変換前/後の比較画像、圧縮条件（解像度・形式・品質）メモ

横浜・神奈川で「まとめて頼みたい」場合

撮影〜データ最適化〜Web実装までワンストップで相談したい企業様は、会社概要やアクセスをご覧のうえ、お気軽にお問い合わせください。地域密着でWeb制作・撮影・PRを支援しています。

制作実績の一部は実績・事例でご覧いただけます。
▶ 無料相談する