ホームページの画像がうまく表示されない原因とは？対処法も合わせて解説
ホームページを作成・管理する際に「画像が表示されない」という経験がある人もいるのではないでしょうか。画像をアップロードしたはずなのに表示されないトラブルが起こることは珍しくありません。この記事では、ホームページ上の画像が表示されていないときの理由や対処方法を解説します。ホームページの画像にトラブルがあったときは参考にしてください。
1. ホームページにおける画像表示の重要性
ホームページでユーザーや顧客の興味を引くためには、効果的に画像を表示させることが大切です。文字だけのホームページよりも、画像やイラストがある方が理解しやすく、記憶にも残ります。しかし、管理側で画像が表示されるよう指定したにも関わらず、画像が表示されないこともよくあります。
2. ホームページに画像を表示させる手順
画像が表示されない原因を探る前に、まずは基礎知識として画像表示の手順を解説します。実際の手順を再度確認してみましょう。
2-1. ホームページに載せる画像ファイルの準備
まずはホームページに表示させたい画像ファイルを用意します。画像ファイルは規定のフォーマットで作成されていなければなりません。
一般的に使われる画像ファイルのフォーマットは、以下のいずれかです。
- img
- jpg
- png
- bmp
- gif
これらのうち、サーバーやブラウザが対応していないフォーマットはうまく表示されないため注意が必要です。
2-2. ホームページのサーバーへのアップロード
次に、用意した画像をサーバーへアップロードします。画像の保管場所として、サーバー内に「images」のような名称で画像用のフォルダを作成し、他のHTMLファイルなどと区別して管理することがおすすめです。
画像のサーバーへのアップロード方法は使用するサーバーによって異なるため、サーバー側の指示に従いましょう。
ホームページのサーバーとは
サーバーとは、ネットワーク上のデータ保管庫のことです。作成したホームページのデータをインターネット上で閲覧可能にするためには、サーバーにアップロードする必要があります。
ホームページ閲覧の際にURLでサーバーにアクセスすると、要求したページがサーバーから読み込まれ、表示される仕組みです。URLには、どのサーバーの何という名前のファイル、といった指示が含まれています。
2-3. HTMLファイルにimgタグを入れる
ホームページで画像を表示させるにはHTMLファイル内のimgタグで画像を指定する必要があります。
imgタグで最低限必要な要素は、表示する画像ファイルを指定するsrc属性です。
実際の書き方は以下のようになります。
<img src="https://xxxxxxxxxxxxxxxxxx.jpg">
このタグを入力することによって、タグのある場所に「https://xxxxxxxxxxxxxxxxxx.jpg」という画像が表示されるよう指示を出すことができます。
imgタグとは
imgタグとは<img ……>の山括弧で括られた内部全体のことです。imgタグで画像に関するさまざまな指示をすることによって、ホームページに思い通りの画像を表示できます。
imgタグに付随するsrc属性以外の要素には、以下のものがあります。
- alt属性（画像が表示できない場合の代替テキスト）
- width（属性画像の横幅を指定）
- height（画像の高さを指定）
HTMLファイルとは
HTMLとは、ホームページを作成するためのプログラミング言語です。HTMLが入力されているファイルは、HTMLファイルやHTMLソースと呼ばれます。imgタグもHTMLの一部です。他に、見出し、ホームページの本文も、HTMLによって記述することが多いでしょう。
基本的にホームページの外観は、HTMLとCSSという言語で作られています。
CSSとは
CSSとは、HTMLと組み合わせて使用する言語で、Webサイトの文字、大きさ、装飾などを設定します。CSSは主に見た目の装飾、HTMLはページの文章構造を定義するといった点が違いです。
画像に関してはHTMLで指示することが多いですが、ホームページの背景などはCSSで指定すると、ユーザー側の端末画面に適した表示ができ便利です。
3.ホームページの画像がうまく表示されない理由は大きく3パターン
ホームページで画像がうまく表示されないとき、主な原因として以下の3つが考えられます。
- imgタグのパスに誤りがある
- 画像ファイルの不具合
- 回線やサーバーなど、imgタグや画像ファイル以外の問題
以下でそれぞれについて詳しく解説します。
4. imgタグ内のパスの誤り
imgタグのパスとは、ダブルクォーテーションに囲まれた、画像のURL部分です。
<img src="https://xxxxxxxxxxxxxxxxxx.jpg">
ここは、サーバー上の画像がある場所を正確に指定していなければ画像が表示されません。画像が出ないときは、まずHTMLタグを見て、画像のURLや記述方法が正しいかどうかを確認しましょう。具体的には以下のようなパターンがあります。
4-1. imgタグ内のパスの誤字脱字
imgタグのパスにおける、単純な誤字脱字が原因となるケースはよくあります。特に他の画像は表示されていて、特定の画像だけが表示されない場合はimgタグの記述ミスであることが多いでしょう。よくあるミスはダブルクォーテーション（""）や拡張子（jpg/pngなど）の脱落です。
4-2. 画像ファイルのパス（URL）の不具合
パスの中に半角英数以外が含まれていると正常に表示されないことがあります。特に日本語の文字が含まれているとエラーの原因にもなるため、日本語はファイル名やフォルダ名には使わないようにしましょう。画像ファイルも同様に注意が必要です。
5. 画像ファイルの不具合でホームページの画像が表示されない
HTMLの記述ではなく、画像ファイルそのものに不具合があるのかもしれません。画像ファイルの不具合でホームページの画像が表示されない理由について解説します。
5-1.ファイルがアップロードされていない
ローカルフォルダに保存してある画像ファイルを指定しても、ホームページには表示されません。ホームページに画像を表示させるには、サーバーにアップロードした画像ファイルを指定する必要があります。
「file://」から始まっている場合はローカルフォルダの画像です。アップロード済みのファイルのフルパスは基本的に"http://"（もしくは"https://"）で始まることになっているため、確認してみましょう。
5-2.指定ファイルが画像ではない
imgタグで指定されたファイルが画像ではないことがあります。ファイルが画像か、画像でないかを確認するためには、拡張子を見ましょう。上述した通り、よく使用される画像の拡張子は、img/jpg/png/bmp/gifなどです。imgタグに記載された画像ファイルに、これらの拡張子が含まれていない場合、画像ではないファイルを指定している可能性があります。
5-3.指定ファイルが画像ではない
指定ファイルの拡張子が画像であるにもかかわらず表示されない場合は、サポートされていない拡張子かもしれません。該当するフォーマットはwebp、heifなどです。
この場合はペイントやフォトなどの画像編集ソフトで画像を開き、jpg/pngの形式で保存してから、再度アップロードしてimgタグで指定しましょう。
webpとは
webpとは、Googleが作った画像のフォーマットです。Chromeなどの主要ブラウザでは対応していますが、他の一部のブラウザでは対応していないため、必ずしも表示されるとは限りません。
heifとは
heifとは、iOSデバイスで使われているフォーマットで、拡張子は「.heic」です。iPhoneなどのAppleデバイスで撮影した画像を取り込んだ場合、このフォーマットになっていることが多いため、表示されない場合はフォーマットを確認しましょう。
5-4.画像ファイルの破損
画像ファイルは、データ内部では2進数などの数字で記録されています。その数字の羅列がきちんと記録されなくなると、ファイル名があっていても読み取れなくなります。
ローカル保存しているファイルが正常に開けて画像を表示できる場合は、アップロードの際に破損した可能性が高いといえます。一度サーバー上のファイルを消去し、再度アップロードしてみてください。
5-5.カラーモードがCMYK
画像ファイルにはCMYKとRGBの2種類のカラーモードがあります。画像のカラーモードがCMYKの場合、Internet ExplorerやAndroidでは表示されません。
カラーモードを画像編集ソフトなどでRGBに変更し、改めて画像ファイルを保存することで解決できます。この場合、サーバーへの再アップロードも必要です。
カラーモードとは？
カラーモードとは、画像やイラストの色の表現方法です。
CMYKは色の三原色であるC（シアン）・M（マゼンタ）・Y（イエロー）に、純粋な黒を表現するためのK（ブラック）を加えたものをいいます。これに対して、RGBは光の三原色R（赤）・G（緑）・B（青）を用いた表現方法となります。
6.回線やサーバーなどの問題でホームページの画像が表示されない
画像が表示されない原因には、回線やサーバーなどの問題が関わっていることもあります。以下で詳しく解説します。
6-1. サーバーや回線の混雑
すべての設定が正常で画像ファイルにも問題がなく、それでも画像が表示されない場合は、サーバーの混雑で画像が表示されないのかもしれません。
回線やWebサーバーが混雑していると、読み込みに時間がかかります。時間をおいてからアクセスし、正常に表示されるようになった場合は混雑などの一時的な問題が原因とわかります。
6-2. アクセス数に対するサーバーのスペック不足
アクセス数に対するサーバーのスペックが不足していると、画像が表示されないことがあります。アクセス数の多いWebサイトを安定して運営するためには、サーバーの増強もおすすめです。
ただしサーバーのスペックと費用は比例するため、必要なだけのスペックのものを契約することが大切といえます。
7. まとめ
ホームページを作成する際、画像が表示されないときは、紹介した1つひとつのチェック項目を確認することで問題が解消される可能性が高いでしょう。ただ画像が多く、手間と感じられることもあるかもしれません。
そこでおすすめしたいのが、国産CMSの Webサイト作成ツールBiNDupです。画像編集ツールSiGNを使って写真を加工したり、ロゴを作ったりできるため、専門知識がなくてもトレンドを押さえたホームページを作成できます。独自ドメインや常時SSLに対応した大容量サーバーがあるうえに、有料コースでは緊急時のサポートがついてさらに安心です。
自社でホームページを作るなら、「内製化」に必要な機能がそろったBiNDupをぜひご検討ください。
