Skip to content

Instantly share code, notes, and snippets.

@LeeDDHH
Created June 26, 2021 10:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LeeDDHH/24ec711e3aa0ca83c297fc0087864f29 to your computer and use it in GitHub Desktop.
Save LeeDDHH/24ec711e3aa0ca83c297fc0087864f29 to your computer and use it in GitHub Desktop.
imgタグとcssのbackground-imageを使い分ける

imgタグを使うケース

  • 画像に警告アイコンのような重要な意味がある場合、 alt 属性とともに使う
    • スクリーンリーダーのようなユーザーエージェントで画像の意味を確実に伝えられる
  • 画像がロゴ、図、人物などのコンテンツの一部の場合、alt 属性とともに使う
  • background-image の代わりに img タグを使うと、背景上のアニメーションのパフォーマンスを劇的に向上させられる

background-imageを使うケース

  • 画像がコンテンツの一部ではない
  • テキストの画像置換を行う場合
  • CSS Sprites のようにダウンロード時間を改善する必要がある場合
  • CSSスプライトのように、画像の一部だけを表示する必要がある場合
  • 背景画像を引き伸ばしてウィンドウ全体に表示する場合、 background-size:cover と一緒に使う

When to use IMG vs. CSS background-image?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment