---
title: "大きい画像を含むZIPを軽くして共有する方法"
description: "大きい画像を含むZIPが重すぎて共有できずに困っているWeb制作者・デザイナー向け。画像圧縮の手順からZIP構成の整え方、アップロード後の動作確認まで具体的に解説し、軽量化の方針を判断できる記事。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/zip-large-images-howto"
markdown: "https://giga-site.com/articles/zip-large-images-howto/index.md"
category: "ZIP公開"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 大きい画像を含むZIPを軽くして共有する方法

高解像度の画像をZIPに詰め込んで共有しようとすると、ファイルサイズが数百MBに膨らみアップロードが失敗したり、受け取った相手のスマホで開けないといった問題が起きる。画像の前処理とZIPの構成を整えるだけで、同じコンテンツを5分の1以下のサイズに抑えてスムーズに届けられるようになる。

> Source HTML: https://giga-site.com/articles/zip-large-images-howto
> Article index: https://giga-site.com/articles/index.md

## 起きる症状

ZIPに2000px以上のPNGをそのまま入れると、10枚程度でも100MBを超えることがある。ギガサイト便などのアップロードサービスには上限があるため、この状態だとエラーで弾かれる。まず`du -sh *.zip`でサイズを確認し、10MBを超えていれば画像の再圧縮が必要と判断する。

スマホで開いたときだけ画像が表示されない、またはページが真っ白になるケースは、PNG/SVGが大きすぎてモバイルブラウザのメモリ上限に引っかかっていることが多い。PCで問題なく表示されても安心せず、実機のiOS Safariと Android Chromeで最低1回ずつ確認してから共有リンクを発行する。

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

## 正しい構成

ZIP直下に`index.html`を置き、画像は`assets/images/`などの相対パスフォルダに格納する。`index.html`のimg要素はすべて`src="assets/images/hero.webp"`のように相対パスで記述する。絶対パスやCDN URLを書いてしまうと、オフライン環境や認証付きプレビューURLでは画像が読み込まれない。

Webp形式への変換が最も手軽なファイルサイズ削減策だ。macOSなら`cwebp -q 80 input.png -o output.webp`一行で変換でき、品質80でも見た目の差はほぼ出ない。元のPNGが3MBなら変換後は400〜600KB程度になる。HTMLの`<picture>`タグでWebpとJPGの両方を用意すれば古いブラウザへの互換性も確保できる。

- ZIP直下または指定階層にindex.htmlがあるか確認する
- 相対パスの画像・CSS・JSが同梱されているか見る
- 不要な隠しファイルや作業ファイルを除く
- 圧縮前のフォルダ名に日本語や空白を入れすぎない

## 圧縮前チェック

圧縮前に`find . -name '*.png' -size +500k`を実行して500KB超の画像を一覧化する。リストアップされたファイルをSquooshやImageOptimで再圧縮してからZIPを作ると、全体サイズを確実に抑えられる。作業フォルダの`.DS_Store`や`Thumbs.db`もZIPに混入しやすいので、`zip -r output.zip . -x '*.DS_Store'`のように除外オプションを使う。

HTML内に`<img src="http://example.com/logo.png">`のような外部URLが残っていると、認証付きプレビューURL経由でも外部リクエストが発生し、画像が表示されないだけでなくセキュリティ上の問題にもなる。VSCodeの「ファイル内を検索」で`http://`と`https://`を検索し、外部参照をすべて同梱ファイルへの相対パスに置き換える。

1. HTML内の外部script・form action・iframeを確認する
2. APIキーやトークンらしき文字列がないか検索する
3. 画像・CSS・JSのパスが公開後も解決できるか見る
4. noindexと認証を混同せず、必要なら両方設定する

## アップロード後確認

ギガサイト便でアップロードが完了したら、発行されたプレビューURLをシークレットウィンドウで開き、認証を通過した後にネットワークタブを確認する。画像リクエストが404になっている場合はZIP内のパスとHTMLのsrc属性がずれている。その場合はZIPを再作成して差し替えアップロードする。

