HTMLで画像を表示させる方法～imageタグの基礎から応用まで徹底解説

HTMLにおいてホームページ制作に欠かせない画像コンテンツを表示させるimageタグ（<img>）。
本記事ではHTML初心者向けにimageタグの使い方を、例文や図解付きでわかりやすく解説します。

imageタグのほか、はじめに躓きがちな「絶対パス」「相対パス」の解説もいたします。

なお、ホームページ作成をご検討なら、Wepageをご検討ください。

１-１．<img>タグを使って画像を表示する

まずWebページに画像を表示するには、image（イメージ）タグを利用します。
実際にはページのHTMLに次のようにタグを追加します。

かなり短いHTMLですが、最低限これだけでページに画像を表示できます。
imageタグは、他のタグと違い少し特殊なタグになっていて、終了タグを記述する必要がありません。
例えば、次のようにimageタグを記述した場合、エラーになりますので注意してください。

また imageタグ内にあるsrc属性には、パスと呼ばれる形式で、表示する画像ファイルの場所を記述します。
パスについては、後述の絶対パスや相対パスで詳しく紹介します。

参考： JPEG？GIF？PNG？画像ファイル形式の違いとホームページでの最適な使い方

Webページに写真や画像など外部のファイルを利用する場合には、imageタグのsrc（ソース）属性に、表示するファイルの場所を指定する必要があります。
ファイルの場所を指定する方法はパス（path）と呼ばれ、フォルダーに保存されたファイルの場所を特定するための文字を設定します。

通常、パスはファイルが保存されている場所までに経由するフォルダーやサブフォルダーを繋ぎ合わせた文字で示されます。
具体的には、Windowsのエクスプローラーや、Macintoshのfinderなどでも次のような形で使われています。（Webページで利用するパスとは一部異なりますが、形式は同じです）

C:\page\images\sample.webp

また、imageタグのsrc属性で利用できるパスには、「絶対パス」と「相対パス」の2種類があります。
それぞれ、利用する場合のメリットやデメリットがあるので詳しく説明していきます。

２-１．絶対パス

基準となる場所からファイルが保存されている場所までを示す形式です。

絶対パスWebページが保存されているサーバーには様々なファイルが保存されていますが、HTMLや画像などページに表示されるファイルは１つのフォルダーに集められて、その中にサブフォルダーなどで細分化されて保存されています。

この一番上のフォルダーを基準として、保存されているファイルの場所までのフォルダー名を繋ぎ合わせた形が絶対パスです。

具体的には次のように記述します。（WindowsやMacintoshのパスとは違い、フォルダーやファイル名の間には"\"ではなく"/index.html"を使います）

その他にも、別のサーバーに保存されているファイルを利用する際も絶対パスを利用します。
別のサーバーなので、基準となる場所はサーバーの場所から記述します。

上のような表記は、URLと呼ばれブラウザーに入力することもありますが、URLも絶対パスの１つです。

絶対パスのメリットは、基準となる場所からの経路が明確なので、Webページを作成する場合に利用するファイルの場所を理解しやすくなります。
サーバー内に階層構造で作成されているフォルダー構成のイメージを、そのままパスとして使えるため、扱いやすいことが一番のメリットです。

また、後で作成したWebページのファイルを別の場所にコピーや移動をした場合でも、src属性の部分を書き換えることなく再利用できる点も挙げられます。

デメリットとしては、フォルダーの名前が長い場合や、多くのサブフォルダーに分けられている場合に、src属性に設定するパスが長くなり見辛くなること、などが挙げられます。

２-２．相対パス

絶対パスで利用した基準のフォルダーを、Webページが保存されている場所に置き換えて記述する形式です。

具体的な例として、絶対パスの例と同様に"pages"フォルダーにWebページが保存されていて、sample.webpを表示させたい場合には、次のように記述します。

先頭の"./index.html"はカレント（現在位置）を示すために使われますが省略が可能で、次のようにも記述できます。

絶対パスよりも短い形で記述でき、上の例ではページが保存されているフォルダーを基準点にして"images"サブフォルダー内のsample.webpファイルを表示しようとします。

