Home / HTML / 意外と簡単!HTMLで画像表示の方法と表示されない時の9つの原因

意外と簡単!HTMLで画像表示の方法と表示されない時の9つの原因

Pocket

e38b5a689a9894ae8baf27ab17aff316_s

HTMLでも簡単に画像表示ができることをご存知ですか。画像を表示することで、よりわかりやすく商品やサービス、サイトイメージを紹介することが可能です。画像表示にはimgタグを用い、難しい操作も必要ありません。

ここでは、HTMLの画像表示方法と表示されない場合の主な原因について紹介していきます。画像表示方法は簡単ですが、さまざまな原因が理由で上手く表示できない場合があります。

そんなときは考えられる9つの原因を見直し、再度アップロードを試みてみましょう。特に、最近になってHTMLに興味を持ち始めた方は参考にご覧ください。

スポンサーリンク

1.HTMLで画像を表示させる方法

7888307bed3e0e30a9e420ed6cbc1bea_s

HTMLでも画像を表示させることが可能です。テキストだけの説明・紹介よりも、画像がある方が信憑性が増しますし、閲覧者も見やすくなります。imgタグを用いて画像表示をしますが、非常に簡単ですので、しっかりと確認していきましょう。

1.imgタグを用いる

HTMLで画像を表示させたい場合はimgタグを用います。imgとは「image(画像)」の略称のことです。imgタグを用いることで簡単に画像表示ができます。

2.srcでどこに画像があるかを指定

imgタグで画像を表示する際は”src”属性を指定します。「<img src=”beer1.jpg”>」というように、値にはダブルクォーテーションで囲った画像のアドレスを入力します。「<img src=”画像アドレス”>」を覚えておきましょう。

3.altは代替テキスト

「img src=”beer1” alt=”ビールの写真1”」というように、alt属性には画像の説明を入力します。画像説明は、目の不自由な方向けの読み上げ機能や一般的な音声機能などで読み上げてくれます。

「img src=”画像アドレス” alt=”画像説明”」と覚えておきましょう。

4.対応している画像の形式

対応している画像形式はGIF形式、JPEG形式、PNG形式です。それぞれ、特徴が異なっており向いている画像も違います。また、PNG形式は、古いブラウザでは対応していない場合があるため注意しましょう。

1.GIF

GIH(拡張子.gif)は、8bit:256色まで使用ができます。色数が少なめの画像に適しており、イラスト画像などに向いています。

2.JPEG

JPEG(拡張子.jpg)は、24bit:約1677万色まで使用ができ、色数が多いため写真などの複雑な画像に向いています。

3.PNG

PNG(拡張子.png)は、24bit:約1677万色まで使用でき、色数の少なめなイラスト画像や写真、どちらにも向いています。ただし、写真の場合はデータ量が大きくなってしまいます。

2.画像が表示されない場合に考えられる9つの原因

9dab7b986367c03354e279e2b920dd2a_s

サーバにアップロードしたは良いものの、画像が表示されない場合があります。画像が表示されないのには必ず原因があり、その原因は意外にもちょっとしたミスであることが多いです。

ここでは、画像が表示されない場合に考えられる9つの原因について紹介しています。どれも基本的なことだからこそ、実際の場面で一つひとつ見直すようにしましょう。

1.回線の混雑

ありがちな原因ですが、WEBサーバが混雑している場合は画像が表示されないことがあります。時間をおいて再度試してみましょう。もしくは、混雑が少ないであろう夜中や朝方などの時間に読み込んでみるといいでしょう。

2.セキュリティソフトによる干渉

Norton Personal FirewallやNorton Internet Securityなど、セキュリティソフトをインストールしている場合は、セキュリティソフトが邪魔をして画像が正しく表示されない可能性もあります。

セキュリティソフトを使用している場合は、一旦、セキュリティをオフにして再度試してみましょう。

3.タグの入力ミス

画像表示に限らずですが、上手く反映されない場合はタグの記述を間違えているかもしれません。「<img src=”画像アドレス”>」で、書いたコードが間違っていないか再度確認をしましょう。

急いで作っているときや惰性で作業をしているときに起こりがちなミスです。

4.画像ファイルのパスの間違い

正しく画像が表示されない原因として、画像ファイルのパスが間違っている可能性があります。「file://〜」と画像ファイルのパスがなっている場合は、インターネット上では見ることができません(自分のパソコンでのみ)。

画像ファイルへのパスは「相対パス」か「絶対パス」による記述が必要ですので確認するようにしましょう。「<img src=”file://〜〜□□.gif” alt=””>」などになっている場合は、ほぼ間違いです。

5.ファイル名が間違っている

ファイル名が間違っていて画像が表示されない可能性もあります。全角文字が含まれていないか?大文字と小文字を間違えていないか?スペースが余計に入っていないか?スペースが足りなくないか?拡張子が抜けていないか?など、もう1度確認しましょう。

ファイル名は1文字でも間違っていれば、上手く認識されず正しく画像が表示されません。また、ファイル名の先頭の文字が数字の場合は、サーバによっては拒否されることもあるため気をつけましょう。

6.画像ファイルの破損

画像ファイルが壊れている場合は、正しく表示されません。念のため、自分のブラウザで画像ファイルを開いてみましょう。

自分のブラウザで正しく表示されれば問題ありませんが、開けない場合はファイルが壊れている可能性もあります。他のファイルを用意しましょう。

7.画像の保存形式の間違い

該当画像の保存形式が間違っている可能性もあります。一般的に多くのブラウザがサポートしている形式は「GIF形式」「JPG形式」「PNG形式」の3つです。

3つの形式以外もサポートしているものもありますが、念のため保存形式を確認してみましょう。

8.画像ファイルのアップロードが未完了

そもそも画像ファイルのアップロードが未完了な可能性もあります。もしくは、別のディレクトリにアップロードしている可能性もあります。

「”http://サイトURL/アップロードした画像のファイル名”」で画像が表示されるか確認をしましょう。

9.アスキーまたはテキストモードで転送している

アスキーモードもしくはテキストモードでの転送になっていませんか。画像ファイルはバイナリーモードで転送する必要があるため、アスキーやテキストモードの場合は正しく表示されるわけがありません。

バイナリーモードになっていない場合は、FTPソフトをバイナリーモードに設定しましょう。

まとめ

HTMLでもimgタグを使って簡単に画像表示ができます。画像を載せることで、表現の幅が広がりますし、閲覧者に対してもテキストのみ以上により具体的な訴求ができるようになります。

画像は非常に簡単に表示はできますが、ちょっとしたミスなどが原因で上手く表示されないことも少なくありません。

ファイル名や画像形式の間違い、画像ファイルの破損、タグの入力ミス、セキュリティソフト、パスの間違いなど、画像が上手く表示されない場合は、ここで紹介した9つの原因について確認をしていきましょう。

きっと画像が正しく表示されるはずです。興味がある方は、早速、好きな画像を取り入れてみましょう!

スポンサーリンク

Facebookでのご購読が便利です