IMG와 CSS 배경 이미지는 언제 사용합니까?

어떤 상황 IMG에서 CSS와 달리 HTML 태그 를 사용 하여 이미지를 표시하는 것이 더 적합 background-image합니까?

접근성, 브라우저 지원, 동적 컨텐츠 또는 모든 종류의 기술적 한계 또는 사용성 원칙이 요인에 포함될 수 있습니다.

IMG의 적절한 사용

1. IMG사람들 이 페이지를 인쇄 하도록하고 이미지가 기본적으로 포함되도록 하려면 사용하십시오 . — JayTee
2. 이미지가 경고 아이콘 과 같은 중요한 의미를 갖는 경우 IMG( alt텍스트 와 함께 )를 사용하십시오 . 이를 통해 화면 판독기를 포함한 모든 사용자 에이전트에서 이미지의 의미를 전달할 수 있습니다.

IMG의 실용적인 사용

1. IMG이미지가 로고나 다이어그램 또는 사람 (사진 사람이 아닌 실제 사람)과 같은 컨텐츠의 일부인 경우 플러스 alt 속성을 사용하십시오 . — sanchothefat
2. IMG텍스트 크기에 비례하여 이미지를 렌더링하기 위해 브라우저 크기 조정에 의존하는 경우 사용하십시오 .
3. IE6에서 여러 오버레이 이미지에 사용 IMG 합니다 .
4. 전체 이미지 를 채우 도록 배경 이미지 를 늘리 려면 IMGa와 함께 사용하십시오 . z-index
   CSS3 background-size에서는 더 이상 적용되지 않습니다. 아래 6 번을 참조하십시오.
5. img대신에 사용 background-image하면 배경에서 애니메이션 성능을 크게 향상시킬 수 있습니다.

CSS 배경 이미지를 사용하는 경우

1. 이미지 가 내용의 일부가 아닌 경우 CSS 배경 이미지를 사용하십시오 . — sanchothefat
2. 텍스트의 이미지 교체를 수행 할 때 CSS 배경 이미지를 사용하십시오 . 단락 / 헤더. — sanchothefat
3. background-image사람들 이 페이지를 인쇄 하도록하고 이미지가 기본적으로 포함되지 않게 하려면 사용하십시오 . — JayTee
4. CSS 스프라이트background-image 와 같이 다운로드 시간을 개선해야하는 경우 사용하십시오 .
5. background-imageCSS 스프라이트와 같이 이미지의 일부만 보이게 하려면 사용하십시오 .
6. 창 전체를 채우도록 배경 이미지를 늘이려면 background-image함께 사용하십시오 background-size:cover.

그것은 흑백 결정입니다. 이미지가 로고나 다이어그램 또는 사람 (재고 사람이 아닌 실제 사람)과 같은 컨텐츠의 일부인 경우 <img />tag plus alt 속성 을 사용하십시오 . 다른 모든 것에는 CSS 배경 이미지가 있습니다.

CSS 배경 이미지를 사용하는 다른 시간은 예를 들어 텍스트의 이미지 교체를 할 때입니다. 단락 / 헤더.

아직 아무도 언급하지 않은 것에 놀랐습니다 : CSS transitions .

div의 배경 이미지를 기본적으로 전환 할 수 있습니다 .

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

이것은 페이드 자바 스크립트 또는 jQuery를 애니메이션의 모든 종류의 저장 <img/>'들 src.

MDN 전환에 대한 추가 정보 .

위의 답변은 디자인 측면 만 고려합니다. SEO 측면에서 나열하고 있습니다.

사용시기 <img />

1. 검색 엔진에서 이미지를 색인 해야하는 경우
2. 디자인하지 않는 컨텐츠와 관련이있는 경우
3. 이미지가 너무 작지 않은 경우 (아이콘 이미지가 아님).
4. 추가 alt하고 title속성을 지정할 수있는 이미지
5. 인쇄 매체 CSS를 사용하여 인쇄하려는 웹 페이지의 이미지

CSS를 사용하는 경우 background-image

1. 디자인에 순수하게 사용 된 이미지.
2. 내용과 관련이 없습니다.
3. CSS3로 재생할 수있는 작은 이미지.
4. 이미지 반복 (블로그 작성자 아이콘에서는 날짜 아이콘이 각 기사 등에 대해 반복됩니다).

이러한 이유로 인해 사용할 것입니다. 이미지 검색 엔진 최적화의 모범 사례입니다.

브라우저가 항상 기본적으로 배경 이미지를 인쇄하도록 설정되어있는 것은 아닙니다. 사람들이 귀하의 페이지를 인쇄하게하려면 :)

외부 파일에 CSS가 있으면 사이트 전체에서 자주 사용되는 이미지 (예 : 헤더 이미지)를 배경 이미지로 표시하는 것이 편리합니다. 나중에 이미지를 변경할 수 있기 때문입니다.

예를 들어, 다음 HTML이 있다고 가정하십시오.

<div id="headerImage"></div>

... 그리고 CSS :

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

며칠 후 이미지의 위치를 ​​변경합니다. CSS를 업데이트하기 만하면됩니다.

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

그렇지 않으면 프로세스를 자동화하기 위해 서버 측 스크립팅 언어 나 CMS 를 사용하지 않는다고 가정 할 때 모든 HTML 파일에서 src적절한 <img>태그 의 속성 을 업데이트해야 합니다 .

또한 배경 이미지는 사용자가 이미지를 저장할 수 없도록하려는 경우에 유용합니다 (이 작업을 수행 할 필요는 없었지만).

sanchothefat의 답변 과 동일 하지만 다른 측면에서. 나는 항상 나 자신에게 묻습니다 : 웹 사이트에서 스타일 시트를 완전히 제거하려면 나머지 요소 는 내용 에만 속합니까? 그렇다면 나는 일을 잘했다.

일부 답변은 시나리오를 지나치게 복잡하게 만듭니다. 이것은 단순한 간단한 상황입니다.

이미지를 배치 할 때마다이 질문에 답하십시오.

콘텐츠의 일부입니까, 디자인의 일부입니까?

당신이 이것에 대답 할 수 없다면, 당신은 무엇을하고 있는지, 무엇을하고 싶은지 모를 것입니다!

또한 "프린터 친화적"이되기를 원하기 때문에 두 가지 기술 외에는 고려하지 마십시오. 또한 CSS를 사용하여 SEO 관점에서 컨텐츠를 숨기지 마십시오. CSS 파일에서 컨텐츠를 관리하는 것을 발견하면 자신을 발로 쐈습니다. 이것은 내용이 무엇인지에 대한 사소한 결정입니다. 다른 모든 측면은 무시해야합니다.

또 다른 두 가지 주장을 덧붙일 것입니다.

• IMG의 당신이해야하는 경우 태그는 좋은 크기 조정 이미지를. 예를 들어 원본 이미지가 100 x 100 픽셀이고 80 x 80 픽셀이되도록하려면 img 태그의 CSS 너비와 높이를 설정할 수 있습니다. 배경 이미지를 사용하여이를 수행하는 좋은 방법을 모르겠습니다. 편집 : 이제 background-sizeCSS3 속성을 사용하여 배경 이미지로 수행 할 수도 있습니다 .

• 스프라이트 사이 를 동적으로 전환 해야하는 경우 배경 이미지를 사용하는 것이 좋습니다 . 예를 들어 버튼 이미지가 있고 커서가 요소 위에있을 때 별도의 이미지가 표시되도록하려면 일반 및 호버 스프라이트가 모두 포함 된 배경 이미지를 사용하고 배경 위치를 동적으로 변경할 수 있습니다.

<IMG> 태그 사용의 또 다른 이점은 SEO와 관련이 있습니다. 즉, 이미지 태그의 ALT 속성에 이미지에 대한 추가 정보를 제공 할 수 있지만 CSS를 통해 이미지를 지정할 때 해당 정보를 제공 할 수있는 방법은 없습니다. 이미지 파일 이름 만 검색 엔진에서 색인을 생성 할 수 있습니다. ALT 속성은 CSS 접근법에 비해 <IMG> 태그 SEO 이점을 확실히 제공합니다. 그렇기 때문에 <IMG> 태그를 사용하여 이미지 검색 결과 (예 : Google 이미지 검색)에서 순위를 정할 이미지를 지정하는 것이 좋습니다.

전경 = img.

배경 = CSS 배경.

타일 ​​이미지가있는 컨테이너와 같이 필요한 경우에만 배경 이미지를 사용하십시오.

사용하여 주요 총 하나의 이미지는 이 때문이다 검색 엔진 최적화에 대한 더 나은 .

배경 이미지를 사용하면 치수를 절대적으로 지정해야합니다. 실제로 미리 알지 못하거나 확인할 수없는 경우 심각한 문제가 될 수 있습니다.

큰 문제 <img />는 오버레이입니다. 이미지에 CSS 내부 그림자를 원하면 어떻게 box-shadow:inset 0 0 5px rgb(0,0,0,.5)합니까? 이 경우 <img />하위 요소를 가질 수 없으므로 위치를 사용하고 빈 요소를 추가하여 쓸모없는 마크 업과 동일해야합니다.

결론적으로, 상황이 매우 심각합니다.

background-image사용해야 하는 몇 가지 다른 시나리오 :

• 마우스를 가져 가면 이미지를 변경하려는 경우
• 이미지에 둥근 모서리를 추가하려는 경우. 을 사용 img하면 둥근 모서리에서 이미지가 누출됩니다.

여러 스킨 또는 디자인 버전의 경우 CSS 배경 이미지를 사용하십시오. Javascript를 사용하여 요소 클래스를 동적으로 변경하여 다른 이미지를 렌더링하도록 할 수 있습니다. IMG 태그를 사용하면 더 까다로울 수 있습니다.

기술적 고려 사항은 다음과 같습니다. 이미지가 동적으로 생성됩니까? <img>CSS 속성을 동적으로 편집하는 것보다 HTML로 태그 를 생성하는 것이 훨씬 쉬운 경향이 있습니다 .

이미지의 크기는 어떻습니까? img 태그를 사용하면 브라우저가 이미지의 크기를 조정합니다. CSS 배경을 사용하면 브라우저가 더 큰 이미지에서 덩어리를 자릅니다.

CSS TranslateX / Y를 사용하여 이미지 애니메이션에 관한 것 배경 이미지.

또 다른 이유가 있습니다! 반응 형 디자인을 사용하고 미디어 쿼리를 통해 장치의 저해상도, 중형 및 고해상도 이미지 사용을 분할하려면 배경도 사용해야합니다.

또한 그림 크기가 일치하지 않는 갤러리 섹션이 있으므로 해당 이미지는 분명히 콘텐츠로 간주되지만 배경 이미지를 사용하고 설정된 크기의 div 중앙에 배치합니다. 이것은 페이스 북이 앨범에서하는 것과 비슷합니다.

img 는 이유 때문에 html 태그이므로 사용해야합니다. 물건을 참조하거나 설명하기 위해 사람들은 예를 들어 기사에서.

또한 이미지 에 의미가 있거나 클릭 가능해야하는 경우 img 가 CSS 배경 보다 낫습니다 . 다른 모든 상황에서는 CSS 배경을 사용할 수 있다고 생각 합니다.

그러나 계속 논의해야 할 주제입니다.

프랑스 파리 출신의 웹 학생

추가 할 작은 것만으로, 사용자가 '오른쪽 클릭'및 '이미지 저장'/ '사진 저장'을 할 수있게하려면 img 태그를 사용해야합니다. 따라서 이미지를 리소스로 제공하려는 경우 다른 사람.

배경 이미지를 사용하면 (대부분의 브라우저에서 알고있는 한) 이미지를 직접 저장하는 옵션이 비활성화됩니다.

작은 입력으로, 작은 이미지에서도 반응 형 이미지가 최대 1 분 동안 iPhone의 렌더링 속도를 늦추는 데 문제가 있습니다.

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

그러나 배경 이미지를 사용하도록 전환하면 문제가 사라졌으며 최신 브라우저를 타겟팅하는 경우에만 가능합니다.

IMGsrchtml 파일 자체에 있기 때문에 먼저로드 하는 반면 background-image소스 의 경우 스타일 시트에 언급되므로 스타일 시트가로드 된 후 이미지가로드되어 웹 페이지로드가 지연됩니다.

HTML은 콘텐츠를위한 것이고 CSS는 디자인을위한 것입니다. 이미지가 필요하고 스크린 리더가 가져와야합니까? 대답이 예이면 이미지를 HTML에 넣으십시오. 스타일링을위한 것이라면 CSS의 background-image 속성을 사용하여 이미지를 주입 할 수 있습니다. 여기 많은 사람들이 이미 언급했듯이 원하는 경우 이미지에 의사 요소를 사용할 수 있습니다.

또한 대부분의 검색 엔진 스파이더는 CSS 배경 이미지를 색인화하지 않으므로 배경 이미지는 무시되며 검색 엔진에서 트래픽을 얻을 수 없습니다 (짧은 SEO 혜택은 없음).

태그로 정의 된 모든 이미지가 색인으로 생성되고 (수동으로 제외되지 않은 경우) 제목 / alt 속성 및 파일 이름이 올바르게 최적화 된 경우 검색 엔진에서 트래픽이 발생할 수 있습니다 (일부 키워드 작성).

이미지가 유동적이고 다양한 화면 크기로 조정되도록하려면 IMG 태그를 사용할 수 있습니다. 나에게 이러한 이미지는 대부분 내용의 일부입니다. 내용의 일부가 아닌 대부분의 요소의 경우 실제로 아이콘 등을 애니메이션으로 만들지 않는 한 CSS 스프라이트를 사용하여 다운로드 크기를 최소로 유지합니다.

대부분의 브라우저에서 지원되는 100 % 확장 가능하게 만들려면 배경 이미지 대신 이미지를 사용합니다.

페이지의 특수 컨텐츠 또는 한 페이지에 대해서만 이미지를 추가하려면 IMG 태그를 사용해야하고 둘 이상의 페이지에 이미지를 넣으려면 CSS 배경 이미지를 사용해야합니다.

다른 background-image PRO : <ul>/ <ol>리스트의 배경 이미지 .

배경 이미지가 전체 디자인의 일부이고 여러 페이지에 반복되는 경우 배경 이미지를 사용하십시오. 바람직하게는 최적화를위한 배경 스프라이트 형태로 제공된다.

기사, 사람 및 Google 이미지에 추가 할 가치가있는 중요한 이미지의 특정 이미지와 같이 전체 디자인에 포함되지 않고 한 번만 배치되는 모든 이미지에 태그를 사용하십시오 .

** <img>태그 에 포함 된 유일한 반복 이미지 는 사이트 / 회사 로고입니다. 사람들이 클릭하면 홈페이지로 이동하는 경향이 있으므로 <a>태그로 묶습니다 .