ホームページの画像が表示されない原因と対処法｜Chromeで読み込めないときの確かめ方

「Chromeで画像が表示されない」「ホームページの画像だけが読み込めない」というとき、原因は見ている側のブラウザにある場合と、サイトの作りにある場合に分かれます。どのサイトでも画像が出ないならブラウザの設定や回線、特定のサイトだけならそのサイトの側を疑うのが近道です。

この記事では、最初に切り分けの方法を示し、見る側でできる Chrome などの対処と、自社のホームページで画像が出ないときに確かめる所を順に解説します。ページ全体が崩れて文字だけになっている場合は、「ホームページに文字しか表示されない原因と対処法｜見る側の確認とサイト側の直し方」もあわせて読んでみてください。

まず切り分ける：どのサイトでも出ないか、1つのサイトだけか

画像が出ないときは、直し方を探す前に、どこで起きているかを確かめます。同じページを別のブラウザや、スマホのモバイル回線で開いてみると、見る側の問題かサイトの側の問題かがおおよそ分かります。

Chromeで画像が表示されないときの対処（見る側）

見る側でできることは、手間の小さいものから順に試すのが近道です。どれもブラウザの設定を確かめるだけなので、試しても困ることはほとんどありません。

画像の表示が許可されているかを確かめる

Chrome には、サイトごとに画像の表示を許すかどうかを決める設定があります。パソコンの Chrome では、右上の「その他」のアイコンから「設定」→「プライバシーとセキュリティ」→「サイトの設定」→「画像」と進み、画像の表示が許可されているかを確かめます。特定のサイトだけなら、住所の左にあるサイト情報のアイコンから「サイトの設定」を開いて確かめられます。

キャッシュを消して読み直す

ブラウザにためたデータ（キャッシュ）が古くなったり壊れたりすると、画像が途中までしか出なかったり、差し替える前の画像が出続けたりします。パソコンの Chrome では、「その他」のアイコンから「閲覧履歴データを削除」を開き、「キャッシュされた画像とファイル」を選んで「データを削除」を押してから、ページを開き直します。

Edge や Safari での消し方は、「ホームページに文字しか表示されない原因と対処法｜見る側の確認とサイト側の直し方」の表にまとめています。

拡張機能を止めて確かめる

広告を止める拡張機能や、通信を減らす拡張機能が、画像の読み込みまで止めていることがあります。シークレットウィンドウは拡張機能が止まった状態で開くことが多いので、そこで画像が出るなら、拡張機能を1つずつ止めて原因を探します。

JavaScript の設定と回線を確かめる

ページを下へ動かしたときに画像を読み込む作りのサイトでは、JavaScript が止まっていると画像が出ないことがあります。JavaScript も、画像と同じ「サイトの設定」の中で許可されているかを確かめられます。

回線が遅いときや、スマホの省データの設定が入っているときも、画像の読み込みが途中で止まりやすくなります。Wi-Fi に切り替える、省データの設定を外す、といった形で読み込めるかを確かめます。

Chrome を最新にする

古い版の Chrome では、新しい画像の形式や作りに対応しきれないことがあります。「設定」の「Chrome について」を開くと、更新があるかを確かめて、そのまま新しい版にできます。

自社のホームページで画像が表示されないとき（サイト側）

自社のサイトで画像が出ないときは、ブラウザの開発者ツールを使うと、どの画像が読めていないかがすぐ分かります。Chrome なら F12 キー（Mac は Command＋Option＋I）で開き、「Network」で赤く表示される行や、「Console」に出るエラーを見ると、読めなかった画像の住所と理由（404 など）が分かります。

ページの中身（HTML）の見方は、「ホームページのソースコードを簡単に表示する方法｜初心者でもできる手順を詳しく解説」でも紹介しています。

ファイルの住所（パス）と名前を確かめる

画像が出ない原因として多いのは、HTML に書いた画像の住所（パス）と、サーバー上の実際の置き場や名前が合っていないことです。多くのサーバーでは大文字と小文字を別の文字として扱うため、「Photo.JPG」と「photo.jpg」は別のファイルになります。

全角文字や空白を含むファイル名も、住所の書き方によっては読めなくなるので、半角の英数字と「-」「_」で付けておくと安心です。フォルダの階層を変えたときや、サイトを別のサーバーへ移したときは、相対パス（今のページから見た場所）と絶対パス（サイトの頭からの場所）の書き方がずれやすくなるため、開発者ツールで読めなかった住所を開き、どこで食い違っているかを確かめます。

画像の形式を確かめる（iPhoneの写真のHEICに注意）

WebP は、今の主なブラウザ（Chrome・Edge・Firefox・Safari）が対応していて、ふつうに使えます。気をつけたいのは iPhone で撮った写真の HEIC 形式で、主なブラウザの中で表示できるのは Safari（17以降）だけです（Can I use で2026年11月1日に確かめた内容です）。

HEIC のまま載せると、Safari では見えるのに Chrome や Edge では表示されない、ということが起きます。写真を載せるときは、JPEG や WebP に変えてからアップロードします。

