【html】画像(img)の貼り付け方

htmlの画像の貼り付け方について、画像の準備の仕方も含めて解説します。

htmlの画像の貼り付け方(imgの書き方)

htmlで画像を貼る（設置する）にはimgタグを使います。さらに各属性を設定します。

<img src="gazou.jpg" alt="画像の説明" width="200" height="100">

画像を表示させるだけなら最低限下記の形で表示されます。

<img src="gazou.jpg">

src属性

imgタグと必ずセットで設定するのはsrc属性です。

この値に画像のファイルの場所を指定します。

パスに気を付けて記載しましょう。

<img src="gazou.jpg">

画像が表示されないときは下記の可能性があります。

大文字・小文字の違いでも表示されなくなるので注意です。

パスについては下記の記事で説明します。

width,height属性

画像の横幅（width）高さ（height）を指定します。

<img src="gazou.jpg" width="200" height="100">

「px」などの単位は入れませんが、単位はpxです。

設定していない場合は画像本来の最大サイズが表示されます。

width,height属性を設定するメリットとしては画像の読み込みよりも先に縦横の領域を確保するので後からカクカク広がることがないということくらいです。

レスポンシブ対応（スマホ対応）をするときはCSSを以下のようにしておくことをオススメします。

img{
max-width:100%;
height:auto;
}

これはimgの横幅を最大で100%にしています。これによりブラウザの横幅が小さくなってもはみ出ないようにできます。

それより小さい画像の場合はその画像の最大幅になるだけで必要以上に大きくなるものではありません。

height:autoを指定するとアスペクト比を維持し、画像の横幅（width）に応じて自動で高さを調節してくれます。

このように横幅・高さはCSSで調整できるのでwidth,height属性を設定する必要は特にありません。width,height属性を指定してかつCSSでもwidth,heightを指定している場合CSSが優先されます。

alt属性

alt属性には画像代替文字を設定します。

画像代替文字とは呼んで字のごとく、画像の代わりになる文字です。

<img src="gazou.jpg" alt="○○の写真">

初心者にとって理解に苦しむのがalt（オルト）属性です。

以下詳しく説明しますが、alt属性はなくても画像表示できるので興味ある方だけ読んでみてください。

alt属性を設定する理由

1.Google(SEO)のため

右クリックから「ソースの表示」をするとhtmlソースが見えますね？Googleなどのロボットはこのソースは見ることができても、写真がなんなのか判断できません。画像がどれだけ重要だとしてもGoogleはわからないのです。

そこでテキストにすることでGoogleに何の画像なのか伝えるというものです。Googleに伝わるということはSEOにも一定の効果があるということです。

2.目の不自由なかた（読み上げソフト）のため

目の不自由なかたもあなたと同じようにインターネットを便利に使っています。

目が見えないのにどうやってインターネット使ってるの？と思ったでしょう。

読み上げソフトというものを使っています。

読み上げソフトがインターネット上のテキストを読み上げ、目の不自由なかたは耳で情報を集めているわけです。

　

画像も当然見えません。読み上げソフトも何の画像かわかりません。

そこでalt属性です。

alt属性のテキストは読み上げることができます。

altには何を設定すればいい？

まったく文字のない写真だとか、逆に文字だらけのポスターだとかあったときにaltになんて設定すればいいのか困りますよね。

基本的にはその画像がなく、代わりに文字が表示されたときに、わかりやすく意味が伝わるか、ということを考えてみてください。

altが設定されていることでかえってわかりづらくなっていないか、画像とalt+周辺のテキストを比較して情報量が変わっていないか判断してみてください。

altは不要なときでも設定する

altの値が不要であってもalt属性自体は以下のように設定したほうがいいらしいです。

<img src="gazou.jpg" alt="">

これによって読み上げソフトがそこに画像があることがわかるそうです。

画像を準備する

先にhtmlの説明をしましたが、画像そのものの準備や加工も重要です。

手順は下記のとおりです。

以下で詳しく解説します。

画像を入手する

