html background-repeat 속성 - IMG 대 CSS 배경 이미지를 사용하는 경우는 언제입니까?





15 Answers

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

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

background-image 위치 화면에

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

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




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

<img /> 사용시기

  1. 검색 엔진으로 이미지 색인을 생성 해야하는 경우
  2. 디자인과 관련없는 콘텐츠와 관련이있는 경우.
  3. 이미지가 너무 작지 않은 경우 (아이콘 이미지가 아님).
  4. alttitle 속성을 추가 할 수있는 이미지
  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;
}

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

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




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

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

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

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

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




전경 = img.

배경 = CSS 배경.




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




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

  • 마우스가 마우스 위로 움직일 때 이미지가 변경되기를 원할 때.
  • 이미지에 둥근 모서리를 추가하려는 경우. img 를 사용하면 둥근 모서리에서 이미지가 새어 나옵니다.



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




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




또한, 나는 그 이미지가 분명히 내용으로 간주되지만, 나는 배경 이미지를 사용하고 설정 크기로 div에서 중심에 있도록 일관성없는 그림 크기를 가진 갤러리 섹션이 있습니다. 이것은 페이스 북이 앨범에서하는 것과 비슷합니다.




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

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




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




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

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




나는 그들이 대부분의 브라우저에서 지원되는 100 % 신축성을 갖도록 만들고 싶을 때 배경 이미지 대신 이미지를 사용합니다.




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

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

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

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




Related