現在の場所からの相対的な位置関係でファイルの場所を記述するので「相対パス」という名前が付いています。

下位フォルダーを指定して相対パスでファイルの場所を指定する場合が多いですが、親フォルダー（親ディレクトリ）"../index.html" を使うことで、1つ上のフォルダー内の指定もできます。

例えば次のように記述すると、１つ上の階層にあるpages2というフォルダーの指定ができます。

相対パスのメリットは、表示されるWebページの場所を基準にして記述を行うために、src属性に記述するパスの長さを短くできる点です。
また、短いパスを使うことでWebページのファイル容量を小さくでき、ブラウザーへの読み込みを早くする二次的な効果も期待できます。

しかしデメリットとして、ページの保存場所を移動した場合に、すべてのパスを書き換える手間が発生する、ということがあります。

このように、絶対パスと相対パスには、それぞれメリットやデメリットがあります。
明確な使い分けのガイドラインはありませんが、一般的には絶対パスが多く使われています。

ホームページ制作ツールとして大きなシェアを誇るWordPressでは、画像が絶対パスで記述されるため、ということもその理由ではありますが、その他の理由としては、Webページで発生するリンク切れという不具合の回避策としての利用が考えられます。

制作したページを公開する環境に移動した際に、フォルダー構成の影響を受けてリンク切れを起こし、画像が表示されない、などといった状態になるのを防ぐため、絶対パスが好まれるケースが多いためです。
また、検索エンジンとして圧倒的なシェアを誇るGoogleが、リンク切れが発生しにくい絶対パスでの記述を推奨している、ということからも、絶対パスが使われる理由になっています。

imageタグを追加してWebページに表示した画像は、タグに追加する属性やCSS（シーエスエス＝Cascading Style Sheets/カスケーティングスタイルシート）を利用することで、横幅や高さといった画像の大きさやページ内で右寄せや中央揃えなどの表示位置を自由に変更できます。

３-１．画像を左右中央に寄せる

Webページに画像を追加した場合、何も指定しない状態であれば左寄せ（画面の左側に詰めた状態）で表示されます。
表示する画像を画面の中央や右側に表示したい場合、一般的にはimageタグをブロック（div）や段落（p）などの別のタグで囲み、囲んだタグへstyle属性を記述して表示位置の変更を行います。

具体的には、次のようにブロック要素で画像を囲んで、text-align設定（水平方向への配置を指定するプロパティ）を記述します。

中央揃えにする場合

右寄せにする場合

ブロック（div）は段落タグ（p）を使っても同じ様に表示位置を設定できます。

また、次のようにimageタグのstyle属性を記述しても、表示位置の設定が可能です。
（下記の例では中央に配置しています）

上記の場合はdivタグやpタグのように、text-align属性を使わないことに注意してください。

３-２．画像の位置を好きな場所に指定する

左右や中央揃えと言った水平方向位置以外に画像を表示させたい場合には、style（スタイル）属性のposition設定を使うことで、水平方向以外の自由な位置に画像を表示できます。
具体的には、囲んだdivタグの、style属性のposition、top、left設定を記述します。

（例）画像を上から100ピクセル、左から100ピクセルの位置に表示する場合

３-３．画像の大きさを指定する

Webページに追加した画像は、何も指定しない状態であれば画像のサイズがそのまま表示されます。
表示する画像を縮小（または拡大）して表示したい場合、imageタグのwidth、height属性を使って表示する幅と高さの変更を行います。

（例）画像を80%に縮小して表示する場合

（例）画像の高さを100ピクセルで表示する場合

上記の例のように、width、height属性は同時に記述できますが、元の画像とは異なる比率を記述してしまうと画像が歪んで表示されてしまうため、意図して変形したい場合以外は、（例）のようにwidth、heightどちらかの属性のみを記述します。

画像そのものの大きさ修正や加工については、下記で詳しく解説しておりますのでぜひご参照ください。

参考：

ホームページを綺麗に見やすくする！画像の加工方法を解説

