HTMLで画像が表示されない時の正しい対処法！原因を特定して解決する術

Webサイトを制作しているときに「HTML 画像 表示されない」といった問題が起こることがあります。原因はファイル名、パス、拡張子、サーバーの設定、ブラウザの制限など多岐にわたりますが、正しい手順で一つひとつ確認すれば、多くは短時間で解決できます。この記事では、画像が表示されないときに考えられる検索意図を踏まえて、具体的な原因とその対策を整理しました。最新情報を反映してお伝えしますので、原因を特定し、確実に表示できるようにしましょう。

HTML 画像 表示されない原因と最初に確認すべきポイント

HTML 画像 表示されないという現象には、多くの原因が絡んでいますが、最初に確認すべき基本的なポイントがいくつかあります。これらを確認するだけで、「何が原因かわからない」という状態から大きく前進できます。

画像ファイルがサーバーに存在するか

まずは物理的に画像ファイルがサーバー上にアップロードされているかを確認します。HTMLファイルが指しているフォルダに正しくファイルが置かれていないと表示されません。ローカル環境では見えていても、公開サーバーにはアップされていないケースが頻繁にあります。FTPクライアントやホスティング管理画面でファイルの存在を確認してください。

ファイル名と拡張子の一致

画像ファイル名や拡張子がHTML内の記述と完全に一致しているか確認します。大文字・小文字の違い、全角文字や特殊文字、日本語や空白などが原因で認識されないことが多くあります。たとえば sample.JPG と sample.jpg はサーバーによっては別のファイルとして扱われ、表示されない原因となります。

パスの指定（相対パス・絶対パス・ルートパス）の間違い

画像を読み込む際のパス指定方法が誤っていることも原因のトップクラスです。HTMLファイルの位置から画像ファイルへの道のりを正しく指定する「相対パス」、サイトのルートから記述する「ルートパス」、ネット上の完全な住所である「絶対パス」の使い方を誤ると表示されません。フォルダ構成と記述が一致するか細かく確認してください。

HTMLタグ・コードのミスが原因で画像が表示されないケース

タグや属性の記述ミスによって、意図した画像が表示されない場合があります。細かいスペルの誤りや属性設定の漏れなど、コードの正確性が重要です。ここではHTMLタグ周りの典型的なミスと対応を見ていきます。

imgタグやsrc属性のスペルミス

imgタグのタグ名や属性名を間違えていると、ブラウザは正しく解釈できず画像を読み込めません。例えば 「scr」 と書いてしまう、「source」や「image」と誤記するなどのミスがあります。src 属性が正しく記述されているか、ダブルクォーテーションで囲まれているかなど細部をチェックしましょう。

alt属性の扱い

alt 属性は画像が表示できないときに代替テキストを表示する重要な属性です。ただし、画像が正常に読み込まれている限り代替テキストは表示されません。alt属性の記述がない、または空の場合、画像が表示されない状況で情報がまったく伝わらないことがあるため、適切なテキストを記入しておくことが望まれます。

width／height やスタイルの誤設定

画像表示に関する属性である width や height をゼロや非常に小さい値にしてしまっている場合、画像が見えなくなります。また CSS によって親要素や画像要素自体に display:none や visibility:hidden が指定されていたり、opacity がゼロだったりするケースもあります。スタイル設定を含めコード全体を確認しましょう。

サーバー設定・ファイル形式・ブラウザ依存の問題

ファイルが正しくあり、HTMLでの記述も問題ないにも関わらず画像が表示されない場合は、サーバー設定やファイル形式、ブラウザや端末による制約が原因であることがあります。それらを見極めて適切に対応することで解決に至ります。

ファイル形式・拡張子の互換性

画像の形式（jpg、png、gif、webp、heicなど）がブラウザや端末でサポートされているかを確認します。特に webp は比較的新しい形式のため、古いブラウザや特定環境で表示されないことがあります。また、拡張子が間違っていたり、ファイルの形式変換が正しく行われていなかったりすると読み込めません。

サーバー上の権限・パーミッション設定

画像ファイルやフォルダに対して読み取り権限が正しく設定されていないと、ブラウザはファイルを取得できません。一般的に画像ファイルは読み取り可能（公開可能）な権限であることが必要です。ホスティングサービスの管理パネルからパーミッションを確認・修正してください。

ブラウザキャッシュやCDNの影響

