ホームページの画像が表示されない原因と対処法｜スマホ・一部画像・移行後の確認

ホームページの文章は読めるのに、商品写真だけが出ない。パソコンでは見えるのに、スマートフォンでは画像の欄が空白になる。このような場合は、画像の保存先、端末ごとに選ばれる画像、表示の設定を分けて確認すると、調査する場所を絞り込めます。

まずは「どのページの、どの画像が、どの環境で表示されないか」を記録してください。画像の入れ直しや設定変更を繰り返す前に状況を残すと、制作会社への説明も進めやすくなります。

この記事では、ホームページの画像が表示されないときの確認順序と、スマホだけ・一部だけ・移行後といった症状別の対処法を紹介します。ページ自体が開かない場合は、ホームページが表示されない原因と対処法を先にご覧ください。

この記事の監修者

齊藤 真也

株式会社ファーストネットジャパン 代表取締役

1998 年創業時からアプリ開発・Web マーケティング・フルリモート SES・ホームページ制作・翻訳・グラフィックデザインなど幅広い IT／クリエイティブ領域を手がけ、4,000 件超のプロジェクトを統括。セキュリティ対策・SEO・システム開発から中小企業のWeb戦略支援まで、技術とデザインの両面でクライアントの課題解決を27年以上にわたり支援してきた。
大阪本社・東京オフィスの2拠点体制で、全国の企業のデジタル化をサポート。
高松市出身。座右の銘は「圧倒的努力」。

ホームページの画像が表示されないとき、最初に確認すること

最初の確認では、原因を断定するよりも再現条件をそろえることが大切です。「画像が消えた」という連絡だけでは、ファイルの削除、表示設定の変更、閲覧側の一時的な状態を区別できません。次の表を使って状況を整理しましょう。

対象ページと画像の位置を残す

ページのURLと、画像が欠けている位置が分かるスクリーンショットを用意します。「トップページの下の方」ではなく、「サービス紹介の見出しの直下にある3枚のうち中央」のように指定すると伝わりやすくなります。同じ画像を別のページでも使っている場合は、そちらも見えるか確認してください。

写真の代わりにファイル名や説明文が出る場合と、画像の領域ごと消える場合も分けて記録します。空白を埋めるために関係のない写真へ変更する前に、元の状態を保存しておくと修正後の比較に使えます。

別のブラウザ・端末から公開ページを見る

編集画面のプレビューだけで判断せず、訪問者が開く公開URLを確認します。別のブラウザやスマートフォンでも同じ症状になるかを見ましょう。スマホではWi-Fiとモバイル回線で違いがあるかも、分かる範囲で記録してください。

一つの端末だけで起きる場合は、ブラウザの保存データや拡張機能、ネットワークなども候補になります。ただし、ほかの端末で見えたことだけを理由に「サイトには問題がない」とは判断できません。端末ごとに別の画像を選ぶ作りの可能性もあるためです。

担当者が確認できる範囲と、調査を依頼する範囲を分ける

通常の更新を担当している方は、対象URL、発生条件、元の画像の有無、直前の作業までを整理できれば十分です。サーバーのアクセス制限、画像配信サービス、プログラムの変更は、それぞれの管理担当者に確認してもらいましょう。複数の設定を一度に変更すると、どの変更が影響したのか分からなくなります。

画像の保存先・URL・ファイル名を確認する

画像を表示するためには、ページに書かれた参照先と、公開サーバー上の画像が一致している必要があります。更新直後に一部の画像だけ表示されなくなった場合は、この対応関係から調べます。

画像のアップロード漏れや削除がないか

パソコン内で作成したページに画像が見えていても、そのファイルを公開先へアップロードしていなければ、訪問者は読み込めません。画像を保存したフォルダごと転送し忘れた、不要なデータの整理中に使用中の画像を削除した、といった変更がないか確認します。

画像の元データがある場合も、すぐに同名ファイルで上書きするのではなく、現在参照されている場所と使用ページを調べてください。同名画像を複数のページで共有していると、1か所の修正でほかのページの写真まで変わることがあります。削除が原因なら、バックアップや正しい元データから必要なファイルを復元する方針を検討します。

フォルダ・大文字小文字・拡張子の違いを見る

参照先のフォルダ、ファイル名、拡張子を一文字ずつ照合します。たとえば、ページ側が service.jpg、公開先が Service.JPG の場合、サーバーの環境によっては別のファイルとして扱われます。名前をそろえるだけでなく、どのページから使われているかも確認が必要です。