ホームページで使う画像サイズを徹底解説！

Webページに表示する画像には、imageタグのtitle（タイトル）とalt（オルト）属性を追加すると文字列を表示できます。
title（タイトル）とalt（オルト）属性は両方をひとつのimageタグに記述できる属性ですが、それぞれ利用意図が異なるので詳しく説明していきます。

４-１．タイトルの追加"title"属性

表示された画像にマウスポインターを合わせると［この画像はサンプルです］のような小さなテキストがポップアップします。

タイトルを利用するメリットとしては、画像に関する情報を文字で補完できる点です。
しかし、マウスポインターを画像に重ねる必要があるため、スマートフォンやタブレットで表示した場合には動作しないことがデメリットとして挙げられます。

また、Googleなどの検索エンジンへの影響も、後述するalt属性の方が重要度が高いとされているため、あくまでユーザーへの補助的な設定として考えられています。

４-２．代替テキストの追加"alt"属性

ページに画像が表示されない場合でも、alt属性に入力されているテキストで画像の内容をある程度理解できるため、ユーザビリティを確保するためにも重要な属性として利用されています。

代替テキストを利用するメリットとしては、画像が表示されない場合のユーザーへの対応と、検索エンジンへの対応（画像の内容を検索エンジンに伝える）が挙げられます。
しかし、不適切な設定（キーワードを乱用してalt属性に画像と関係ない文字を設定する、大量のキーワードを羅列して設定するなど）をした場合、検索エンジンからページの評価を落とされるデメリットにもなってしまうので、注意が必要です。

中には、HTMLファイルと画像ファイルが異なる階層に設置される事で、画像リンクが切れてしまう可能性があります。
この場合、src属性の指定に正しい位置情報を記入すると改善可能です。

例えば、次のようなimageタグで画像を表示していた場合に

上記の記述であれば、ページと同じフォルダーに画像ファイルがある場合には問題がありません。
ですが、画像やページを別の場所に移動した場合には画像は表示されません。

これは、src属性に指定したパスから指定の画像ファイルを移動させてしまったため、参照すべき画像ファイルがなくなってしまった、ということに原因があります。

ページを作成している時には正常に表示されていても、実際にWebページを表示させるためにサーバーにファイルを移動させた時など、環境を変えた際にリンク切れが発生するケースもあります。

相対パスは記述する文字数が少なく便利な半面、リンク切れが発生する場合が多いため、実際のファイルの場所を把握して正しく記述するように注意が必要です。

また、画像を掲載するには、他サイトや他サーバーの画像を指定したい場合もあるでしょう。
しかし、他サイトの画像を絶対パスで指定する行為は、上記のような画像リンク切れの危険性や画像の表示を他サーバーへ依存してしまうという問題があります。

そのため、一般的には絶対パスによる他サイトや他サーバーへの画像の直接リンクは避けたほうが無難でしょう。

HTMLよりも手軽にホームページ作成がしたい方は、ぜひ弊社の「Wepage」をご利用ください。

Wepageは、専門知識が不要で簡単に画像・動画を掲載できる、本格的なデザインテンプレートを用意しています。

フォトギャラリーやアルバム、スライドショーなどの機能も豊富に用意しておりますので、オリジナリティあふれるホームページに仕上げることも可能です。

Wepageでは無料プランをご用意しておりますので、まずはお気軽にご利用ください！

今回はHTMLでimageタグを使いWebページに画像を表示する方法をご紹介しました。

imageタグのsrc（ソース）属性に、PNGやJPEG形式などの画像ファイルが保存されているパスを指定することで、簡単に画像を表示できます。
また、タイトル（title）属性やオルト（alt）属性を記述することで、画像にマウスを合わせた時にテキストを表示させるなど、付加情報を追加する手順もご紹介してまいりました。

その他にも、width/height属性や、CSS（シーエスエス＝Cascading Style Sheets/カスケーティングスタイルシート）を利用することで、表示される画像の位置やサイズも自由に変更できます。

ぜひ、ホームページのコンテンツ作成をする際に参考になさってください。