ホームページ制作で画像を表示するとき、CSSで次のように指定することはよくあります。
img {
width: 100%;
height: auto;
}このように指定しておけば、スマホやパソコンなど画面幅が違う端末でも、画像は親要素に合わせて自動的に伸縮します。
では、この場合HTML側のimgタグにもwidthやheightを書く必要はあるのでしょうか。
結論からいうと、CSSで画像サイズを指定している場合でも、HTMLのimgタグにはwidthとheightを入れておくのがおすすめです。
ただし、ここで大切なのは、HTMLのwidthやheightは「表示サイズを固定するため」ではなく、「画像の縦横比をブラウザに先に伝えるため」に使う、という点です。
画像のwidth/heightは何のために指定するのか
HTMLのimgタグには、次のようにwidthとheightを指定できます。
<img src="images/sample.webp" alt="店内の写真" width="1200" height="800">このwidth="1200"とheight="800"は、基本的には画像ファイル本来のサイズを書きます。
例えば、画像ファイルの実寸が横1200px、縦800pxなら、次のように指定します。
width="1200"
height="800"ここでpxは付けません。
正しい書き方は次の通りです。
width="1200" height="800"間違った書き方は次のようになります。
width="1200px" height="800px"この指定を入れておくと、ブラウザは画像を読み込む前から「この画像は横1200、縦800の比率なんだな」と判断できます。
つまり、画像が表示される前に必要なスペースを先に確保できるため、読み込み後にページのレイアウトがガタッと動くのを防ぎやすくなります。
CSSでwidth:100%を指定していても意味はある
よくある疑問として、「CSSでwidth:100%を指定しているなら、HTMLのwidthやheightは意味がないのでは？」というものがあります。
これは半分正しく、半分違います。
CSSのwidth:100%は、実際の表示サイズを決めるための指定です。
一方、HTMLのwidthやheightは、画像の元サイズや縦横比をブラウザに伝えるための指定です。
つまり、それぞれ役割が違います。
例えば、次のようなHTMLとCSSがあったとします。
<img
src="images/sample.webp"
alt="お店の外観"
width="1200"
height="800"
class="shop-image"
>.shop-image {
display: block;
width: 100%;
height: auto;
}この場合、画像が必ず横1200pxで表示されるわけではありません。
スマホで見れば画面幅に合わせて縮小されますし、親要素が500pxなら画像も500px幅で表示されます。
それでもHTMLにwidthとheightを書いておくことで、ブラウザは画像の比率を先に把握できます。
つまり、表示サイズはCSSで調整し、画像の比率情報はHTMLで伝える、という考え方です。
実務でおすすめの書き方
通常の画像であれば、次のような書き方がおすすめです。
<img
src="images/sample.webp"
alt="店内スペースの写真"
width="1200"
height="800"
loading="lazy"
decoding="async"
class="shop-photo"
>CSSは次のようにします。
.shop-photo {
display: block;
width: 100%;
height: auto;
}この形であれば、レスポンシブ対応もしやすく、画像読み込み時のレイアウト崩れも防ぎやすくなります。
loading="lazy"は、画像の遅延読み込みを行う指定です。
ページの下の方にある画像であれば、最初から読み込まず、画面に近づいたタイミングで読み込ませることができます。
ページ表示速度の改善にもつながるため、下層コンテンツやカード画像、バナー画像などには基本的に入れておくとよいです。
ただし、ファーストビューのメイン画像や、ページを開いてすぐ見える重要な画像にはloading="lazy"を付けない方がよい場合があります。
最初に見える画像まで遅延読み込みしてしまうと、表示が遅れて見えることがあるためです。
ファーストビューの画像は通常読み込み、それ以外の画像はloading="lazy"という使い分けが実務的です。
SVG画像にもwidth/heightは指定した方がいい？
ここまで、WebPやJPEG、PNGなどの画像を例に説明してきました。
では、SVG画像の場合はどうでしょうか。
結論からいうと、SVG画像をimgタグで読み込む場合も、HTML側にwidthとheightを指定しておくのがおすすめです。
例えば、SVGファイルの中に次のような記述があったとします。
<svg xmlns="http://www.w3.org/2000/svg" width="252" height="53" viewBox="0 0 252 53">この場合、SVG内にwidth="252"、height="53"と書かれているため、HTML側のimgタグにも同じ数値を指定して問題ありません。
<img
src="images/shop-logo.svg"
alt="お店のロゴ"
width="252"
height="53"
>このwidthとheightも、画像を必ず横252px、縦53pxで表示するための指定ではありません。
ブラウザに「このSVG画像は横252、縦53の比率ですよ」と伝えるための指定です。
そのため、CSSで次のように表示サイズを変えても問題ありません。
.shop-logo {
display: block;
width: 320px;
height: auto;
}この場合、実際の表示幅はCSSのwidth: 320px;が優先されます。
HTMLのwidth="252"とheight="53"は、画像本来の比率をブラウザに伝える役割として考えれば大丈夫です。
SVGはベクター画像なので、CSSでSVG内に書かれているサイズより大きく表示しても、JPEGやPNGのように画像が荒れにくいという特徴があります。
例えば、SVG内のサイズが横252、縦53でも、CSSで横320pxや横400pxにして表示すること自体は問題ありません。
<img
src="images/shop-logo.svg"
alt="お店のロゴ"
width="252"
height="53"
class="shop-logo"
>.shop-logo {
display: block;
width: 400px;
height: auto;
}ただし、SVGの中にPNGやJPEGなどの画像が埋め込まれている場合は注意が必要です。
SVG自体は拡大に強くても、内部に写真画像などが含まれている場合、その写真部分は拡大によって粗く見える可能性があります。
普通のロゴ、アイコン、線画、装飾パーツのようなSVGであれば、CSSで少し大きく表示しても基本的にはきれいに表示できます。
また、SVGファイル内にwidthとheightがなく、viewBoxだけが書かれている場合もあります。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 252 53">この場合は、viewBoxの後ろ2つの数値を参考にします。
viewBox="0 0 252 53"この例では、横幅にあたる数値が252、高さにあたる数値が53です。
そのため、HTML側では次のように指定すればOKです。
<img
src="images/shop-logo.svg"
alt="お店のロゴ"
width="252"
height="53"
>SVG画像の場合も、基本の考え方は通常の画像と同じです。
HTMLでは画像の比率を伝え、CSSでは実際の表示サイズを調整する。
この役割分担で考えると、SVGでもwidthとheightの指定は分かりやすくなります。
CSSで高さを固定している画像の場合
画像によっては、CSSで高さを固定してトリミングすることもあります。
例えば、カード型レイアウトやバナー画像では、次のようなCSSを使うことがあります。
.card-image {
display: block;
width: 100%;
height: 180px;
object-fit: cover;
}この場合でも、HTMLには元画像のサイズを書いて問題ありません。
<img
src="images/card.webp"
alt="店内の様子"
width="1200"
height="800"
loading="lazy"
decoding="async"
class="card-image"
>CSSでheight:180pxを指定しているため、実際の表示高さは180pxになります。
HTMLのwidthやheightは表示サイズそのものを決めるというより、画像本来の比率をブラウザに伝える役割として考えます。
ただし、CSSで意図的にトリミングしている場合は、画像の上下左右が切れる可能性があります。
人物の顔、商品、ロゴ、重要な文字が入る画像では、object-fit:coverを使うと大事な部分が切れることがあるため、画像の内容に合わせて調整が必要です。
背景画像にはwidth/height属性は使えない
CSSのbackground-imageで表示している画像には、HTMLのwidthやheight属性は使えません。
例えば次のような指定です。
.hero {
background-image: url("../images/hero.webp");
background-size: cover;
background-position: center;
}これはimgタグではなくCSS背景として表示しているため、HTML側にwidthやheightを書くことはできません。
この場合は、CSS側で高さや比率を確保します。
例えば、画像の比率を保ちたい場合はaspect-ratioを使えます。
.hero {
aspect-ratio: 750 / 1000;
background-image: url("../images/hero.webp");
background-size: cover;
background-position: center;
}または、高さを固定・調整したい場合はmin-heightなどを使います。
.hero {
min-height: 480px;
background-image: url("../images/hero.webp");
background-size: cover;
background-position: center;
}背景画像は装飾的な画像に向いています。
一方、内容として意味のある画像、例えばお店の外観、店内写真、スタッフ写真、商品写真、メニュー写真などは、基本的にimgタグで表示した方がよいです。
imgタグであればalt属性も指定できるため、アクセシビリティやSEOの面でも扱いやすくなります。
alt属性も忘れずに指定する
画像をimgタグで表示する場合は、widthやheightだけでなくalt属性も大切です。
alt属性は、画像が表示されない場合や、音声読み上げ環境で画像の内容を伝えるためのテキストです。
例えば、お店の外観写真であれば次のようにします。
<img
src="images/shop.webp"
alt="お店の外観"
width="1200"
height="800"
loading="lazy"
decoding="async"
>装飾目的の画像で、読み上げる必要がない場合はalt=""として空にします。
<img
src="images/decoration-star.webp"
alt=""
width="80"
height="80"
loading="lazy"
decoding="async"
>すべての画像に無理やり説明文を入れる必要はありません。
意味のある画像には適切な説明を入れ、装飾画像は空のaltにする、という使い分けが大切です。
SEOや表示速度への影響
画像のwidthやheightを指定しておくことは、SEOにも間接的に関係します。
直接的に「widthやheightを書いたから検索順位が上がる」という単純な話ではありません。
しかし、画像の読み込み時にレイアウトが崩れにくくなることで、ユーザーがページを見やすくなります。
また、ページ表示の安定性や速度は、ユーザー体験に関わる重要な要素です。
特にスマホで見るユーザーが多いホームページでは、画像の読み込みによって文章やボタンがズレると、見づらさや誤タップにつながることがあります。
そのため、画像にはできるだけwidthとheightを指定し、CSSでレスポンシブに調整するのが実務的です。
まとめ
CSSで画像のサイズを指定している場合でも、HTMLのimgタグにはwidthとheightを入れておくのがおすすめです。
ポイントは、HTMLのwidthやheightは表示サイズを固定するためではなく、画像の縦横比をブラウザに伝えるために使うということです。
基本の書き方は次の通りです。
<img
src="画像パス"
alt="画像の説明"
width="元画像の横幅"
height="元画像の高さ"
loading="lazy"
decoding="async"
class="任意のクラス名"
>CSSでは次のように指定します。
img {
display: block;
width: 100%;
height: auto;
}この形にしておけば、スマホやパソコンなど画面サイズが違う環境でも画像を柔軟に表示できます。
HTMLでは画像の比率を伝え、CSSでは表示サイズを調整する。
この役割分担で考えると、画像のwidthやheight指定はかなり分かりやすくなります。