次のコードは説明用の架空例です。src は読み込む画像の参照先で、この例ではサイトのルートから見た /images/ フォルダを指定しています。ページごとの相対パスでは、階層を移したことで参照先が変わることもあります。

<img src="/images/service-photo.jpg" alt="サービス紹介の写真" width="800" height="500">

制作に使用したパソコン内の保存先や、社内だけで利用できるURLを指定していないかも確認しましょう。管理者が開ける画像であっても、一般の訪問者がアクセスできるとは限りません。画像の参照先や代替テキストの基本は、MDNのimg要素の解説も参考になります。

画像URLを直接開いた結果も記録する

画像が読み込めない箇所で、ブラウザの「画像を新しいタブで開く」などを利用できる場合は、その結果を確認します。画像が表示されるのか、エラーになるのか、ログイン画面へ移動するのかを記録してください。背景として設定された画像には、この操作が使えない場合があります。

直接開けることだけで修復完了とはいえません。ページ内では別サイズの画像が選ばれていたり、CSSで隠れていたりする可能性があります。必ず元の公開ページに戻って確認します。外部サービスの画像なら、配信URLの有効期限や閲覧制限、利用条件も管理者に確認しましょう。

スマホだけ・一部の画像だけ表示されない場合

パソコンとスマートフォンで別の画像を読み込むサイトでは、同じページでも不具合の出方が変わります。大きな元画像が存在していても、スマホ用の画像や自動生成した小さい画像だけが欠けていることがあります。

スマホ向けに選ばれる画像のURLを調べる

srcset や picture を使う構成では、ブラウザが表示幅などの条件に応じて画像を選びます。PCで開いた元画像だけを確認するのではなく、症状が出る端末で実際に選ばれた参照先を調べる必要があります。

制作・開発担当者には、対象画像の currentSrc と通信結果を確認してもらいましょう。これはブラウザが選択した画像のURLを把握する手がかりになります。URLが取得できても、画像の読み込み成功を保証する値ではありません。仕様はMDNのcurrentSrc解説、画像の切り替え方はpicture要素の解説に記載されています。

CSSで非表示になっていないか

画像ファイルを取得できていても、画面上で見えない場合があります。スマホ用のCSSで非表示になっている、透明度が0になっている、親の要素に高さがない、枠の外側が切り取られている、といった状態を調べます。

画像をクリックしたときのリンクは残っている、横向きにすると表示される、特定の幅でだけ消える、といった違いがあれば担当者に伝えてください。スマホ用のデザインとして意図的に省略している場合もあるため、単に非表示指定を外すのではなく、必要な情報と表示する位置を確認してから直します。

遅延読み込みや画像の最適化が影響していないか

スクロールしてから画像を読み込む仕組みや、外部サービスによる画像変換を使っている場合は、その処理がどこまで進んでいるかを確認します。画面下部だけ読み込まれない、画像枠はあるのに読み込みが始まらないといった症状は、URLの不存在とは分けて調べます。

原因を確かめずに、本番サイトの最適化機能をまとめて停止するのは避けましょう。検証環境や影響を限定した設定で比較し、読み込みの仕組み、JavaScriptのエラー、変換画像の生成・配信を確認してもらいます。改善後は、画像が見えることに加えて、レイアウトや読み込み速度に影響が出ていないかも確認します。

SSL化・サーバー移行・サイト更新後に表示されない場合

移行や設定変更の直後であれば、変更前後の画像URLと公開状態の違いを照合します。元に戻せるよう、作業前のファイルと設定を確保してから修正を進めましょう。

HTTPSページで古いHTTPの画像を参照している

HTTPSのページからHTTPの画像を参照すると、混在コンテンツとして扱われます。ただし、「HTTPの画像はすべて必ず遮断される」という単純な仕組みではありません。ブラウザがHTTPSへ自動的に変更して取得する場合と、読み込みをブロックする場合があり、指定方法などによって異なります。

開発担当者には、最終的にどのURLへアクセスしているか、HTTPS側に画像が存在するか、ブラウザにどの警告が出ているかを調べてもらいます。対処は正しいHTTPSの参照先と配信を整えることです。閲覧者にブラウザの保護機能を解除してもらう運用にはしません。詳細はMDNの混在コンテンツの説明で確認できます。

移行先に画像・生成済みサイズ・配信設定がそろっているか

