HTMLの画像とCSSの背景画像
HTMLの画像とCSSの背景画像：それぞれの使いどころ | We.Inc
<img>とbackground-imageの使い分け、altテキストの書き方、レイアウトシフトの防止、srcsetとsizesの作り方、遅延読み込み、<picture>によるWebPやAVIFの配信を解説します。
HTMLの画像とCSSの背景画像
商品写真、グラフ、人物写真など、画像がコンテンツであるなら<img>を使い、altテキスト、幅、高さを指定します。画像が文字の背後の装飾であるなら、CSSのbackground-imageを使います。srcsetとsizesを追加してスマートフォンが小さいファイルをダウンロードするようにし、最初の画面より下の画像にはloading="lazy"を付けます。ただしヒーロー画像には決して付けないでください。
<img>かbackground-imageか
- 画像に意味があるか
- ある（altテキスト付き）
- ない（装飾のみ）
- 検索エンジンにインデックスさせたいか
- はい
- ほとんど拾われない
- レスポンシブなファイル
- srcsetとsizes
- image-set()またはメディアクエリ
- 遅延読み込み
- loading="lazy"
- スクリプトが必要
- ボックスを埋めるよう切り抜く
- object-fit: cover
- background-size: cover
判断用の表、スマートフォンやノートパソコンがどのファイルをダウンロードするかが分かるsrcsetビルダー、そしてすべてのパターンの編集できる例をそろえています。altテキスト、寸法の固定、遅延読み込み、速いヒーロー画像、object-fitとbackground-sizeによる切り抜きの比較、<picture>によるモダンなフォーマット、image-set()によるレスポンシブな背景です。
- まず判断用の表で、<img>とCSSの背景のどちらにするかを決めます。
- <img>を使う場合は、srcsetビルダーに画像の幅を入力し、レイアウトを選んで、生成されたタグをコピーします。
- 画面幅とピクセル密度のスライダーを動かし、端末ごとにブラウザーがどのファイルを選ぶかを確認します。
- ほかに必要なパターンは例からコピーしてください。どれもコードの横でライブ表示されます。
- width属性とheight属性には、必ず画像の実際のピクセルサイズを指定しましょう。サイズはCSSで変えられます。属性があれば、ファイルが届く前にブラウザーが正しい領域を確保できます。
- 最初の画面で最も大きい画像にはfetchpriority="high"を付け、eagerのままにしましょう。その画像を遅延読み込みすると、ページ最大の描画が遅れます。
- 純粋な装飾画像はalt属性を省略せず、空（alt=""）にしてスクリーンリーダーに読み飛ばさせましょう。省略すると、ファイル名を読み上げるスクリーンリーダーがあります。
- 写真は480、960、1600ピクセルのように2〜3種類の幅で書き出しましょう。サイズを増やしても効果はまれで、ビルドが遅くなります。
よくある質問
background-imageはSEOに不利ですか？
検索エンジンは、CSSで設定された画像よりも<img>要素内の画像のほうをはるかに確実にインデックスします。画像検索に表示させたい画像や、コンテンツを説明する画像は、適切なaltテキスト付きの<img>に入れましょう。装飾的な背景はCSSにしても何も失いません。
altテキストには何を書けばよいですか？
その文脈で重要な、画像に写っているものを短い文で書きます。商品写真なら商品とその色、グラフなら主な結論です。「〜の画像」のような言い回しは不要です。画像がリンクなら、リンク先を説明しましょう。
srcsetのwとxの違いは何ですか？
幅記述子（480w、960w）は各ファイルの実際の幅を示し、sizes属性と画面のピクセル密度を使ってブラウザーに選ばせます。密度記述子（1x、2x）は、ロゴのように常に固定サイズで表示される画像に向いています。
フレームワークを使っていてもloading="lazy"は必要ですか？
ネイティブの遅延読み込みは現行の主要ブラウザーすべてで動作するので、ほとんどの画像は属性を付けるだけで十分です。フレームワークの画像コンポーネントは自動で付けてくれることが多いですが、ヒーロー画像まで遅延読み込みしていないか確認しましょう。
WebPとAVIFの両方が必要ですか？
必ずしも必要ありません。どちらのフォーマットも現行の主要ブラウザーで対応しています。AVIFは写真ではより小さくなることが多いものの、エンコードに時間がかかります。AVIFのsource、WebPのsource、JPEGのフォールバックを持つ<picture>要素なら全員に対応できますが、WebPとJPEGのフォールバックだけというシンプルな選択も十分に妥当です。
コンテンツか装飾か
- 画像に関する判断のほとんどは、画像が読み込めなかったときに訪問者が情報を失うかどうか、という問いで決まります。会社概要ページのチーム写真、チュートリアルのスクリーンショット、ショップの商品写真はどれも意味を持つので、altテキスト付きでHTMLに入れるべきです。
- 見出しの背後のぼかした質感、フッターの模様、雰囲気づくりだけの写真はCSSに置けます。HTMLがすっきりし、マークアップに触れずに画面サイズごとに画像を差し替えられます。上に文字を重ねる場合は、背景色も指定して、画像がなくても文字が読めるようにしましょう。
ブラウザーがsrcsetから選ぶ仕組み
- 幅記述子の場合、ブラウザーはまずsizesを読んで、画像が描画される幅を知ります。たとえばスマートフォンでは100vw、広い画面では50vwです。それに端末のピクセル比を掛け、その幅以上で最も小さいファイルを選びます。通信が遅い場合は小さいファイルを、すでにキャッシュにある場合は大きいファイルを選ぶこともあります。
- 幅の種類を増やすより、sizesを正しく書くことのほうが重要です。sizesが100vwなのに、デスクトップで画像が画面の3分の1しか占めていなければ、ブラウザーは3倍も広すぎるファイルをダウンロードします。
レイアウトシフトとヒーロー画像
- 寸法のない画像が読み込まれると、その下のすべてが下へずれます。width属性とheight属性があればブラウザーが前もってアスペクト比を計算できるので、このずれがなくなり、Cumulative Layout Shiftが改善します。
- ヒーロー画像は、たいていLargest Contentful Paintの要素です。eagerのままにしてfetchpriority="high"を付け、自分のドメインか高速な画像ホストから配信し、後から設定するスクリプトの裏に隠さないようにしましょう。
完全な<img>
alt、width、height、遅延読み込み
属性で実際のサイズを伝え、CSSで可変にします。widthとheightのおかげで、ファイルが読み込まれる前にボックスが確保されます。デモ画像は小さなインラインSVGです。
ヒーロー画像：eagerかつ高優先度
ページ上部の大きな画像1枚にだけ使います。最初の画面より下のものには、代わりにloading="lazy"を付けます。
altテキストのルール
画像の種類別altテキスト
- 商品写真
- 商品と重要な特徴を説明する：引き出しが2つあるオーク材のサイドテーブル
- グラフや図
- 要点を述べる：3月から6月で売上が2倍に
- 横に同じキャプションがある写真
- 二重に読まれないよう、空にするか短いラベルにする
object-fit: coverとbackground-size: coverを並べて
どちらも画像を引き伸ばさずにボックスを埋めるよう切り抜きます。object-positionとbackground-positionで、どの部分を見せるかを選びます。
同じ切り抜きを2通りで
左はobject-fitを使った<img>、右は背景を持つdivです。見た目は同じですが、altテキストと遅延読み込みがあるのは左だけです。
CSSの背景画像
フォールバック色付きの、文字の背後の背景
暗いオーバーレイのグラデーションでどんな写真でも白い文字が読みやすくなり、画像が読み込めなければ背景色が表示されます。
image-set()によるレスポンシブな背景
image-set()を使うと、ブラウザーがピクセル密度やファイル形式で選べます。古いブラウザー向けに、通常のurl()の行を先に書いておきましょう。
<picture>でWebPとAVIFを配信
JPEGフォールバック付きのモダンなフォーマット
ブラウザーは、typeに対応している最初の<source>を使います。内側の<img>がaltテキスト、サイズ、フォールバックのファイルを持ち、スタイルを当てるのもこの要素です。
- すべての画面で全幅
- スマートフォンでは全幅、768pxからは半分
- カードグリッド：1、2、3列
- 最大720pxのコンテンツ列
srcsetとsizesのビルダー
書き出す幅（px）
幅を除いたファイルパス
拡張子
画像はどの幅で描画されますか？
幅を1つ以上入力してください。
コピー
端末はどのファイルをダウンロードする？
小型スマートフォン
大型スマートフォン
タブレット
ノートパソコン
Retinaノートパソコン
画面幅：{vw}px
ピクセル密度：{dpr}x
画像は幅{slot}pxで描画されるため、ブラウザーには約{px}デバイスピクセルが必要で、通常ダウンロードするのは
まだありません
（最大のファイルですが、理想より小さいため、より広い幅での書き出しを検討してください）
通信が遅い場合は小さいファイルを、キャッシュ済みなら大きいファイルを選ぶこともあります。ここに表示されるのは通常の選択です。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る