画像が遅延表示される場合は、ZIP全体のサイズではなく1枚あたりの画像サイズが問題なことが多い。スマホの4G回線では1枚1MB超の画像はロードに3秒以上かかる。Lighthouseの「Properly size images」警告が出ていれば、表示サイズに合わせた解像度（例：モバイル用は640px幅）でリサイズしてZIPを再パッケージする。

1. HTML内の外部script・form action・iframeを確認する
2. APIキーやトークンらしき文字列がないか検索する
3. 画像・CSS・JSのパスが公開後も解決できるか見る
4. noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### WebPに変換するとIE11や古いiOSで表示されませんか？

iOS 14以降とモダンブラウザはWebPをサポートしています。IE11向けには`<picture>`タグでJPGフォールバックを用意するか、対象ユーザーが古いブラウザを使わないと判断できればWebP単独でも問題ありません。

### アップロード上限を超えた場合、ZIP分割は有効ですか？

分割ZIPは展開時に結合が必要なためHTMLプレビューには使えません。代わりに画像を全てWebP/品質70に変換するか、動画をmp4に差し替えてから単一ZIPに再パッケージするのが確実です。

### PNG透過が必要な画像もWebPに変換できますか？

WebPは透過（アルファチャンネル）をサポートしているため、透過PNGも`cwebp -q 80`で変換できます。変換後もブラウザで透過が正しく表示されるかを確認してから差し替えてください。

## 関連記事

- [クライアントレビュー前にZIPを点検するチェックリスト](https://giga-site.com/articles/zip-before-client-review-howto/index.md)
- [AI生成HTMLの出力フォルダを公開用ZIPに整える方法](https://giga-site.com/articles/zip-ai-output-cleanup-howto/index.md)
- [ZIPの最上位フォルダが原因でindex.htmlが見つからないときの直し方](https://giga-site.com/articles/zip-top-folder-howto/index.md)
- [Macで作ったZIPに隠しファイルが混ざるときの確認方法](https://giga-site.com/articles/zip-macos-hidden-files-howto/index.md)
- [Windowsで作ったZIPの文字コードトラブルを避ける方法](https://giga-site.com/articles/zip-windows-encoding-howto/index.md)
- [node_modulesを含めずに公開用ZIPを作る方法](https://giga-site.com/articles/zip-node-modules-howto/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "大きい画像を含むZIPを軽くして共有する方法",
  "description": "大きい画像を含むZIPが重すぎて共有できずに困っているWeb制作者・デザイナー向け。画像圧縮の手順からZIP構成の整え方、アップロード後の動作確認まで具体的に解説し、軽量化の方針を判断できる記事。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/zip-large-images-howto",
  "url": "https://giga-site.com/articles/zip-large-images-howto",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ZIP公開",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "WebPに変換するとIE11や古いiOSで表示されませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "iOS 14以降とモダンブラウザはWebPをサポートしています。IE11向けには`<picture>`タグでJPGフォールバックを用意するか、対象ユーザーが古いブラウザを使わないと判断できればWebP単独でも問題ありません。"
      }
    },
    {
      "@type": "Question",
      "name": "アップロード上限を超えた場合、ZIP分割は有効ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "分割ZIPは展開時に結合が必要なためHTMLプレビューには使えません。代わりに画像を全てWebP/品質70に変換するか、動画をmp4に差し替えてから単一ZIPに再パッケージするのが確実です。"
      }
    },
    {
      "@type": "Question",
      "name": "PNG透過が必要な画像もWebPに変換できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "WebPは透過（アルファチャンネル）をサポートしているため、透過PNGも`cwebp -q 80`で変換できます。変換後もブラウザで透過が正しく表示されるかを確認してから差し替えてください。"
      }
    }
  ]
}
```