「○○　画像　フリー」といった形で検索すると利用可能な画像を見つけることができます。

初めて使う場合はそのサイトに記載している「利用方法」を読みましょう。

サイトの「ダウンロード」ボタンからダウンロードしましょう。

簡易なサイトであれば右クリックから画像をダウンロードできる場合もあります。

有料画像サイトなどで買う前に試したいというときはこの方法でダウンロードすることもあります。採用する場合はきちんと買いましょう。

画像サイズを最適にする

画像をすばやく表示させるために、画像のサイズを最適にしましょう。

画像サイズを最適にする（小さくする）理由

たとえば2000px × 1000pxの画像があり、それをホームページ上では200px × 100pxで掲載するとします。

後述するwidthやheightの指定で200px × 100pxで表示することは可能です。

しかし、画像の容量は変わっていないため2000px × 1000px分の容量を読み込みます。当然表示されるのは遅くなります。

最初から200px × 100pxにしておくとその分の容量だけ読み込むためすばやく表示されます。

レスポンシブ対応

レスポンシブ対応する場合、注意が必要です。

画像が拡大・縮小されるでしょう。この場合想定される最大サイズを用意することをオススメします。

スマホの横幅は360px程度ですが、画像の横幅もそのサイズにすると荒くなります。

これはスマホの解像度が実際はもっと高いためです。

スマホでは2倍のサイズの画像サイズを用意しましょう。

画像を小さくする方法

画像サイズを最適化するには画像を簡単に縮小できるフリーソフトを使ったり、ペイントなどの画像編集ソフトを使いましょう。

CMSによっては画像を編集できる機能がついているものがあります。

画像の名前（ファイル名）をつける

ファイル名のつけ方

ファイル名を変えるには以下の方法があります

半角英数を使う

画像に限らず、ホームページで使うファイル名は半角英数およびハイフン(-)アンダーバー(_)で指定しましょう。

サーバーによっては全角でもいける場合もありますが、逆に言うとサーバーによっては全角がいけない場合があります。

思わぬ不具合に遭遇する可能性があるため注意しましょう。

わかりやすい名前にする

画像をダウンロードで手に入れた場合ファイル名がすでについているでしょう。

しかしその多くはファイル名がやたら長く、意味のない文字列です。

そのままでも使えますが、使いやすいように自分でわかりやすい名前に変更することをオススメします。

自分のパソコンに画像があるうちは画像を見て確認できますが、サーバーにアップロードすると画像の確認が難しく、ファイル名だけで判断することが多々あります。

よってわかりやすい名前にしておきましょう。

拡張子に注意

名前をつけるときは拡張子を消さない・変えないように注意しましょう。

拡張子というのは「jpg」「png」「gif」などです。「ファイル名の変更」で変えてもファイルが壊れるだけで変えることはできません。

拡張子を変えたいなら画像編集ソフトなどで変えましょう。

また拡張子の前にあるピリオド(.)も消してはいけません。

画像をフォルダに入れる

htmlファイルを置いてあるフォルダ軍に画像ファイルを置きましょう。

オススメは「index.html」（トップページ）ファイルがあるフォルダと同じところに「images」というフォルダを作っておき、そこに画像ファイルを入れましょう。

画像ファイルが多い場合は「images」フォルダ内にさらにフォルダを作って仕分けしてもいいでしょう。

ただし、フォルダが増えると階層が変わり画像のリンクが切れて表示されない！ということになりかねません。初心者のうちは「images」フォルダ内にすべてまとめておいてもいいかもしれません。

練習で試す場合は、画像を表示するファイル(html)と画像ファイル(jpgやpng)を同じファイルにいれましょう。

そしてその画像ファイルの名前をsrcに記載してみましょう。

【まとめ】htmlの画像の貼り付け方

画像を準備する

htmlの画像の貼り付け方(imgの書き方)

<img src="gazou.jpg" alt="">

srcの値に画像ファイルの場所を指定する

altには画像の説明を記載する（なくてもOK）

以上、htmlの画像の貼り付け方でした。