[html] IMG 대 CSS 배경 이미지를 사용하는 경우는 언제입니까?



Answers

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

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

Question

CSS background-image 와 반대로 이미지를 표시하는 데 HTML IMG 태그를 사용하는 것이 더 적절한 경우와 그 반대의 경우는 무엇입니까?

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




HTML은 콘텐츠 용이고 CSS는 디자인 용입니다. 이미지가 필요하고 화면 판독기에서 픽업해야합니까? 대답이 '예'라면 이미지를 HTML에 넣으십시오. 스타일링에만 사용되는 경우 CSS의 background-image 속성을 사용하여 이미지를 삽입 할 수 있습니다. 이미 많은 사람들이 이미 언급했듯이 원하는 경우 이미지에 의사 요소를 사용할 수 있습니다.




CSS TranslateX / Y (HTML을 애니메이션하는 적절한 방법)를 사용하여 이미지 애니메이션하기 - 애니메이션 된 CSS 배경 이미지와 애니메이션이 적용된 IMG 태그를 기록한 경우 CSS의 페인트 시간이 크게 단축됩니다. 배경 이미지.




위의 답변은 디자인 측면만을 고려합니다. 나는 SEO 측면에서 그것을 목록에 올리고있다.

<img /> 사용시기

  1. 검색 엔진으로 이미지 색인을 생성 해야하는 경우
  2. 디자인과 관련없는 콘텐츠와 관련이있는 경우.
  3. 이미지가 너무 작지 않은 경우 (아이콘 이미지가 아님).
  4. alttitle 속성을 추가 할 수있는 이미지
  5. 인쇄 매체를 사용하여 인쇄하려는 웹 페이지의 이미지 css

CSS background-image 사용시기

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

이러한 이유로 나는 그들을 사용할 것입니다. 이들은 이미지 검색 엔진 최적화의 우수 사례입니다.




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




이미지가 유동적이고 다른 화면 크기로 확대되도록하려면 IMG 태그를 사용할 수 있습니다. 나를 위해 이러한 이미지는 대부분 콘텐츠의 일부입니다. 내용의 일부가 아닌 대부분의 요소는 아이콘 등을 움직이게하지 않고 CSS 스프라이트를 사용하여 다운로드 크기를 최소화합니다.




외부 파일에 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;
}

그렇지 않으면 모든 HTML 파일에서 해당 <img> 태그의 src 속성을 업데이트해야합니다 (서버 측 스크립트 언어 또는 CMS 를 사용하여 프로세스를 자동화하지 않는다고 가정).

또한 배경 이미지는 사용자가 이미지를 저장할 수 없도록하려는 경우 유용합니다 (아직 필요하지는 않지만).




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

<img /> 의 큰 문제는 오버레이입니다. 내 이미지에 CSS 내부 그림자가 필요한 경우 ( box-shadow:inset 0 0 5px rgb(0,0,0,.5) )? 이 경우 <img /> 는 자식 요소를 가질 수 없으므로 위치 지정을 사용하고 쓸모없는 마크 업과 같은 비어있는 요소를 추가해야합니다.

결론적으로, 그것은 아주 상황 적입니다.




페이지의 특수한 내용에 대해서만 이미지를 추가하거나 한 페이지에만 이미지를 추가하려면 IMG 태그를 사용해야하며 둘 이상의 페이지에 이미지를 넣으려면 CSS 배경 이미지를 사용해야합니다.




전경 = img.

배경 = CSS 배경.




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

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

이 부분이 콘텐츠의 일부 또는 디자인의 일부입니까?

당신이 대답 할 수 없다면, 당신은 아마 당신이하고있는 일이나 당신이하고 싶은 것을 모를 것입니다!

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




다른 배경 이미지 PRO : <ul> / <ol> 목록의 배경 이미지.

디자인이 전체 디자인의 일부이고 여러 페이지에서 반복되는 경우 배경 이미지를 사용하십시오. 바람직하게는 최적화를위한 백그라운드 스프라이트 양식.

전체 디자인의 일부가 아닌 모든 이미지에 태그를 사용하고 기사, 사람 및 Google 이미지에 추가해야하는 중요한 이미지와 같은 특정 이미지와 같이 한 번 배치 될 가능성이 큽니다 .

** <img> 태그에 포함 된 반복되는 이미지는 사이트 / 회사 로고뿐입니다. 사람들이 그것을 클릭하여 홈페이지로 이동하는 경향이 있으므로 <a> 태그로 <a> 쌀 수 있습니다.




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




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

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

하지만, 그것은 반복해서 논의해야 할 주제입니다.

파리, 프랑스 출신의 웹 학생




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




Related