更新直後に古い画像が表示され続けるのはキャッシュの影響が大きいです。ブラウザキャッシュ、サーバーキャッシュ、またサイトで CDN を利用している場合は CDN 側のキャッシュも関係します。スーパーリロードやキャッシュクリアを試したり、CDN のキャッシュ刷新を行ったりして、最新のファイルが配信されているか確認します。

レスポンシブデザイン・モバイル表示で起きやすいトラブルと対策

スマホやタブレットで閲覧するユーザーが大多数となっている現在、モバイル表示で画像が見えない問題も注意が必要です。画面サイズや環境によって表示が崩れたり、画像が非表示にされたりすることがあります。ここではよくあるモバイル特有の原因とその対処法をまとめます。

CSSメディアクエリによる非表示設定

レスポンシブ対応のため CSS にメディアクエリを使っていて、一定幅以下のときに画像を非表示にしているケースがあります。例えばスマホ幅では display:none や visibility:hidden を加えていたり、画像コンテナを collapse していたりするものです。スマホ幅で見えるかどうかブラウザの開発ツールを使って確認し、非表示設定をオフにする方法を検討してください。

遅延読み込み（lazy loading）の影響

ページの読み込み速度を上げるために最近よく使われる遅延読み込み機能が、スクロールが不十分な場合や JavaScript の実装ミスで画像が読み込まれないことがあります。lazy 属性や Intersection Observer による実装を確認し、エラーが出ていないか、画像の位置が正しく連動しているかを検証してください。

モバイルのブラウザ互換性と形式の制限

特定のモバイルブラウザでは webp や heic といったファイル形式がサポートされていなかったり、セキュリティや設定で外部リソースの読み込みを制限していることがあります。また OS 側の設定で画像ダウンロードや表示に制限がかかっている可能性もありますので、異なるデバイスでテストすることが重要です。

WordPress・CMS固有の原因とプラグイン・テーマの問題

HTML コードだけでなく、WordPress などの CMS を使っている場合には、テーマやプラグイン、メディア設定などが原因となることが多いです。CMS の構造を理解し、管理画面や設定を確認することで、HTMLタグで表示されない問題も解決可能です。

メディアライブラリに正しく登録されていない

WordPress の中でメディアをアップロードしたが、ライブラリ上ではあるけど実際のファイルがサーバーに反映していないケースがあります。テーマの設定やメディアディレクトリのパス、アップロード先の権限などを確認し、正しい場所にあるかどうかを確認してください。

テーマのテンプレートファイルの img 出力部分に問題がある

テーマによっては画像の HTML を生成するテンプレート部分で、src が動的に生成される仕組みになっていたり、パラメーターが正しく渡されていなかったりすることがあります。特にリサイズ画像やサムネイル画像の呼び出しで誤った関数を使っていたり、URL の生成にミスがあることが原因となります。

プラグインの最適化・遅延読み込み・CDN の設定が悪影響を及ぼす

キャッシュプラグインや画像最適化プラグイン、CDN プラグインなどは便利ですが、設定次第では画像を読み込まないような挙動をすることがあります。例えば遅延読み込み設定が誤っていたり、最適化時に不正な画像サイズが登録されたり、CDN 配信先にファイルが存在しないなどです。プラグインを一時停止して確認することも有効です。

診断手順と原因特定のためのチェックリスト

どんな原因が考えられるか整理したら、実際に順番を追って診断していくことが重要です。闇雲に修正するのではなく、チェックリストに基づいて順に確認することで原因特定のスピードが上がります。

画面表示状態の観察

まずブラウザの表示で症状を観察します。画像の代替テキストが見えるか、×マークが出るか、空白かなど表示パターンによって原因の範囲を絞ることができます。たとえば代替テキストが見えるならサーバーにファイルがないかパスが間違っている可能性が高いです。×マークは src の指定ミス、空白は CSS やサイズ設定の問題などが考えられます。

コードをレビューする

HTML ソースコードを開き、img タグ周り、src 属性、alt 属性、閉じタグ状態などを細部まで確認します。フォルダ名やファイル名が記述通りか、拡張子の表記やスペルミスがないかを重点的に見ます。また CSS や JavaScript で非表示になる指示が混ざっていないかもコード全体でチェックします。

ブラウザやデバイスでのテスト

問題が起きている環境以外でも表示を確認します。デスクトップ、スマホ、異なるブラウザで試し、キャッシュをクリアして最新の状態を読み込みます。さらに、遅延読み込みの挙動や CDN の影響があるか見極めるために、プラグインや設定を一時的にオフにするなどのテストも有効です。

サーバーアクセスログ・ブラウザデベロッパーツールの活用

DevTools やブラウザの検証機能で、ネットワークタブを見て対象画像のステータスコードを確認します。404 や 403 エラーならパスや権限が原因です。その他 500 番台ならサーバー側の設定ミスやバグの可能性。ログを取って、いつから表示されないか、どのファイルで起きるかを記録するのも効果的な方法です。

実践的な修正例とコードサンプルでの対応方法

具体的なコードや修正例を見ながら、実際にどう直していくかを示します。テーマや環境によって微妙に異なりますが、基本パターンを理解しておくと応用が効きます。

正しい img タグの例と間違い例比較

このように、src 属性名・alt 属性名のスペル・拡張子の大文字小文字・属性の入れ忘れなどがよくある間違いです。同じ例を真似てチェックしてください。

権限設定とパーミッションの修正例

サーバーのファイルやフォルダのアクセス権限を設定する際は、公開を想定して読み取り可能な状態にする必要があります。たとえば画像ファイルは所有者・グループ・その他に対して読み取り権限があるか、フォルダは公開可能な権限が付与されているか確認し、問題があれば数値（例 644、755）などで設定を修正します。

遅延読み込み（lazy loading）実装の正しい使い方

遅延読み込みを利用する場合は、画像タグに loading=”lazy” を付与するか、Intersection Observer を使ったスクリプトを正しく組み込む必要があります。これに加えて、JavaScript のエラーがないかどうかブラウザのコンソールで確認してください。スクリプトが途中で止まっていると、画像がロードされない状態になることがあります。

WordPress 環境でのテーマ・プラグイン調整例

WordPress を使っているならメディア設定からアップロードの保存場所や URL の設定を確認しましょう。テーマのテンプレート内で画像を出力する関数（例：アイキャッチ画像やサムネイル）に正しいパラメーターが渡されているか、また遅延読み込みプラグインや最適化プラグインが設定ミスを起こしていないかを確認します。必要ならテーマの切り替えテストやプラグインの無効化で切り分けてください。

対処後に確認すべきポイントと予防策

画像表示の問題を解決したあとは、同様のトラブルが再発しないように予防策を講じることが重要です。サイト品質向上やSEO的にも画像表示は非常に大きな要素となりますので、以下のポイントを習慣化するとよいでしょう。

定期的な表示テスト

更新や修正を行ったときは、デスクトップ・スマホ両方で表示確認を行いましょう。ブラウザだけでなく実際のデバイスでもテストし、さまざまな画面サイズ・ブラウザで表示されることを確認することが望ましいです。更新時にうまく表示されなくなる原因も早めに発見できます。

画像ファイルの命名規則を統一する

ファイル名は半角英数字のみを使い、空白を除き、特殊記号は避けます。拡張子も統一して小文字で記述する習慣をつけましょう。フォルダ構成も整理された構成にして、どこにどの画像があるか一目で分かるようにしておくことでミスを減らすことができます。

CMS・テーマ・プラグインの更新と管理

WordPress などを使っている場合、テーマやプラグインのバージョン更新は必ずチェックしましょう。遅延読み込みや画像最適化プラグインに互換性の問題が出ることがあります。更新後は必ずサイト全体の画像表示を含むテストを行い、問題を未然に防ぎます。

キャッシュ管理のルールを設定する

ブラウザキャッシュや CDN のキャッシュ、サーバーキャッシュなどが古い状態を残していると、見た目には更新されていないように見えることがあります。キャッシュをクリアする手順やタイミングを決め、更新後には適切にキャッシュを更新・リフレッシュするルールを設けましょう。

まとめ

「HTML 画像 表示されない」という問題は、一見複雑に思えますが、原因を体系的に整理し、手順を追って確認すれば確実に解決できます。まずはファイルの存在、ファイル名・拡張子、パスの指定など基本部分をチェックし、タグ記述・サーバー権限・ブラウザ・CMS の設定等を順に確認してください。画像形式や遅延読み込み、モバイル表示などの最新の利用環境にも注意しつつ、対策を行うことで、今後同じ問題が起きにくくなります。確実な対応でWebサイトの信頼性とユーザ体験を高めましょう。