HTMLだけ渡すと画像が表示されない理由
HTMLファイルの中では、画像は「この場所にあるファイルを読み込む」という形で指定されています。実際の画像データはHTMLとは別のファイルとして、多くの場合imagesやassetsといったフォルダに置かれています。
そのため、HTMLファイルだけを共有しても、参照先の画像が同じ場所になければブラウザは画像を見つけられず、空白や壊れたアイコンが表示されます。見た目を保つには、HTMLと画像フォルダを同じ構成のまままとめて扱う必要があります。
画像込みのサイトを共有する一般的な方法
画像を含むサイトを共有する方法としては、フォルダ一式をZIPに圧縮する、サーバーにファイルとフォルダをそのままアップロードする、ホスティングサービスにデプロイする、といった選択肢があります。いずれも画像フォルダを含めることが前提です。
画像をHTMLに埋め込んで一枚のファイルにする方法もありますが、画像点数が多いとファイルが重くなり、扱いにくくなります。フォルダ構成を保ったまままとめて共有するほうが、元の見た目を確実に再現できます。
- HTMLと画像フォルダをまとめてZIPに圧縮する
- サーバーにフォルダ構成のままアップロードする
- ホスティングサービスにデプロイして公開する
崩れないZIP構成のOK/NG例
画像フォルダ込みのサイトをZIPで公開では、ZIPの中身が正しくても、階層が1つずれるだけで画像やCSSが読み込めなくなります。圧縮する前に、公開用フォルダだけを切り出して確認します。
Windows/Macどちらでも、不要な隠しファイルや作業ファイルを入れないことが大切です。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- OK: index.html と assets/images/css/js が想定した相対パスで並んでいる
- NG: ZIPの中にさらに不要な親フォルダがあり、index.htmlの場所が分かりにくい
- NG: __MACOSX、.DS_Store、作業中PSD、秘密情報入りメモを同梱している
- 確認: アップロード後のURLで画像・CSS・リンクを実際に開く
画像が崩れないために確認しておきたいこと
公開前に、HTMLが画像をどのように指定しているか確認しましょう。assets/images/logo.pngのようにフォルダからの相対パスで書かれていれば、フォルダ構成を保ったまま移動しても画像は表示されます。パソコン内の絶対パスで書かれていると別の環境では表示できません。
また、ファイル名の大文字と小文字にも注意が必要です。手元では表示できても、公開先の環境では大文字小文字が厳密に区別され、Logo.pngとlogo.pngが別物として扱われることがあります。指定と実際のファイル名をそろえておくと安全です。
ZIPなら画像フォルダごと崩さず公開できる
HTMLと画像フォルダを一緒にZIPへまとめておけば、フォルダ構成がそのまま保たれます。HTMLから見た画像の位置関係が変わらないため、手元と同じ見た目を再現できます。
ギガサイト便はこのZIPを受け取り、index.htmlを入口として元の構成のまま表示します。CSSや画像を含むフォルダ一式をまとめてアップできるため、相手は解凍せずにURLを開くだけで、画像もそろった状態のサイトを閲覧できます。
画像パスを公開前に確認するコツ
画像込みのZIPで失敗しやすいのは、HTMLから見た画像の場所がずれているケースです。ローカルでは表示されても、共有URLではPC内の絶対パスや大文字小文字の違いが原因で表示されないことがあります。
ZIPにする前に、HTML内のimgタグやCSSのbackground-imageを見て、ZIPに入れるフォルダ名と一致しているかを確認しましょう。公開後は別ブラウザで開き、画像だけ抜けていないかを最初に見ます。
- C:\Users や file:/// から始まるローカルパスを残さない
- images/logo.png と Images/logo.png のような大文字小文字のズレをなくす
- CSS内の背景画像もZIPに含める
- 日本語・空白入りファイル名は必要に応じて英数字へ置き換える
- 公開URLをスマホでも開き、重い画像で表示が遅すぎないか見る
ギガサイト便で画像込みのサイトを公開する手順
実際に画像フォルダを含むサイトをZIPで公開する流れを順番に見ていきます。ポイントは、HTMLと画像フォルダを同じ親フォルダの中にそろえてから圧縮することです。
下記の手順は数分で完了します。公開前にZIPの中身を確認し、imagesフォルダがHTMLと同じ構成で入っているかだけ見ておけば、画像が崩れる心配はほとんどありません。
- index.htmlとassetsやimagesなどの画像フォルダを、一つのフォルダにまとめる
- そのフォルダごとZIPに圧縮する（フォルダ構成をそのまま保つ）
- ギガサイト便のトップに、作成したZIPをドラッグ&ドロップする
- 認証方式と公開期限を設定し、共有範囲と有効期間を決める
- 発行されたURLを相手に送り、画像が正しく表示されているか確認してもらう
よくある質問
imagesフォルダはZIPのどこに入れればよいですか？
HTMLが指定している場所と同じ位置に入れます。たとえばHTMLがassets/images/と指定しているなら、index.htmlと同じフォルダの中にassetsフォルダを置き、その中にimagesフォルダを入れます。手元のフォルダ構成をそのままZIPにすれば崩れません。
画像が多くてもまとめて公開できますか？
はい、CSSやJS、画像を含むフォルダ一式をまとめてアップできます。画像点数が多くても、フォルダ構成を保ったままZIPにまとめれば、元の見た目のまま表示されます。ファイルが大きい場合は、公開前に画像を適度に圧縮しておくと表示も軽くなります。
一部の画像だけ表示されないのはなぜですか？
その画像のファイル名やフォルダの位置が、HTMLの指定と一致していない可能性があります。大文字小文字の違いやフォルダ名の打ち間違いがよくある原因です。指定と実際のファイル名をそろえ、ZIPに正しく含まれているか確認してください。
相手は画像を見るために何か準備が必要ですか？
いいえ、特別な準備は不要です。ギガサイト便はZIPの中身を元の構成のまま表示するため、相手は発行されたURLを開くだけで画像もそろったサイトを閲覧できます。解凍やソフトのインストールは必要ありません。
ZIPを作る前に何を確認すべきですか？
index.htmlの場所、CSS/画像/JSの相対パス、不要な隠しファイル、秘密情報の混入を確認します。圧縮後ではなく、公開用フォルダを作った段階で一度ブラウザ表示してください。
ローカルでは見える画像が共有URLで消えるのはなぜですか？
HTMLが自分のPC内の画像パスを参照していたり、ZIP内のフォルダ名とリンクの大文字小文字が違っていたりするためです。画像フォルダをZIPに含め、HTMLやCSSからの参照を相対パスにそろえると表示崩れを減らせます。