ページ本文だけを移して、画像フォルダが旧サーバーに残っていないかを確認します。元画像のほかに、一覧用の小さい画像やスマホで選択されるサイズ、CSSから参照される背景画像なども対象です。旧ドメインからの転送で一時的に見えていて、旧サーバーの停止後に不具合が分かる場合もあります。

画像配信にCDNなどを使っている場合は、配信先のドメイン、元ファイルの取得先、アクセス制限、保存されたデータを担当者に照合してもらいます。「サイトを移した」という一つの作業の中でも、ページ・画像・配信設定では確認先が異なります。

WordPressはメディアと公開ページの参照先を確認する

WordPressでは、メディアライブラリに画像が登録されていることと、公開ページに正しく表示されることを分けて確認します。対象ページで選択している画像、使用サイズ、実際に出力されたURLを調べましょう。元画像だけ残っていて、ページが参照する縮小画像が欠けている可能性もあります。

ブロックエディターでは画像のアップロード、メディアライブラリからの選択、URLによる挿入などの経路があります。どの方法で設置したかを確認すると、保存先を探しやすくなります。基本操作はWordPress公式の画像ブロックの説明を参照してください。

移行後のURL修正や画像の再生成が必要な場合も、対象とバックアップを確認したうえで行います。データベース内の文字を一括で置き換えたり、メディアを大量に削除して再登録したりする前に、影響範囲と復元方法を決めてください。テーマやプラグインの更新と同時に発生した場合は、それぞれの変更時刻も調査情報になります。

画像が取得できているかを通信結果から調べる

ここからは制作・開発担当者向けの確認です。運営担当者は、用語を覚えて設定を変える必要はありません。調査結果を受け取るときに「どのURLで、どのような結果だったか」を確認できるようにしておきましょう。

Networkで画像の要求と応答を見る

Chromeの開発者ツールでは、Networkで通信を記録し、画像に絞って調べられます。対象ページを開き直して、要求したURL、HTTPステータス、応答の種類、読み込み元などを確認します。画像が背景やJavaScriptで設置されている場合は、その呼び出し元も確認対象です。操作の詳細はChrome公式のNetworkパネルの解説を参照してください。

通信の一覧にはサイトや利用者に関する情報が含まれることがあります。調査用データの共有が必要なら、担当者と範囲・方法を決めてください。通常の相談段階では、対象URLと症状のスクリーンショットがあれば状況整理を始められます。

404・403・5xx・200の意味を分けて判断する

ステータス番号は原因を絞る手がかりであり、番号だけで修正方法が決まるわけではありません。たとえば200でも、画像の代わりにHTMLのエラーページが返っていれば表示できません。HTTPの各ステータスはMDNのHTTPステータスコードの一覧で確認できます。

形式・アクセス制限・セキュリティ設定も照合する

ファイルが壊れている、実際の形式と拡張子が合っていない、応答のContent-Typeが適切でない、といった場合は、正しい画像データと配信設定を確認します。「WebPだからスマホでは表示できない」と決めつけず、問題が起きるブラウザとバージョン、変換後のファイルを調べましょう。

ページ側のCSPというポリシーが、特定の配信元からの読み込みを制限していることもあります。該当する警告と許可している配信元を照合し、必要な画像の扱いを検討します。CSPの役割はMDNのCSP解説を参照してください。

外部ドメインの画像が見えないからといって、常にCORS設定が原因とは限りません。通常の画像表示と、JavaScriptで画像のデータを扱う処理では条件が異なります。原因を確認せずに公開権限を広げたり、防御設定を一律に停止したりせず、必要な通信に絞って対応します。

確認しても直らないときの調査依頼と費用

社内で原因が分からない場合は、調査に必要な情報をそろえて依頼します。画像の入れ直しで直るケースと、端末別の出力や画像配信の修正が必要なケースでは、作業範囲が異なります。

相談時に伝える情報の記入例

以下は説明用の架空の依頼例です。実際の支援実績や、同じ症状の原因を保証するものではありません。分からない項目は「不明」のままで構いません。

この例では、PC用の元画像が表示されても、スマホで選択される小さい画像の存在は未確認です。もし調査で、その参照先が404になっていると分かれば、生成画像の欠落とURLの指定を照合する、といった次の確認へ進めます。症状だけを見て最適化設定を停止するより、調査結果をもとに必要な変更を選べます。

事前調査費と修正作業費を分けて確認する

ファーストネットジャパンのホームページトラブル対応は、事前調査30,000円〜（税別）です。画像やページの修正、設定変更などの作業は別途お見積もりします。画像1枚の相談でも、調査する構成や影響範囲によって必要な対応は変わります。

