을 사용하는 경우 IMG 대CSS background-image?

https://stackoverflow.com/questions/492809

20-08-2019
|

문제

어떤 상황에서는 더 그것을 사용하여 적절한 HTML IMG 태그 이미지를 표시하려면 반대로,CSS background-image, 며,그 반대의 경우?

한 요인이 포함될 수 있습 접근성,브라우저 지원,동적인 내용,또는 어떤 종류의 기술 제한하거나 유용성 원칙이 있습니다.

해결책

IMG의 적절한 사용

사용 IMG 당신이 사람을 가려고한다면 페이지를 인쇄하십시오 그리고 이미지가 기본적으로 포함되기를 원합니다. -Jaytee
사용 IMG (와 함께 alt 텍스트) 이미지에 중요한 의미 론적 의미가있는 경우 경고 아이콘. 이를 통해 이미지의 의미를 화면 리더를 포함한 모든 사용자 에이전트에서 전달할 수 있습니다.

IMG의 실용적인 사용

사용 IMG 이미지가있는 경우 alt 속성 내용의 일부 로고 나 다이어그램 또는 사람 (실제 사람, 재고 사진이 아닌 사람)과 같은. -Sanchothefat
사용 IMG 브라우저 스케일링에 의존하여 텍스트 크기에 비례하여 이미지를 렌더링합니다.
사용 IMG ~을 위한 IE6의 다중 오버레이 이미지.
~~사용 IMG a z-index ~하기 위해 배경 이미지를 늘리십시오 전체 창을 채우기 위해.~~
CSS3 배경 크기는 더 이상 사실이 아닙니다. 아래 #6을 참조하십시오.
사용 img 대신에 background-image 배경에서 애니메이션의 성능을 크게 향상시킬 수 있습니다.

CSS 배경 이미지를 사용하는 시점

이미지 인 경우 CSS 배경 이미지를 사용하십시오 내용의 일부가 아닙니다. —Sanchothefat
수행 할 때 CSS 배경 이미지를 사용하십시오 텍스트의 이미지 교체 예를 들어. 단락/헤더. -Sanchothefat
사용 background-image 당신이 사람을 가려고한다면 페이지를 인쇄하십시오 그리고 기본적으로 이미지가 포함되기를 원하지 않습니다. -Jaytee
사용 background-image 다운로드 시간을 향상시켜야하는 경우 CSS 스프라이트.
사용 background-image CSS 스프라이트와 마찬가지로 이미지의 일부만 표시 해야하는 경우.
사용 background-image ~와 함께 background-size:cover 전체 창을 채우기 위해 배경 이미지를 늘리기 위해.

다른 팁

나에게 흑백 결정입니다. 이미지가 로고 또는 다이어그램 또는 사람 (실제 사람, 재고 사진 인물)과 같은 내용의 일부인 경우 <img /> 태그 플러스 alt 속성. 다른 모든 것에는 CSS 배경 이미지가 있습니다.

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

아무도 이것을 언급하지 않았다는 것에 놀랐습니다. CSS 전환.

기본적으로 전환 할 수 있습니다 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);
}

이것은 모든 종류의 JavaScript 또는 jQuery 애니메이션을 저장하여 <img/>'에스 src.

전환에 대한 자세한 정보 MDN.

위의 답변은 디자인 측면 만 고려합니다. 나는 그것을 SEO 측면에 나열하고있다.

사용시기 <img />

이미지가 필요할 때 검색 엔진으로 색인
설계하지 않는 콘텐츠와 관련이있는 경우.
이미지가 너무 작지 않은 경우 (상징적 인 이미지가 아님).
추가 할 수있는 이미지 alt 그리고 title 기인하다.
인쇄 매체 CSS를 사용하여 인쇄하려는 웹 페이지의 이미지

CSS를 사용하는시기 background-image

순수하게 디자인하는 데 사용되는 이미지.
내용과 관련이 없습니다.
CSS3로 연주 할 수있는 작은 이미지.
이미지 반복 (블로그 저자 아이콘에서 각 기사 등에 대해 날짜 아이콘이 반복됩니다).

나는 이러한 이유에 따라 그것들을 사용할 것입니다. 이들은 이미지의 검색 엔진 최적화의 모범 사례입니다.

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

는 경우에 당신은 당신의 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;
}

그렇지 않으면,당신은 당신을 업데이트 src 특성의 적절한 <img> 태그에 HTML 파일(고 가정하고 당신이 사용하지 않는 서버 스크립트 언어이나 CMS 자동화하는 프로세스).

또한 배경 이미지는 유용하지 않으려면 사용자가 저장할 수 있도록 이미지(지만 나는 지금까지 이것을 할 필요).

거의 동일합니다 Sanchothefat의 대답, 그러나 다른 측면에서. 나는 항상 나 자신에게 묻습니다. 웹 사이트에서 스타일 시트를 완전히 제거한다면 나머지 요소를 수행하십시오. 뿐 내용에 속합니까? 그렇다면 나는 일을 잘했습니다.

일부 답변은 여기서 시나리오를 과도하게 복제합니다. 이것은 죽은 단순한 상황입니다.

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

이 부분이 컨텐츠의 일부입니까 아니면 디자인의 일부입니까?

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

