html画像表示 されない原因を解決！初心者でも試せるチェックリストと修正法

Webサイトを制作している際、最もよく遭遇するトラブルの一つが「画像が正しく表示されない」という問題です。コードを正しく書いたつもりでも、ブラウザで確認するとバツ印が表示されたり、リンク切れのアイコンが出てしまったりすると、どこを直すべきか分からず困ってしまいますよね。

この記事では、html画像表示 されないとお困りの方に向けて、主な原因とその解決策を詳しく解説します。HTMLの記述ミスからパスの指定方法、サーバーの設定まで、段階を追って確認できるようまとめました。初心者の方でもスムーズに解決できるよう、専門用語もわかりやすく補足していますので、ぜひ参考にしてください。

画像の表示トラブルは、些細な入力ミスや環境の違いによって起こることがほとんどです。まずは落ち着いて、一つひとつの項目を今の状況と照らし合わせてみましょう。この記事を読み終える頃には、きっと画像が正しく表示されるようになっているはずです。

html画像表示 されないときにまず確認すべき基本の記述ミス

HTMLで画像が表示されない原因の多くは、非常に単純なタイピングミスやファイル名の指定間違いにあります。まずは、ソースコード（プログラムの設計図）をじっくり見直すことから始めましょう。

ファイル名と拡張子が完全に一致しているか

画像ファイルの名称や、その末尾についている「.jpg」や「.png」といった拡張子が、HTMLのコード内で記述したものと1文字でも異なると画像は表示されません。特に注意が必要なのが、大文字と小文字の区別です。お使いのパソコン上では区別されずに表示されていても、Webサーバー上では「image.jpg」と「image.JPG」は全く別のファイルとして扱われることが一般的です。

また、拡張子の種類も間違えやすいポイントです。例えば、実際には「.jpeg」なのに「.jpg」と書いていたり、「.webp」という比較的新しい形式であることに気づかなかったりするケースがあります。まずは実際の画像ファイルの名前を右クリックして「名前の変更」からコピーし、HTMLに貼り付けて間違いがないか確認しましょう。

ファイル名に全角文字やスペースが含まれていないか

画像ファイル名に日本語（全角文字）や、全角のスペースが含まれていると、ブラウザがファイルを正しく読み込めない原因になります。Webサイト制作のルールとして、ファイル名は必ず半角英数字とハイフン（-）またはアンダーバー（_）のみで構成するようにしましょう。

もし「画像1.jpg」のように日本語を使っている場合は、すぐに「image01.jpg」のようにリネームして、HTML側の記述も更新してください。一見、日本語でも表示されることがありますが、特定のブラウザや環境でリンク切れを起こすリスクが非常に高いため、推奨されません。また、目に見えない「全角スペース」が紛れ込んでいないかも、テキストエディタの検索機能などを使ってチェックしてみてください。

imgタグの構文が正しく記述されているか

HTMLの基本的な書き方に間違いがないかも再確認が必要です。画像を呼び出すための「imgタグ」は、src属性（画像の場所を指定する部分）が正しく書かれている必要があります。例えば、「src」と書くべきところを「scr」と書き間違えてしまうミスは、ベテランでも時折やってしまう典型的なエラーです。

また、imgタグには閉じタグ（</img>）が必要ないことも特徴です。文末を「/>」で閉じる書き方（XHTML形式）もありますが、現在の主流であるHTML5では単に「>」で閉じるのが一般的です。属性同士がくっついていないか、余計な記号が入っていないかを確認しましょう。

パス（Path）の指定方法に潜む落とし穴と正しい書き方

ファイル名が正しくても、そのファイルが「どこにあるか」を教える「パス」の指定が間違っていると、画像は表示されません。パスには「絶対パス」と「相対パス」の2種類があり、特に初心者の方がつまずきやすいのが相対パスの考え方です。

相対パスの指定が現在のファイル位置と合っているか

相対パスとは、「今開いているHTMLファイルから見て、画像がどこにあるか」を記述する方法です。同じフォルダ内に画像があれば「image.jpg」だけで済みますが、別のフォルダに入っている場合はその階層を指定しなければなりません。例えば、画像が「images」という名前のフォルダの中にある場合は、「images/image.jpg」と記述します。

ここでよくある間違いが、フォルダ名の前後にスラッシュを入れ忘れたり、逆に余計なスラッシュを入れてしまったりすることです。現在のファイルがどの階層（ディレクトリ）にあり、そこから画像までどう辿り着くのかを頭の中で整理するか、図に書いて確認してみるのが確実な方法です。

上の階層へ戻るための記号「../」を正しく使えているか

画像が「現在のHTMLファイルよりも上の階層」にある場合、特殊な記号を使って指定する必要があります。HTMLの世界では、「../」という記述が「一つ上のフォルダに戻る」という意味を持ちます。例えば、2つ上の階層にある画像を表示したい場合は「../../image.jpg」と記述します。

この「../」を「./」（現在の階層）と混同してしまったり、ドットの数を間違えて「…/」としてしまったりすると、ブラウザは画像を見つけられません。相対パスを指定する際は、今編集しているHTMLファイルの場所を起点にして、何回上の階層に戻る必要があるかを正確に数えるようにしましょう。

絶対パスでの指定に誤りがないか確認する

絶対パスとは、URLを「https://」からすべて記述する方法です。他のサイトの画像を表示する場合や、サイト全体で共通の画像を使う際によく利用されます。この場合、URLをブラウザのアドレスバーに直接貼り付けて画像が表示されるかを確認するのが手っ取り早いチェック方法です。

もし自サイト内の画像を絶対パスで指定していて表示されない場合は、ドメイン名の綴り間違いや、SSL化（httpsへの移行）に伴う「http」と「https」の混在などが原因として考えられます。最近のブラウザでは、セキュリティの観点から「https」のページで「http」の画像を読み込もうとするとブロックされる仕組みがあるため注意が必要です。

サーバーやブラウザ環境が原因で画像が出ない場合の対処法

コードやパスに間違いがないのに表示されない場合、制作環境やサーバーの設定といった「外側」の要因が考えられます。自分のパソコン上（ローカル環境）では見えているのに、ネットに公開したら見えなくなったという場合は、このセクションをチェックしてください。

サーバーへ画像ファイルが正しく転送されているか

Webサイトを公開する際は、HTMLファイルだけでなく画像ファイルもサーバーにアップロードする必要があります。FTPソフトなどを使ってファイルを送る際、画像ファイルだけを送り忘れていたり、指定のフォルダとは違う場所にアップロードしてしまったりすることがよくあります。

サーバー側の管理画面やFTPソフトを開き、HTMLファイルに記述したパスと同じ階層構造で画像が存在しているかを直接確認しましょう。また、稀にアップロード中に通信が途切れて、ファイルサイズが0バイト（中身が空の状態）で保存されていることもあります。画像が壊れていないか、サーバー上のファイルを一度ダウンロードして確認してみるのも一つの手段です。

ブラウザのキャッシュが古い情報を保持していないか

ブラウザには、一度読み込んだ情報を一時的に保存して、次回以降の表示を速くする「キャッシュ」という機能があります。画像を差し替えたのに古い画像が表示され続けたり、修正したはずなのにバツ印のままだったりする場合、このキャッシュが原因の可能性があります。

ブラウザの更新ボタンをただ押すだけでなく、キャッシュを無視して強制的に最新の状態を読み込む「スーパーリロード」を試してみましょう。Windowsなら「Ctrl + F5」、Macなら「Cmd + Shift + R」で実行できます。これで画像が表示されれば、単に古い情報が残っていただけで、サイトの記述自体は正しかったということになります。

セキュリティ設定や拡張機能が干渉していないか

特定のブラウザやセキュリティソフトの設定が、画像の読み込みを妨げているケースもあります。例えば、ブラウザに入れている「広告ブロック（AdBlock）」などの拡張機能が、画像ファイル名に「ad」や「banner」といった文字が含まれている場合に、それを広告と誤認して非表示にしてしまうことがあります。

ファイル名に「adv」、「banner」、「pr」などのキーワードが入っていると、フィルタリングに引っかかりやすくなります。表示されない場合は、試しに「test-img.jpg」のような無難な名前に変更して確認してみましょう。

また、職場や学校などの制限されたネットワーク環境では、外部サーバーからの画像取得が制限されていることもあります。もし特定の環境だけで画像が出ない場合は、スマートフォンのテザリングや、プライベートブラウズモード（シークレットモード）を使って、設定の影響を受けていないか確認してみるのが有効です。

スマホや特定のデバイスだけで表示されない原因と対策

パソコンでは綺麗に見えているのに、スマートフォンで見ると画像が消えていたり、表示が崩れていたりすることがあります。これはデバイス特有の仕様や、モバイルデータ通信の制限が影響している可能性が高いです。

画像ファイルの形式が対応していない可能性

iPhoneなどのApple製品で撮影した写真は、標準で「HEIC」という形式で保存されることがあります。この形式はそのままでは多くのWebブラウザで表示することができません。Webで画像を表示させるためには、必ず「JPEG（.jpg）」「PNG（.png）」「GIF（.gif）」、あるいは最近推奨されている「WebP（.webp）」といった汎用的な形式に変換する必要があります。

また、古いバージョンのブラウザを利用しているユーザーの場合、最新の画像形式であるWebPに対応していない可能性もあります。多くのデバイスで確実に表示させるためには、JPEGやPNGといった伝統的な形式を使用するか、HTMLの<picture>タグを使って、環境に応じて最適な形式を出し分ける工夫が必要です。

画像サイズが大きすぎて読み込みに失敗している

高画質なデジタルカメラやスマートフォンで撮影した写真をそのままアップロードすると、1枚で数メガバイトという巨大なファイルサイズになることがあります。パソコンの高速な回線なら表示されますが、モバイル通信環境では読み込みに時間がかかりすぎてタイムアウト（通信中断）し、表示されないことがあります。

Webサイトに掲載する画像は、表示サイズに合わせて適切にリサイズし、ファイルサイズを軽量化するのが鉄則です。横幅が数千ピクセルもあるような大きな画像は、あらかじめ加工ソフトやオンラインの圧縮ツールを使って縮小しておきましょう。これにより、表示トラブルを防ぐだけでなく、サイトの表示速度が向上し、検索エンジンからの評価（SEO）にも良い影響を与えます。

CSSの設定によって画像が隠されている

HTMLの記述に問題がなくても、デザインを指定するCSS（スタイルシート）の記述によって画像が見えなくなっていることがあります。特にレスポンシブデザイン（画面サイズに合わせてレイアウトを変える手法）を採用している場合、スマホサイズの時だけ「display: none;」という命令が働いて画像を消している可能性があります。

また、画像の上に別の要素（透明なボックスや文字など）が重なってしまい、画像が隠れて見えないというケースも考えられます。特定の画面幅だけで表示されない場合は、CSSの「メディアクエリ」という設定を見直し、意図しない非表示設定が適用されていないか、または「z-index」などの重なり順を指定するプロパティに誤りがないかを確認してください。

画像の表示トラブルを未然に防ぐための推奨作業フロー

ここまではトラブルが起きた後の対処法を紹介してきましたが、日頃から「表示されないトラブルを起こさない」ための習慣を身につけておくことも大切です。スムーズなWeb制作のために取り入れたい工夫をいくつかご紹介します。

開発者ツールを使ってエラー内容を確認する習慣をつける

画像が表示されないとき、ブラウザの「開発者ツール（デベロッパーツール）」を使えば、何が原因でエラーが起きているかを一瞬で特定できます。Google Chromeなどのブラウザで、表示されない箇所を右クリックして「検証」を選択するか、キーボードの「F12」キーを押してみてください。

画面に表示される「Console（コンソール）」タブを確認すると、画像が見つからない場合は赤字で「404 Not Found」というエラーメッセージが表示されます。ここには「どのパスを探して見つからなかったか」が正確に記されているため、自分の書いたパスのどこが間違っていたのかを客観的に判断できます。エラー文を読み解く力は、トラブル解決のスピードを飛躍的に高めてくれます。

alt属性（代替テキスト）を必ず設定する

imgタグには、画像が表示されなかったときに代わりに表示されるテキストを指定する「alt属性」があります。万が一、リンク切れなどで画像が表示されなかったとしても、このalt属性が書かれていれば「そこに何があるはずだったのか」をユーザーに伝えることができます。

また、alt属性は検索エンジンのクローラー（情報を集めるプログラム）が画像を理解するためや、視覚障害のある方が使う音声読み上げソフトにとっても非常に重要な情報です。面倒に感じるかもしれませんが、すべての画像に適切なalt属性を入れることを徹底しましょう。これにより、表示トラブル時のユーザーのストレスを軽減し、アクセシビリティ（使いやすさ）の向上にも繋がります。

画像管理のルールを明確にする

プロジェクトが大きくなるにつれて、画像ファイルの数も増えていきます。管理が煩雑になると、どこにどの画像があるか分からなくなり、パスの指定ミスも起きやすくなります。最初からフォルダ構成や命名規則を決めておくことが、トラブルを防ぐ一番の近道です。

こうしたルールを自分の中で（あるいはチームで）守ることで、コードを書く際に迷いがなくなり、今回のような「表示されない」といったトラブルの発生率を大幅に下げることができます。

html画像表示 されないトラブルを防ぐポイントまとめ

まとめ

Web制作において、html画像表示 されないという問題は、誰もが一度は経験する道です。しかし、その原因のほとんどはコードのタイピングミス、パスの指定ミス、あるいはアップロードの不備といったシンプルなものに集約されます。問題が発生したときは、まず以下の表にあるチェックポイントを順番に見直してみてください。

画像が表示されない原因を一つひとつ潰していく作業は、一見地道で大変なように思えますが、Webの仕組みを理解するための絶好の機会でもあります。今回学んだ「パスの考え方」や「開発者ツールの使い方」は、画像表示だけでなく、CSSの読み込みやリンクの設定など、あらゆる場面で役立つ知識となります。

もしどうしても解決しない場合は、一旦そのコードから離れて休憩し、後で新鮮な目で見直してみるのも良い方法です。冷静になれば、意外とあっけないミスに気づけるかもしれません。この記事が、あなたの制作におけるトラブル解決の一助になれば幸いです。