HTML imgタグで画像表示させる方法を理解する

HTML imgタグで画像表示させる方法を理解する

HTMLでimgタグを使用すると画像表示することができます。

ただimgタグを記述するだけでは画像は表示されないのでHTMLで使うimgタグはどのような書き方をしてどのような使い方ができるのか説明します。

imgタグの使い方を理解してから、実際にimg要素を作成して画像表示させる応用的な部分までの方法を理解できればと思います。

 

HTMLで画像表示するimgタグの使い方

 

HTMLで画像表示するのはimgタグを使用します。imgタグで要素を作るには以下のようにHTMLを書きます。

 

<img src="表示する画像パス" alt="画像内容">

 

imgタグには閉じタグは使いません。またimgタグで表示した画像はHTML5以前ではインライン要素として、HTML5からはフローコンテンツに属してるタグです。

 

 

そしてimgタグにはsrc属性をつけて実際に画面表示したい画像のパスを絶対パスか相対パスで指定します。そのあとにalt属性を書いて画像の内容を書きます。

画像表示するimg要素の中の使い方をもう少し細かく説明します。

 

画像表示をURLで指定する

 

HTMLのimg要素の中に使う「src属性」は画像表示する「画像のURL」を指定する部分です。HTMLは以下のように書きます。

 

<img src="表示する画像パス" alt="画像内容">

 

imgタグを書いた後に半角スペースを空けてからsrcを書きます。そのあとにイコール、そしてダブルクォートで囲んだ中に表示する画像パスを指定します。

imgタグに使うsrcはSourceの略です。「もと、源、起源」などを意味している単語です。つまりimgで指定する表示画像の元になる場所を示す部分としてsrcは使います。

 

Advertisement

 

 

表示する画像をURLで指定する場合は以下のようにします。

 

<img src="http://example.com/hoge/geho/hogehoge.png" alt="画像内容">

 

この指定方法は絶対パスで表示画像を指定する方法です。

主に外部の画像を指定する場合に使うことが多い方法なのですが、分かりやすくいうと自分のサイトやブログで管理するファイルの中にはない画像の場合のURL指定で使います。

 

 

たとえばサイトの画像を右クリックして別タブで表示してみたとき別タブに表示されてるURLが、その画像の絶対パスのURLです。

絶対パス指定は画像までの経路が長くなります。そしてデメリットがあるとしたら画像ファイルを読み込むたびにドメインからIPを探す手間があり画像表示まで少し時間がかかることがあることが挙げられると思います。

とは言っても画像表示には絶対パス指定の他に相対パス指定があります。以下から説明します。

 

フォルダ内の画像を表示する

 

HTMLのimgタグの属性srcで指定する画像をサイトの「フォルダ内の画像」で使用する場合の使い方です。

 

<img src="imeges/hoge.png" alt="画像内容">

 

上記のサンプルコードが指定しているフォルダ内の画像はimagesフォルダの中にあるhoge.pngという画像ファイル名にしてる画像を指定しています。

これはimgタグで表示する画像ファイルが同じウェブサーバー上に配置されているので絶対パスでURL指定しなくても「相対パス」を使って表示画像を指定できる使い方です。

ただ指定方法がややこしいので慣れるまでは画像ファイルまでのパス指定を間違えてしまい画像が表示されない原因になってしまうことがあります。

理解するために検索で調べたり色々なパターンのパス指定をして画像を表示させてみましたが、やはり実際にやってみることが理解する近道でした。

下記のリンクはフォルダについてやファイル指定する絶対パスと相対パスのやり方です。参考になる部分があるかと思いますので時間があるときにでも読んでみてください。

 

 

画像表示にaltを使う理由

 

HTMLのimg要素に使うalt属性も必ず使うようにします。HTMLは以下のように書きます。

 

<img src="imeges/hoge.png" alt="画像内容">

 

src属性で画像ファイル指定したあとに半角スペースを空けてalt=””を書きます。

alt属性はimg要素の中に記述される画像の代替となるテキスト情報です。altの書き方は簡単ですが画像表示にalt属性を使う理由も理解しておく必要があります。

 

 

 

たとえばimg指定する表示画像が山の景色だとします。その場合alt属性にはalt=”山の景色”のように書いておきます。

 

 

山の景色と書いた内容が必要になるのは、テキストブラウザや音声読み上げブラウザの場合に画像ではなくalt属性に記載された内容がテキストとして表示、または読み上げらるという理由からです。

具体的には視覚障がい者の方はPCを使うときにスクリーンリーダーや音声ブラウザを利用し、読み上げられた音声でコンテンツ情報を理解します。

そのとき補助するのが代替テキストのalt属性です。スクリーンリーダーや音声ブラウザは画像の内容をユーザーに伝えるために代替テキストを読み上げてくれます。

 

Advertisement

 

もう一つは検索エンジンのクローラーに対してです。クローラーはimgタグで指定した画像を理解できません。そのため画像を理解してもらうのにalt属性で代替テキストを使うようにして情報を伝えます。

これはSEO強化にもなると考えることができます。

このような理由から「画像が閲覧できない環境でも、その情報が正しく理解できる」ような代替テキスト情報をalt属性に記述するようにします。

 

HTMLで画像表示サイズを指定する

 

HTMLのimgタグで指定した画像表示のサイズはwidth=””とheight=””を追加することでサイズ指定ができます。

以下のようにHTMLを書きます。

 

<img src="imeges/hoge.png" alt=" " width="100" height="100">

 

widthが横幅、heightが高さです。そしてピクセル値もしくは画面に対する割合(%)でそれぞれの大きさを決めます。

元のサイズに比べて幅と高さが大きすぎたり小さすぎると画像が粗くなります。その場合は画像編集ソフトを使ったりして画像を調整します。

またサイズ指定しなくても画像は表示されますが、サイズを指定するとブラウザの読み込みのスピードが多少速くなるので指定することを理解しておくといいかと思います。

 

HTMLのimgタグで画像表示させる応用方法

 

ここまでは単純にHTMLのimgタグで画像表示させる方法の説明をしてきましたが、今度はimgタグで画像表示させる書き方を理解した上で、少し画像表示する応用的なことをしていこうと思います。

imgタグを使う応用といっても複雑なことではなく、他のHTMLとの組み合わせをした応用方法なのでHTML初心者さんの理解が深まればと思います。

 

HTMLで画像をリンクして表示する

 

まずはimgで指定する画像をリンクして表示する場合です。以下のようにHTMLを書き画像をリンクします。

 

<a herf="hoge.html"><img src="images/hoge.png" alt=""></a>

 

サンプルのHTMLではリンク先にhoge.htmlのページに飛ぶことを想定しました。そしてクリックする部分はimgタグで画像表示にしてクリックできるようなリンクの作り方です。リンクするaタグの開始タグと閉じタグの間にimg要素を囲んだ使い方です。

URLをクリックできるようにする詳しい作り方は以下の記事を参考にしてください。

 

応用というか基本的なことでもあり、使用することも多いので理解しておくのがいいですね。

 

画像表示をクリックして拡大させる

 

次に画像表示をクリックで拡大する場合です。

小さな画像をクリックすると拡大して画像が表示できる実装をHTMLだけでするときもa herfを使います。

 

<a href=”images/gazou.jpg” target=”_blank”><img src=”images/gazou.jpg” width=”300″ height=”200″></a>

 

a要素でhref属性にリンク先として表示する画像を指定します。そしてページに表示させておく画像のimg要素を作ってaタグの閉じタグと開始タグの間に書きます。

HTMLだけで実装しているのでそのまま拡大画像を表示すると表示画像から戻れなくなるので別タブで表示するように target=”_blank”も書いておくと戻りやすくなります。

 

HTMLだけで画像表示を拡大するのは、あまり使用しないでLightboxなどの使用が多いかと思いますが、こんなこともできるんだ程度の理解をしておくのも悪くないかと思います。

 

画像を軽くして表示を高速化

 

最後はHTMLのimgタグで指定したあとのことです。画像自体に視点を置いた場合です。

imgで指定する画像を表示することはできても、表示画像のサイズが大きいと読み込んで表示までが遅くななることもあります。

一枚や二枚程度なら遅さを感じないかもしれませんが、次第に使用画像が増えていくと体感的に表示の遅さを感じます。

最低限やっておきたいことはimgで指定する画像の圧縮です。これにより画像が表示される高速化の手助けになります。

 

 

画像圧縮ツールは色々あるので自分が使いやすい圧縮ツールを決めて使うようにしてみてください。ちなみに私はパンダさんが目印のTinyPNGという画像圧縮を使用してます、参考にリンク貼っておきます。

 

 

まとめ

 

HTMLのimgタグで画像表示させる方法を使用することは多いですし必ず理解しておきたいことでもあります。

ブログやWebサイトのメインになることもあれば文章の補助的な役割を果たすこともあったりする画像は視覚的にコンテンツが理解できるような利点があるので、文章だけで上手に説明ができるようになりたい願望がある私も、ついつい画像を表示させて頼ってしまいます。

HTMLで画像の表示する方法を理解できたら、それぞれの色々なアイデアで素敵な画像の使い方を生み出してみてください。

HTMLカテゴリの最新記事