[CSS] 이미지 어떻게 넣을까, 백그라운드? <IMG>? 가상요소?

도대체 언제 img태그를 쓰고 언제는 background-image를 쓰고 언제는 가상요소의 background-image를 쓰는 것인가.
참 헷갈려서 한 번 정리해보았다!
같은 고민을 하고 있었던 당신. 읽어보세요~
오역 있을 수 있음 주의

📌 Proper uses of IMG

IMG의 적절한 사용

1. Use IMG if you intend to have people print your page and you want the image to be included by default. —JayTee

   사람들이 페이지를 프린트했을 때 이미지가 포함되길 바랄 때

2. Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.

   경고아이콘처럼 중요한 의미를 갖고 있는 이미지일 때. 스크린리더를 사용하는 유저를 포함한 모든 유저에게 확실하게 의미를 전달할 수 있다.

---

📌 Pragmatic uses of IMG

IMG 의 실용적인 사용

1. Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). —sanchothefat

   만약 이미지가 로고나 다이어그램이나 사람? 같은 컨텐츠의 부분일 때 IMG의 alt 속성을 사용해라.

2. Use IMG if you rely on browser scaling to render an image in proportion to text size.

   너가 만약 텍스트사이즈에 비례해서 이미지를 렌더링하려고 브라우저 크기조정에 의존하는 경우 IMG를 써라.

3. Use IMG for multiple overlay images in IE6.

   IE6에서 여러 이미지를 오버레이할 때 써라.

4. Using img instead of background-image can dramatically improve performance of animations over a background.

   배경이미지 대신 IMG를 쓰면 배경 위에 애니메이션 성능을 드라마틱하게 향상시킬 수 있습니다요.

---

📌 When to use CSS background-image

그럼 백그라운드 이미지는 언제 씁니까?

1. Use CSS background images if the image is not part of the content. —sanchothefat

   만약 이미지가 내용의 일부가 아닐 때.

2. Use CSS background images when doing image-replacement of text eg. paragraphs/headers. —sanchothefat

   이미지가 문단이나 헤더 같은 텍스트의 대체로 쓰일 때.(?)

3. Use background-image if you intend to have people print your page and you do not want the image to be included by default. —JayTee

   인쇄해도 그림이 출력안되길 원할 때

4. Use background-image if you need to improve download times, as with CSS sprites.

   CSS 스프라이트 쓰는 것 처럼, 이미지 다운로드 속도 향상시키고 싶을 때(오!)

5. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.

   CSS 스프라이트처럼, 이미지 일부만 보이게 하고 싶을 때

6. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

   전체 창 채우려고 백그라운드 이미지 늘릴 때 백그라운드이미지랑 같이 size:cover 쓰셈!

7. When you don't want to loose hair about vertical centering problems.

   수평 센터맞추다가 대머리되고 싶지 않을 때

---

---

더 간단한 버젼을 준비! seo 관점에서 썼다고 하십니다.

🟣 When to use <img/>

1. When Your Image need to be indexed by search engine
2. If it has relation to content, including cards (click areas), but not related to design. Design is probably the most difficult thing to parse here because so it's all design right. I would say perhaps functional design (Cards, thumbnails, profile images, things you can click) vs Aesthetic design which is mostly used for sites appeal.
3. List item
4. If your image is not too small ( not iconic images ).
5. Images where you can add alt and title attribute.
6. Images from a webpage which you want to print using print media css

🟣 When to use CSS background-image

1. Images Purely Used to Design.
2. No Relation With Content.
3. Small Images which we can play with CSS3.
4. Repeating Images ( In blog author icon , date icon will be repeated for each article etc.,).

출처: https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image