https のページに http の画像が混ざっていないか

サイトを https に切り替えた後も、画像の住所が「http://」のまま残っていると、ブラウザは安全でない読み込みとして扱います。Chrome は、こうした画像を https に置き換えて読みに行き、読めなければ表示しない方針を示しています（Chromium Blog、2019年10月）。

WordPress では、本文や設定に古い「http://」の住所が残っていることがあります。データベースの住所を一括で書き換えるときは、先にバックアップを取ってから行います。

サーバーやCDNのキャッシュを確かめる

サーバーや CDN（画像などを各地から配る仕組み）、WordPress のキャッシュのプラグインがデータをためていると、差し替えた画像が反映されず、古い画像が出続けることがあります。サーバーの管理画面やプラグインの設定からキャッシュを消し、ブラウザの側のキャッシュも消してから確かめます。

自動でキャッシュを管理する設定が入っている場合は、一時的に止めてから手で消すと、どこにためられていたかを切り分けやすくなります。直ったら、設定を元に戻しておきます。

ファイルのアクセス権（パーミッション）を確かめる

サーバー上のファイルには、誰が読めるかを決めるアクセス権があります。画像ファイルを外から読めない設定になっていると、ブラウザには「403」が返り、画像が出ません。

FTP ソフトやサーバーの管理画面で、画像ファイルが「644」、フォルダが「755」のように、外から読める設定になっているかを確かめます。ファイルだけでなく、置いているフォルダの設定も見ておきます。

imgタグとCSSの書き方を確かめる

HTML の img タグの src 属性に書いた住所が誤っていると、画像は表示されません。画像があるのに見えないときは、CSS で display: none や visibility: hidden が当たっていないか、高さが0になっていないかを、開発者ツールの「Elements」で確かめます。

alt 属性は、画像が出ないときに代わりに表示される説明文です。読み上げソフトを使う人や検索エンジンにも画像の中身を伝えるので、すべての画像に中身の分かる alt を付けておきます。

画像そのものを確かめる（壊れたファイル・重すぎるファイル）

アップロードの途中で通信が切れると、ファイルが壊れて表示されないことがあります。手元のパソコンで開けることを確かめてから、もう一度アップロードし直し、サーバーに届いたファイルの大きさが元と同じかも見ておきます。

ファイルが重すぎると、回線の遅い環境では読み込みに時間がかかり、途中で止まって見えることがあります。表示する大きさに合わせて縮め、圧縮してから載せると、ページ全体の表示も速くなります。目安は「ホームページに最適な画像解像度の選び方｜適切な解像度とサイズの目安とは？」で解説しています。

外部のサービスの画像を確かめる

ほかのサイトや外部のサービスにある画像を直接読み込んでいる場合、その相手が画像を消したり、ほかのサイトから読まれることを禁じたりすると、自社のページでも画像が出なくなります。使う許しを得た画像は、自社のサーバーに置いて読み込む形にしておくと、相手の都合で消えることを防げます。

画像以外も崩れている・サイトが開かないとき

画像だけでなくレイアウトも崩れて文字だけになっているなら、見た目を決める CSS が読めていない可能性があります。ページそのものが開かないなら、サーバーやドメインの側の問題が考えられるので、「ホームページが開かない・ページが開けない原因と解決方法｜見る側の対処と自社サイトの確かめ方」の順番で確かめてください。

デイワンに相談する

自社のサイトで不具合が続くのに、作った会社と連絡がつかない、社内に手を入れられる人がいない、ということもあります。株式会社デイワンでは、止まってしまった開発の引き継ぎと立て直しを受けていて、作った人がいないシステムやサイトのご相談にも応じています。ご相談の窓口にはエンジニアでもある代表が立ち、できること、費用の考え方、それぞれの良し悪しを、持ち帰らずにその場でお答えします。

引き継ぐときは、残っているソースコードと資料を AI で読み解き、事実・推測・未確認を分けてご報告します。お引き受けできるかどうかのご回答までは無料です。サイトを作り直す時期かどうかを考えるときは、資料「デジタル時代を勝ち抜くための サイトリニューアルのタイミング」も参考にしてください。

作った会社と連絡がつかないホームページの不具合や引き継ぎについて相談する

まとめ

画像が表示されないときは、どのサイトでも出ないのか、1つのサイトだけなのかを先に切り分けると、見る所が絞れます。自社のサイトなら、開発者ツールで読めていない画像を見つけ、その住所と理由から直す所を決めます。

• どのサイトでも画像が出ないなら見る側のブラウザ、1つのサイトだけならキャッシュやサイトの側を疑う
• Chrome は「サイトの設定」の画像と JavaScript、キャッシュ、拡張機能、版の順に確かめる
• 自社サイトは開発者ツールで読めていない画像を探し、住所・名前・形式（HEIC）・http の混在・キャッシュ・アクセス権を確かめる
• 画像は表示する大きさに合わせて縮めてから載せ、外部の画像は許しを得て自社のサーバーに置く