또한 "프린터 친화적"이되기를 원하거나 원하기 때문에 두 기술 옆에 고려하지 마십시오. 또한 CSS와 함께 SEO 관점에서 콘텐츠를 숨기지 마십시오. CSS 파일에서 콘텐츠를 관리하는 것을 발견하면 다리를 촬영했습니다. 이것은 내용인지 아닌지에 대한 사소한 결정입니다. 다른 모든 측면은 무시되어야합니다.

나는 또 다른 두 가지 주장을 추가 할 것입니다.

an IMG 필요한 경우 태그가 좋습니다 크기를 조정하십시오 이미지. 예 : 원본 이미지가 100px x 100 px이고 80px x 80px가 되려면 IMG 태그의 CSS 너비와 높이를 설정할 수 있습니다. ~~나는 배경 이미지를 사용하여 이것을하는 좋은 방법을 모른다.~~ 편집 : 이제 이것은 배경 이미지를 사용하여 수행 할 수 있습니다. background-size CSS3 속성.
사용 배경 이미지 동적으로 필요할 때 좋습니다 스프라이트 사이를 전환하십시오. 예를 들어 버튼 이미지가 있고 커서가 요소 위로 호버링 될 때 별도의 이미지가 표시되면 일반 및 호버 스프라이트를 포함하는 배경 이미지를 사용하고 배경 위치를 동적으로 변경할 수 있습니다.

사용하면 한 가지 더 이점이 있습니다u003CIMG> 태그는 SEO와 관련이 있습니다. 즉, 이미지 태그의 ALT 속성에서 이미지에 대한 추가 정보를 제공 할 수 있지만 CSS를 통해 이미지를 지정할 때 그러한 정보를 제공 할 수있는 방법은 없으며이 경우 이미지 파일 이름 만 색인화 될 수 있습니다. 검색 엔진에 의해. Alt 속성은 확실히 제공합니다u003CIMG> CSS 접근 방식에 비해 태그 SEO 이점. 그렇기 때문에 나에 따르면u003CIMG> 꼬리표.

전경 = IMG.

배경 = CSS 배경.

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

사용하여 주요 장료 중 하나입니다 이미지 그게 다야 SEO에게 더 좋습니다.

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

큰 문제 <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 (HTML을 애니메이션하는 적절한 방법)를 사용하여 이미지 애니메이션과 관련하여 - CSS 배경 이미지의 크롬 타임 라인 녹화와 IMG 태그를 애니메이션하는 경우 CSS의 페인트 시간이 크게 짧아집니다. 배경 이미지.

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

또한, 나는 일관성이없는 그림 크기를 가진 갤러리 섹션이 있으므로 해당 이미지는 분명히 콘텐츠로 간주 되더라도 배경 이미지를 사용하여 세트 크기로 div로 중앙에 있습니다. 이것은 Facebook의 앨범에서하는 것과 비슷합니다 ..

IMG 이유는 HTML 태그이므로 사용해야합니다. 사물을 참조하거나 설명하기 위해 사람들은 기사에서 : 사람들은 다음과 같습니다.

또한 이미지 인 경우 의미가 있습니다 또는 클릭 할 수 있어야합니다 IMG a보다 낫다 CSS 배경. 다른 모든 상황에서는 a CSS 배경 사용할 수 있습니다.

그러나 반복해서 논의 해야하는 주제입니다.

프랑스 파리의 웹 학생

추가 할 작은 것만으로도 사용자가 '마우스 오른쪽 클릭'및 '저장 이미지'/'Save-Picture'를 사용할 수 있으려면 IMG 태그를 사용해야하므로 이미지를 리소스로 제공하려는 경우 기타.

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

작은 입력, 나는 작은 이미지에서도 iPhone의 렌더링 속도를 늦추는 반응 형 이미지에 문제가있었습니다.

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

그러나 배경 이미지를 사용하여 전환 할 때 문제가 사라지면 새로운 브라우저를 타겟팅하는 경우에만 가능합니다.

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

HTML은 컨텐츠를위한 것이며 CSS는 디자인을위한 것입니다. 이미지가 필요하고 스크린 리더가 선택해야합니까? 대답이 예라면 이미지를 HTML에 넣으십시오. 순전히 스타일링을위한 경우 CSS의 배경 이미지 속성을 사용하여 이미지를 주입 할 수 있습니다. 여기에 많은 사람들이 이미 언급 한 것처럼, 원하는 경우 이미지에서 의사 요소를 사용할 수 있습니다.

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

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

이미지가 유동적이고 다른 화면 크기로 확장되기를 원하는 경우 IMG 태그를 사용할 수 있습니다. 나 에게이 이미지는 대부분 내용의 일부입니다. 컨텐츠의 일부가 아닌 대부분의 요소의 경우 CSS 스프라이트를 사용하여 아이콘 등을 실제로 애니메이션하지 않는 한 다운로드 크기를 최소화합니다.

대부분의 브라우저에서 지원되는 100% 스트레치 가능하게 만들고 싶을 때 배경 이미지 대신 이미지를 사용합니다.

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

또 다른 배경 이미지 프로 : 배경 이미지 <ul>/<ol> 기울기.

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

전체 디자인의 일부가 아닌 모든 이미지에 태그를 사용하고 기사, 사람 및 추가 할 가치가있는 중요한 이미지에 대한 특정 이미지와 같이 한 번 배치 될 가능성이 높습니다. 구글 이미지.

** 내가 동봉 한 유일한 반복 이미지 <img> 태그는 사이트/회사 로고입니다. 사람들은 홈페이지로 가기 위해 클릭하는 경향이 있기 때문에 <a> 꼬리표.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow