大きい画像を含むZIPを軽くして共有する方法

起きる症状

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と認証を混同せず、必要なら両方設定する