HTMLで画像を表示する方法

Webサイトが文字だけで埋め尽くされているよりも、画像が加えられることで視覚的にも見やすいデザインにする効果があります。ここからは様々なHTMLタグを使って画像を表示するための方法を紹介していきます。

Webサイトで使用する画像形式

Webページで一般的に使用される画像は「GIF」と「JPEG」、そして「PNG」という形式のものです。それぞれの画像形式について説明します。

【1】GIF

「.gif」という拡張子を持つファイル形式です。8bit、256色まで使用可能でイラスト向きと言われています。比較的色の数が少ない画像に使われることが多い形式です。

【2】JPEG

「.jpg」という拡張子を持つファイル形式です。24bit、約1677万色まで使用可能で、写真など色味がハッキリしている画像に使われることが多い形式です。

【3】PNG

「.png」という拡張子を持つファイル形式です。JPEG同様に24bit、約1677万色まで使用可能ですが、写真などよりイラストに多く使われることが多い形式です。保存する際に画像本体の劣化が少なく、綺麗に保存・表示できることが特徴ですが、写真データをPNG形式で保存するとファイル容量が巨大になってしまうため、写真の保存にはあまり使われません。

HTMLタグと属性

HTMLを使って画像を表示させるためにはimgというタグを使用します。さらに半角スペースをあけたあとに表示したい画像ファイルの場所を指定するために「src」で「属性」を付与します。画像を表示させるためのHTMLには、他に「alt」や「title」、「width」や「height」などがあります。それぞれ簡単に解説します。

・image(imgタグ)

imgタグのあとに「src属性」を追加することで、指定した画像を表示させることができます。imgタグはWebサイトに画像を表示させる際に頻繁に使われるタグです。サイトロゴやアイキャッチ画像、記事内の紹介画像などを表示させるためには必ずimgタグが使われます。画像を追加することでサイト全体の印象を引き締め、見やすさを向上させることができるため、サイト内容を充実させる目的で頻繁に使われます。

・src属性

表示させたいファイルの場所を「src属性」で指定します。場所の指定方法は二通りあり、「絶対パス」と「相対パス」のどちらかを使います。

絶対パスでは、画像が存在する場所のURLを直接記述して指定します。

相対パスでは、今使っているHTMLファイルが存在する場所を起点にした画像ファイルまでの経路を記述して指定します。

相対パスを使う方が画像ファイルの表示速度は早くなると言われており、記述の方法がフォルダ階層などを直接指定する形式であるため、オフライン環境でも表示テストをしやすいという利点があります。

・alt属性

「alt」とは「altarnative=代替手段」の略で、本来なら表示されるべき画像ファイルの代わりになる情報(テキスト情報が多い）のことです。検索エンジンなどで検索される際に、画像検索で自分のWebサイトを表示されやすくするためにalt属性を与えておくと有効です。また、Webサイト上で万が一画像が表示されなかった時に代替となるテキスト情報を表示させることができるため、本来そこに何があったのかをユーザーに知らせることができます。

・title属性

画像そのものに補足説明を付ける際に使います。「title」属性で指定されたテキスト情報や値は、画像の上にマウスカーソルなどを合わせると補足情報として別枠表示されます。

・width、height属性

画像の表示サイズを指定するための属性です。「width」と「height」を使用して値を変更することで画像のサイズを変更することが可能です。指定する方法は二通りあり、「ピクセル数」を直接入力するか、「画像の表示％」を入力するかのどちらかで指定します。

それではさっそく例を見てみましょう。

Webサイトで表示する画像を準備し、src属性で指定します。例えば、「季節の果物」というタイトルの「スイカの写真」の画像「suika.png」を表示します。

img src=”suika.png” alt=”スイカの写真” title=”季節の果物”

このように記述することで画像を表示させることができます。「title属性」でテキストを指定しているので、マウスカーソルを画像に合わせると「季節の果物」と表示され、読み上げ機能ではalt属性で指定した「スイカの写真」と読み上げられます。基本的な使い方はこれだけです。

リンク切れ

注意しなければいけないのは「suika.png」のファイルを別のフォルダに移動してしまうと、それまで表示されていた画像が消えてしまうことがある、という点です。

これはHTMLファイルと画像ファイル「suika.png」がそれぞれ違う階層に分かれてしまったことが原因です。このような場合には、移動させたフォルダから再度「suika.png」を取り出して、HTMLファイルと同じ階層（デスクトップ上）に置いて再読み込みを行うことで、画像をもう一度表示させることが可能です。

GIF画像を表示する

imgは静止画だけではなく動きのあるGIF画像もWebページに表示することが出来ます。

img src=”(サイトのURL)” alt=”パンダのgif”

GIFの素材は無料で提供をしているサイトがいくつかあるので、そういったサイトからGIF画像を選択し、ページの中に組み込んで賑やかにするのもいいかもしれませんね。

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

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

img src=”images/gazou.png” alt=” ”width=”100” height”100”

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

まとめ

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

やはり文章だけではどうしても簡素なWebサイトやブログになってしまうので、そこに画像が表示されるだけでかなり華やかで見やすくなりますよね。文章だけでは伝わりにくい説明も画像があることで視覚的に情報を得ることも出来ます。

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