내가 몰랐던 HTML/CSS part 1. 이미지 표현 두가지방법

1)img태그를 사용하는 방법과 2) div를 만든다음 css를 이용하여 background-image를 통해 이미지를 표현하는 두가지 방법이 있다.
그럼 언제 img태그를 쓰고 background-image 속성을 쓰는게 적절한것일까?
다음은 해외 개발자 블로그에서 참고한 내용이다.

Use an < img > tag:

1. If it is related to the content — not just design element
   (시멘틱 태그로서의 의미가 있음.)

2. If your need — to be indexed by search engine. Google does not automatically index,arrange background images, otherwise the image search results would be filled with image sprites.
   (위와 비슷한 의미로서 검색엔진이 css의 백그라운드 이미지를 index하지 못한다는 의미.)

3. Image tags have the ability to add alt text and a title attribute, which can be picked up by screen readers and search engines.
   (이미지 태그의 alt 속성은 이미지에 대한 설명을 기본적으로 가지고 있다. img 태그에서 사용되는 이미지 로드가 실패할 경우 broken image와 함께 alt 텍스트를 작성했다면 텍스트의 내용이 함께 보인다. 그러므로 에러난 이미지가 무엇을 나타내려 했는지 알 수 있다는 것이 장점)

4. If you have a bunch of large background images declared in your CSS, the browser is going to take longer to parse the CSS file and pull down the images, which will delay the loading of the entire page. With < img > tags, the requests are made as the HTML is parsed, so any content coming before the tag in the document will be information users can begin to read, this is a good point for performance.
   (이미지의 크기가 클때는 css를 통해 이미지를 화면에 표현해주는 것이 마크업에 올려진 이미지 태그를 처리하는 것보다 오래 걸릴수 있음)

5. Inline images ( img or picture ) can take advantage of tools like picturefill and lazy loading for even more performance benefits.
   (성능을 좋게하는 툴을 활용할수있음)

6. If you intend to have people print your page and you want the image to be included by default.
   (웹페이지 프린트시 이미지가 디폴트로 포함됨)

7. If you rely on browser scaling to render an image in proportion to text size.(이미지크기를 텍스트 사이즈만큼 작게 만드는 것도 가능)

Use CSS background-image :

1. If it’s purely used to design.
   (디자인의 용도로 사용)

2. If the image is not part of the content.
   (컨텐츠 내용으로서의 의미가 없는 경우)

3. For small images, if you need to improve download times, as with CSS sprites.
   (이미지의 크기가 작은 경우)

4. If you intend to have people print your page and you do not want the image to be included by default.
   (웹페이지 프린트시 이미지가 디폴트로 포함되는 것을 원치 않을 때)

5. Repeating images ( In blog author icon , date icon will be repeated for each article etc.,).
   (디자인으로서 백그라운드에 반복되는 배경을 놓고 싶은 경우)

<출처> https://blog.px-lab.com/html-img-tag-vs-css-background-image/

결국 이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 img 태그를 쓰고, 그렇지 않으면 background image 를 쓰는 것이 결론이다.