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

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

이 질문의 답변은 지역사회의 노력입니다.기존 답변을 편집하여 이 게시물을 개선하십시오.현재 새로운 답변이나 상호작용을 받아들이지 않고 있습니다.

이 더 요?IMG CSS가 background-image 그 반대는요

여기에는 접근성, 브라우저 지원, 동적 콘텐츠 또는 모든 종류의 기술적 제한 또는 사용성 원칙이 포함됩니다.

IMG의 적절한 사용

1. IMG다른 사용자가 페이지를 인쇄하도록 하고 이미지를 기본적으로 포함시키려면 이 옵션을 선택합니다.: JayTee
2. IMG 함께)alt텍스트) 이미지에 경고 아이콘과 같은 중요한 의미적 의미가 있는 경우.이를 통해 화면 판독기를 포함한 모든 사용자 에이전트에서 이미지의 의미를 전달할 수 있습니다.

IMG의 실용적인 사용

1. IMG+ alt 속성(이미지가 로고, 다이어그램 또는 인물(주식 사진 담당자가 아닌 실제 인물)과 같은 컨텐츠의 일부인 경우): 산초지방
2. IMG브라우저 배율을 사용하여 텍스트 크기에 비례하여 이미지를 렌더링하는 경우.
3. IMGIE6에서 여러 오버레이 이미지를 만듭니다.
4. 용하하IMG와 함께 z-index위하여배경 이미지를 확장하여 창 전체를 채웁니다.
   이것은 CSS3 백그라운드사이즈에서는 적용되지 않게 되었습니다.6번
5. 「」를 사용합니다.imgbackground-image는, 백그라운드에서 애니메이션의 퍼포먼스를 큰폭으로 향상시킬 수 있습니다.

CSS background-image를 사용하는 경우

1. 이미지가 콘텐츠의 일부가 아닌 경우 CSS 배경 이미지를 사용합니다.: 산초지방
2. 텍스트(예: 단락/헤더)의 이미지 치환을 수행할 때는 CSS 배경 이미지를 사용합니다.: 산초지방
3. background-image기본적으로 이미지를 포함하지 않으려면 다른 사용자가 페이지를 인쇄하도록 하십시오.: JayTee
4. background-imageCSS 스프라이트와 같이 다운로드 시간을 개선할 필요가 있는 경우
5. background-imageCSS 스프라이트와 같이 영상의 일부만 보여야 하는 경우.
6. background-imagebackground-size:cover배경 이미지를 확장하여 창 전체를 채우도록 합니다.

그것은 나에게 흑백의 결정이다., 이 아닌 하세요.<img />【 】alt At.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);
}

, jQuery 되어 JavaScript 「jQuery」가 페이드 됩니다.<img/>의 »src.

MDN에서의 이행에 대한 상세 정보.

위의 답변은 디자인 측면만을 고려하고 있습니다.SEO 측면으로 기재하고 있습니다.

「 」를 <img />

1. 검색 엔진으로 이미지를 인덱싱해야 하는 경우
2. 카드(클릭 영역)를 포함한 콘텐츠와 관련이 있지만 디자인과 관련이 없는 경우.디자인은 아마도 해석하기 가장 어려운 부분일 것입니다.왜냐하면 디자인은 모두 적절하기 때문입니다.기능적인 디자인(카드, 썸네일, 프로필 이미지, 클릭할 수 있는 것)과 사이트에서 주로 사용되는 미적 디자인이라고 할 수 있습니다.
3. 목록 항목
4. 이미지가 너무 작지 않은 경우(아이코닉 이미지가 아님).
5. 「 」를 할 수 있는 alt ★★★★★★★★★★★★★★★★★」title여하하다
6. 인쇄 매체 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;
}

않으면 src 「」의 <img>모든 HTML 파일에 태그를 붙입니다(프로세스를 자동화하기 위해 서버 측 스크립트 언어 또는 CMS를 사용하지 않는 경우).

또, 배경 이미지는, 유저가 이미지를 보존할 수 없게 하고 싶은 경우에도 편리합니다(단, 지금까지 필요 없었습니다).

산초테지방의 대답과 거의 비슷하지만 다른 관점에서요웹 사이트에서 스타일시트를 완전히 삭제할 경우 나머지 요소는 콘텐츠에만 속합니까?그렇다면, 나는 내 일을 잘했다.

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

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

이것은 내용의 일부입니까, 아니면 설계의 일부입니까?

만약 이 질문에 대답할 수 없다면, 여러분은 아마 무엇을 하고 있는지 무엇을 하고 싶은지 모를 거예요!

또, 「프린터 프렌들리」가 되고 싶다고 해서, 2개의 테크닉을 고려하지 말아 주세요.또한 CSS를 사용하여 SEO의 관점에서 콘텐츠를 숨기지 마십시오.CSS 파일의 컨텐츠를 관리하는 경우는, 자신의 다리에 총을 맞은 것입니다.이것은 무엇이 내용인지 아닌지에 대한 사소한 결정일 뿐이다.다른 모든 측면은 무시해야 한다.

다음 두 가지 주장을 추가하겠습니다.

• 이미지 크기를 조정해야 하는 경우 img 태그가 좋습니다.예를 들어 원본 이미지가 100pxxx100px이고 80pxxx80px로 하려면 img 태그의 CSS 폭과 높이를 설정할 수 있습니다. 배경화면으로 하는 좋은 방법이 없어요. 편집: 이 작업은 CSS3 속성을 사용하여 백그라운드이미지에서도 실행할 수 있게 되었습니다.

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

<IMG> 태그를 사용하는 것의 또 다른 장점은 SEO와 관련된 것입니다.즉, 이미지 태그의 ALT 속성에 이미지에 대한 추가 정보를 제공할 수 있지만, CSS를 통해 이미지를 지정할 때는 이러한 정보를 제공할 수 없습니다.이 경우 이미지 파일 이름만 검색 엔진에 의해 인덱싱될 수 있습니다.ALT 어트리뷰트는 CSS 어프로치에 비해 <IMG> 태그의 SEO에 확실히 유리합니다.따라서 이미지 검색 결과에서 순위를 매기고 싶은 이미지(예: Google 이미지 검색)를 <IMG> 태그를 사용하여 지정하는 것이 좋습니다.

전경 = img.

배경 = CSS 배경.

배경 이미지는 필요한 경우에만 사용하십시오(예: 타일링된 이미지가 있는 용기).

IMAGES를 이용한 주요 장점 중 하나는 SEO에 더 좋다는 것입니다.

배경 이미지를 사용하여 치수를 반드시 지정해야 합니다.이는 실제로 사전에 알지 못하거나 확인할 수 없는 경우 심각한 문제가 될 수 있습니다.

큰 <img />오버레이입니다.」)에 내부 섀도를 붙이고 는 어떻게 합니까?box-shadow:inset 0 0 5px rgb(0,0,0,.5)이 ? ★★★★★★★★★★★★★★★★★★·<img />하위 요소를 사용할 수 없습니다. 위치를 지정하고 쓸모없는 마크업에 해당하는 빈 요소를 추가해야 합니다.

결론적으로, 그것은 꽤 상황적이다.

에도 몇 .background-image사용해야 합니다.

• 마우스가 이미지 위에 있을 때 이미지를 변경하는 경우.
• 이미지에 둥근 모서리를 추가하는 경우.「 」를 사용하고 img둥근 모서리에서 이미지가 새어 나옵니다.

여러 스킨 또는 디자인 버전이 있는 경우 CSS background-image를 사용합니다.Javascript를 사용하여 요소의 클래스를 동적으로 변경할 수 있습니다. 그러면 요소가 다른 이미지를 렌더링하게 됩니다.IMG 태그가 붙어 있는 경우는, 보다 까다로울 수 있습니다.

기술적인 고려사항을 다음에 제시하겠습니다.미지지동 ?? ?? ?? ? ?? ?? ?? 하면 더 수 있어요.<img>태그를 HTML로 지정하면 CSS 속성을 동적으로 편집하려고 시도합니다.

이미지 크기는 어떻게 되나요?img 태그를 사용하면 브라우저가 이미지를 스케일링합니다.css background를 사용하면 브라우저는 큰 이미지에서 청크를 잘라냅니다.

img는 이유가 있는 html 태그이므로 사용해야 합니다.참조용 또는 설명을 위해 예를 들어 기사에 있는 사람.

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

하지만 그것은 계속 논의되어야 할 주제이다.

프랑스 파리에서 온 웹 학생

CSS TranslateX/Y(Html을 애니메이션화하는 적절한 방법)를 사용하여 이미지를 애니메이션화하는 경우 - CSS 배경 이미지와 IMG 태그를 애니메이션화하는 경우 CSS 배경 이미지에 대해 Chrome 타임라인 녹화를 수행하면 그림 그리기 시간이 대폭 단축됩니다.

또 다른 이유가 있어요!응답성이 뛰어난 설계로 미디어 쿼리를 통해 디바이스의 저해상도, 중간 해상도 및 고해상도 이미지 사용을 분할하는 경우에도 배경을 사용해야 합니다.

또, 화상의 사이즈가 일정하지 않은 갤러리 섹션이 있기 때문에, 분명히 컨텐츠라고 해도, 배경 화상을 사용하고, 설정된 사이즈의 div에 가운데 맞추고 있습니다.이것은 그들의 앨범에서 페이스북이 하는 것과 비슷하다.

사용자가 '우클릭' 및 '이미지 저장'/'화상 저장'을 할 수 있도록 하려면 img 태그를 사용해야 합니다.따라서 이미지를 다른 사용자에게 리소스로 제공하려는 경우 이 태그를 사용해야 합니다.

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

작은 입력입니다만, iPhone의 렌더링 속도가 1분 늦어지는 반응성 이미지에 문제가 있었습니다.작은 이미지에도 문제가 있었습니다.

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

그러나 배경 이미지 사용으로 전환하면 문제가 사라집니다.이것은 새로운 브라우저를 대상으로 하는 경우에만 유효합니다.

HTML은 콘텐츠용이고 CSS는 디자인용입니다.이미지가 필요한가, 스크린 리더가 이미지를 촬영할 필요가 있는가."예"라고 대답한 경우 이미지를 HTML에 저장합니다.단순히 스타일링용이라면 CSS의 background-image 속성을 사용하여 이미지를 주입할 수 있습니다.여기 있는 많은 사람들이 이미 언급했듯이, 원하는 경우 이미지에 의사 요소를 사용할 수 있습니다.

IMG 장전하다src 파일 의 경우,background-image소스가 스타일시트에 표시되므로 스타일시트가 로드된 후 이미지가 로드되어 웹 페이지 로드가 지연됩니다.

이미지 PRO: " 」PRO: "Background-images for 」:<ul>/<ol>를 참조해 주세요.

배경 이미지가 전체 설계의 일부이고 여러 페이지에 걸쳐 반복되는 경우 배경 이미지를 사용합니다.최적화를 위해 백그라운드 스프라이트 형태로 하는 것이 바람직하다.

전체 디자인의 일부가 아닌 모든 이미지에 태그를 사용합니다. 기사, 인물 및 Google 이미지에 추가해야 할 중요한 이미지에 대한 특정 이미지와 같이 한 번 배치될 가능성이 높습니다.

에 <img>로고입니다.tag는 사이트/회사 로고입니다.왜냐하면 사람들이 홈피로 가기 위해 클릭을 하기 때문에 당신은 그것을 포장을 합니다.<a>붙이다

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

태그로 정의되어 있는 모든 이미지는 인덱스화되어(수동으로 제외되지 않는 한), 타이틀/alt 속성과 파일명이 적절히 최적화되어 있는 경우(w.r.t some 키워드) 검색 엔진에서 트래픽을 가져올 수 있습니다.

이미지를 유동적으로 만들고 다른 화면 크기에 맞게 조정하려면 IMG 태그를 사용할 수 있습니다.이 이미지들은 대부분 콘텐츠의 일부입니다.콘텐츠의 일부가 아닌 대부분의 요소에서는 아이콘 등을 애니메이션화하고 싶지 않은 한 다운로드 크기를 최소화하기 위해 CSS 스프라이트를 사용합니다.

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

페이지상의 특수 콘텐츠 또는1 페이지만의 이미지를 추가할 경우 IMG 태그를 사용하여 이미지를 여러 페이지에 배치할 경우 CSS Background Image를 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image