相談時には、調査の対象と成果物、調査後に提案する修正の範囲、追加作業が必要になる条件を確認してください。表示できるまでの総額や対応時期が一律に決まるサービスではありません。配信サービスの利用料や保守費用がある場合も、今回の作業費と分けて整理します。最新の条件はトラブル解決サービスの料金案内をご覧ください。

修正後の確認範囲を決めておく

依頼時に「何をもって修正完了とするか」を決めておくと、確認漏れを減らせます。対象画像の表示だけでなく、影響するページ、スマホ用の画像、画像からのリンク、通常の更新操作も確認項目に含めましょう。公開前の確認担当と、公開後に気づいた不具合の連絡先も合わせて整理します。

ファーストネットジャパンに画像表示の不具合をご相談ください

株式会社ファーストネットジャパンでは、ホームページの表示不具合について、現在の構成と症状を確認したうえで、調査・修正の対応範囲をご案内します。他社で制作されたサイトや、原因が分からない状態のご相談も、管理権限や構成を確認して対応可否を判断します。

「スマホだけ画像が出ない」「移行後に写真が欠けた」「前の制作会社へ連絡できない」など、分かる範囲の状況をお知らせください。調査に必要なアクセス情報は、共有方法を確認してからご用意いただきます。通常の相談欄へパスワードなどを記載する必要はありません。

画像が表示されないトラブルを繰り返さないために

表示を直した後は、画像の保存先と更新ルールを残します。担当者が変わっても、必要なファイルや配信サービスを判断できる状態にしておくことが大切です。

• 画像の保存先、使用ページ、編集元データを管理する。
• 不要な画像を削除する前に、ほかのページで使っていないか確認する。
• 画像差し替え後は、公開ページをPC・スマホで確認する。
• 移行時は元画像・縮小画像・背景画像・外部配信の設定を確認する。
• 更新前のバックアップと、変更内容・担当者を記録する。

画像の表示トラブルは、ファイルの不備だけでなく、端末ごとの選択や配信、見せ方の設定でも起こります。最初に再現条件を残し、実際の参照先と表示状態を順に確かめることが、必要な修正を判断する近道です。

ホームページの画像が表示されないときのよくある質問

ホームページの画像が表示されないときは何から確認しますか？

対象ページのURLと画像の位置、PC・スマホなどの環境、発生時期、直前の作業を記録します。別の端末でも公開ページを確認し、画像の保存先と参照URLが一致しているかを調べてください。

パソコンでは見えるのにスマホで画像が出ないのはなぜですか？

スマホ用に選ばれる画像の欠落、端末別の表示設定、遅延読み込みなどが候補です。PC用の元画像だけで判断せず、症状が出る環境で実際に選ばれる画像のURLと表示条件を確認します。

WordPressのメディアに画像があっても表示されないことはありますか？

あります。ページが参照しているURLやサイズ、生成済みの縮小画像、公開時の設定が異なる場合があります。メディアライブラリの登録と公開ページの出力を分けて確認してください。

画像URLを直接開ければ問題は解決していますか？

直接開けても、ページでは別サイズの画像を選択している、CSSで隠れているなどの可能性があります。元の公開ページに戻り、PCとスマホで対象画像やリンクが正常か確認してください。

画像表示の調査・修正費用はいくらですか？

ファーストネットジャパンのホームページトラブル対応は、事前調査30,000円〜（税別）です。修正・設定などの作業費は別途お見積もりします。調査対象、修正範囲、追加費用の条件を確認してご依頼ください。

他社が制作したサイトや原因不明の状態でも相談できますか？

対象URLと分かる範囲の症状をお知らせください。構成と管理権限などを確認し、調査・修正の対応可否をご案内します。通常の相談欄にパスワード等を記載せず、必要な場合は共有方法を確認してください。

この記事の監修者

齊藤 真也

株式会社ファーストネットジャパン 代表取締役

1998 年創業時からアプリ開発・Web マーケティング・フルリモート SES・ホームページ制作・翻訳・グラフィックデザインなど幅広い IT／クリエイティブ領域を手がけ、4,000 件超のプロジェクトを統括。セキュリティ対策・SEO・システム開発から中小企業のWeb戦略支援まで、技術とデザインの両面でクライアントの課題解決を27年以上にわたり支援してきた。
大阪本社・東京オフィスの2拠点体制で、全国の企業のデジタル化をサポート。
高松市出身。座右の銘は「圧倒的努力」。