【WEBデザイン初心者】img要素について頭の片隅にでも置いておいた方がいいコト

こんにちわ。トラコマです。

webコーディングしている時、あまり気にせず打ち込んでいるimgタグ。
調べてみると色々奥が深い！…気がします。
ので、今回はできたら覚えておいて損はないだろう、img要素について書いてみました。

※独学の自称WEBデザイナーの経験上の言葉ですので、「諸説あり」てことを念頭に置いて読んでください。間違ってても責任は取りません。

まず【imgタグについて】

言わずもがな、「画像を表示させるタグ」です。

このimgタグのsrc属性にjpg・png・gifの形式で保存をした画像URLを指定すれば、ブラウザ上にご希望の画像が表示されるわけですね。ありがてぇ～ありがてぇ～

最近はSVGつー、なかなかオサレなものまで出てきて、色が変わったり、跳ねたり、回ったりして…技術ってコワイ。

尚、画像のファイル名をその画像にあった名前にすると良いとのコトです。ポメラニアンの画像なら「pomeranian.jpg」とか。

【imgタグの属性について】

■alt属性
簡単にいうと『画像の説明』です。
視覚障害を持つ方用のブラウザや、読み上げソフトなど、何らかの都合でブラウザ上で指定した画像が表示できない場合があります。その時に表示されるのが、このalt属性に書いたテキストです。
※読み上げソフトの場合は、表示されたaltのテキストが読み上げられます。

SEO的に、altはそこまで重要ではないとかなんとか…色々賛否両論なことを聞きますが、とりあえずきちんと設定しておいた方が信頼性を高められることは確かです。信頼大事！

例として以下ご参照をば。

<img src="表示する画像1.jpg" alt="犬">

<img src="表示する画像1.jpg" alt="嬉しそうな表情のポメラニアン">

2つのコードを用意しました。
2つとも同じ画像ファイルですので、ブラウザには同じ画像が表示されますが、alt部分違います。
右のaltは単純＆簡易的な文章、左のaltは犬種まで説明しています。ポメかわゆす。

画像について詳細な説明文を設定しておけば、ユーザーが検索したときにヒットしやすくなります。画像検索とかとか。
ただし、細かすぎた説明もダメです。簡潔に、そしてわかりやすく。を意識した文章が良き良き。

また、リンクが設定されている画像には、『リンク先の説明』を設定すると良いです。

なお、imgタグにはaltが重要といいましたが、何でもかんでも設定すれば良いってわけではないです。意味の無い画像には設定は不要です。
例えば、『ページを飾るだけの画像』とか『背景画像』とか『ヘッダー画像』とか。
altが不要な場合は、

<img src="表示する画像.jpg" alt="">

と、設定しましょう。
このように設定すれば、偉大なるGoogleさんに「意味のある重要な画像じゃないです！」て、示せます。

それから、

<img src="表示する画像.jpg" alt="ポメラニアン 犬 小型犬 かわいい もふもふ イヌ Dog">

上記のようなキーワードの乱用もダメです。
昔はキーワード乱用していた覚えがあります…ダメだったんですねアレ…

title属性

title属性は、img要素だけではなく全要素に適用できます。

なんというか…うーん…対象の画像または文字に、カーソルを合わせると吹き出し（ツールチップ）が現れるやつです。補足説明で使います。

<img src="表示する画像.jpg" title="笑顔のポメラニアン">

↑こんな感じにtitle属性に設定します。alt属性と併用して使用することも可能。ただし、できる限り内容が重複しないように。

SEO的にもそこまで重要視されていないこともあり、私はあまり使ったことがないです。そもそも、スマホやタブレットでは、ツールチップが表示されないので、スマホ向けサイトでは不要ですね。

また、ツールチップ自体が鬱陶しく感じるユーザーもいるので、title属性はポイントを押さえて使用した方が良いです。

width属性とheight属性

文字通りwidthは横幅、heightは縦幅。
こちらも画像だけではなく、至る所で使用します。

<img src="表示する画像.jpg" width="数値px" height="数値px">

上記のように設定すれば、設定通りの縦横サイズでブラウザに表示されます。ただし、CSSでimgの縦横サイズを設定していた場合は、そちらが優先されますのでご注意。

例えば、

<img src="表示する画像.jpg" width="200px" height="150px">

と、HTML内のimg要素に設定し、
CSSでは、

img {
    width: 300px;
    height: 250px;
}

と、設定した場合には、横幅300px縦幅250pxの画像が表示されます。
また、

img {
    width: 300px;
}

と、横幅だけCSSで設定した場合は、横幅300px縦幅150pxの画像が表示されます。

経験上、画像サイズはCSSで設定してしまうので、img要素自体にwidthやheightを直に設定しない方が楽かな？と感じました。
まぁこれについては十人十色ですので、自分がコーディングしやすいようにした方が良いと思います。

私がサイトを作っていく上で、意識しているのはこんな感じ。
もうすでに色んな素晴らしい方々が、発信されてますが、自分用のメモとしても書かせていただきました。
widthやheightのCSS設定に関しては、私も未だどの方法が一番楽で正しいのか勉強中ですので、そこらへんは飛ばしました。
height:autoにしているのにレイアウト崩れたり…ﾌﾞﾂﾌﾞﾂ

コレだ！と思う方法が見つかりましたら、また記事書こうと思います。
お付き合いありがとうございます！