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

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

---

IMGCSS가 아닌 HTML 태그 를 사용 하여 이미지를 표시하는 것이 더 적합한 상황은 무엇 background-image입니까?

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

---

IMG의 적절한 사용

1. 사용 IMG당신은 사람들이하려는 경우 페이지를 인쇄 하고 이미지가 기본적으로 포함되어야합니다. — 제이티
2. 이미지 에 경고 아이콘 과 같은 중요한 의미가있는 경우 텍스트 IMG와 함께 사용 합니다 . 이렇게하면 화면 판독기를 포함한 모든 사용자 에이전트에서 이미지의 의미를 전달할 수 있습니다.alt

IMG의 실용적인 사용

1. IMG이미지가 로고, 다이어그램 또는 사람 (스톡 사진 사람이 아닌 실제 사람)과 같은 콘텐츠의 일부인 경우 plus alt 속성을 사용 합니다. — 산초 테 파트
2. IMG브라우저 크기 조정을 사용하여 텍스트 크기에 비례하여 이미지를 렌더링하는 경우 사용 합니다.
3. IE6에서 여러 오버레이 이미지에 사용 IMG합니다 .
4. 사용 IMG로모그래퍼 z-index하기 위해 배경 이미지를 스트레칭 전체 창을 채우기 위해.
   CSS3 background-size에서는 더 이상 사실이 아닙니다. 아래 # 6을 참조하십시오.
5. img대신 사용 background-image하면 배경에서 애니메이션 성능을 크게 향상시킬 수 있습니다.

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

1. 이미지 가 콘텐츠의 일부가 아닌 경우 CSS 배경 이미지를 사용 합니다 . — 산초 테 파트
2. 텍스트의 이미지 교체를 할 때 CSS 배경 이미지를 사용하십시오 . 단락 / 헤더. — 산초 테 파트
3. background-image사람들 이 페이지를 인쇄 하도록하고 기본적으로 이미지를 포함하지 않으려는 경우 사용 합니다 . — 제이티
4. CSS 스프라이트background-image 와 같이 다운로드 시간을 개선해야하는 경우 사용 합니다 .
5. background-imageCSS 스프라이트처럼 이미지의 일부만 표시해야하는 경우 사용 합니다.
6. 전체 창을 채우기 위해 배경 이미지를 늘리려면 background-imagewith background-size:cover를 사용하십시오 .

---

그것은 나에게 흑백 결정입니다. 이미지가 로고, 다이어그램 또는 사람 (스톡 사진 사람이 아닌 실제 사람)과 같은 콘텐츠의 일부인 경우 <img />태그와 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. When Your Image need to be indexed by search engine
2. If it has relation to content not to design.
3. If your image is not too small ( not iconic images ).
4. Images where you can add alt and title attribute.
5. Images from a webpage which you want to print using print media css

When to use CSS background-image

1. Images Purely Used to Design.
2. No Relation With Content.
3. Small Images which we can play with CSS3.
4. Repeating Images ( In blog author icon , date icon will be repeated for each article etc.,).

As i will use them based on these reasons. These are Good practices of Search Engine Optimization of Images.

---

Browsers aren't always set to print background images by default; if you intend to have people print your page :)

---

If you have your CSS in an external file, then it's often convenient to display an image that's used frequently across the site (such as a header image) as a background image, because then you have the flexibility to change the image later.

For example, say you have the following HTML:

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

...and CSS:

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

A few days later, you change the location of the image. All you have to do is update the CSS:

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

Otherwise, you'd have to update the src attribute of the appropriate <img> tag in every HTML file (assuming you're not using a server-side scripting language or CMS to automate the process).

Also background images are useful if you don't want the user to be able to save the image (although I haven't ever needed to do this).

---

About the same as sanchothefat's answer, but from a different aspect. I always ask myself: if I would completely remove the stylesheets from the website, do the remaining elements only belong to the content? If so, I did my job well.

---

Some answers overcomplicate the scenario here. This is a dead simple situation.

Just answer to this question every time you'd like to place an image:

Is this part of the content or part of the design?

If you can't answer this, you probably don't know what you're doing or what you want to do!

Also, DO NOT consider beside the two technique, just because you'd wish to be "printer friendly" or not. Also DO NOT hide content from a SEO point of view with CSS. If you find yourself managing your content in CSS files, you shot yourself in the leg. This is just a trivial decision of what is content or not. Every other aspect should be ignored.

---

I would add another two arguments:

• An img tag is good if you need to resize the image. E.g. if the original image is 100px by 100 px, and you want it to be 80px by 80px, you can set the CSS width and height of the img tag. I don't know of any good way to do this using background-image. EDIT: This can now also be done with a background-image, using the background-size CSS3 attribute.

• Using background-image is good when you need to dynamically switch between sprites. E.g. if you have a button image, and you want a separate image displayed when the cursor is hovering over the element, you can use a background image containing both the normal and hover sprites, and dynamically change the background-position.

---

One more benefit from using the <IMG> tag is related to SEO - i.e. you can provide additional information about the image in the ALT attribute of the image tag, while there's no way to provide such information when specifying the image through CSS and in that case only the image file name may be indexed by search engines. The ALT attribute definitely gives the <IMG> tag SEO advantage over the CSS approach. That's why according to me it is better to specify the images you want to rank well in the image search results (e.g. Google Image Search) using the <IMG> tag.

---

Foreground = img.

Background = CSS background.

---

Use background images only when necessary e.g. containers with image that tiles.

One of the major PROS by using IMAGES is that it is better for SEO.

---

Using a background image, you need to absolutely specify the dimensions. This can be a significant problem if you don't actually know them in advance or cannot determine them.

A big problem with <img /> is overlays. What if I want an CSS inner shadow on my image (box-shadow:inset 0 0 5px rgb(0,0,0,.5))? In this case, since <img /> can't have child elements, you need to use positioning and add empty elements which equates to useless markup.

In conclusion, it's quite situational.

---

A couple of other scenarios where background-image should be used:

• When you want the image to change when the mouse is hovered upon it.
• When you want to add rounded corners to the image. If you use img, the image leaks out of the rounded corners.

---

Use CSS background-image in a case of multiple skins or versions of design. Javascript can be used to dynamically change a class of an element, which will force it to render a different image. With an IMG tag, it may be more tricky.

---

Here's a technical consideration: will the image be generated dynamically? It tends to be a lot easier to generate the <img> tag in HTML than to try to dynamically edit a CSS property.

---

What about the size of the image? If I use the img tag, the browser scales the image. If I use css background, the browser just cuts a chunk from the larger image.

---

In regards to animating images using CSS TranslateX/Y (The proper way to animate html) - If you do a Chrome Timeline recording of CSS background-images being animated vs IMG tags being animated you will see the paint times are drastically shorter for the CSS background-images.

---

There's another reason! If you have a responsive design and want to split usage of low, medium, and high-res images for devices through media queries, you should use backgrounds as well.

---

Also, i have a gallery section which has inconsistent picture sizes so even though those images are obviously considered content, I use background images and center them in divs with a set size. This is similar to what facebook does in their albums..

---

img is an html tag for a reason, therefore it should be used. For referencing or to illustrate things, people e.g: in articles.

Also if the image has a meaning or has to be clickable an img is better than a css background. For all other situation, I think, a css background can be used.

Although, it is a subject that needs to be discussed over and over.

Web Student from Paris, France

---

Just a small one to add, you should use the img tag if you want users to be able to 'right click' and 'save-image'/'save-picture', so if you intend to provide the image as a resource for others.

Using background image will (as far as I'm aware on most browsers) disable the option to save the image directly.

---

A small input, I have had problems with responsive images slowing down the rendering on iphone for up to a minute, even with small images:

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

But when switching to using background images the problem went away, this is only viable if targeting newer browsers.

---

IMG load first because the src is in the html file itself whereas in the case of background-image the source is mentioned in stylesheet so the image loads after the stylesheet loaded, delaying the loading of the webpage.

---

HTML is for content and CSS is for design. Is the image necessary and does it need to be picked up by screen readers? If the answer is yes, then put the image in the HTML. If it is purely for styling, then you can use the background-image property in CSS to inject the image. Just as a lot of people here have already mentioned, you can then use a pseudo element on the image if you like.

---

Also note that most search engine spiders don't index CSS background images therefore the background images will be ignored and you won't be able to get any traffic from search engines (no SEO benefit in short).

Where as all images defined with tags are indexed (unless manually excluded) and can bring in traffic from search engines if their title/alt attributes and filenames are optimized properly (w.r.t some keyword).

---

You can use IMG tags if you want the images to be fluid and scale to different screen sizes. For me these images are mostly part of the content. For most elements that are not part of the content, I use CSS sprites to keep the download size minimal unless I really want to animate icons etc.

---

I use image instead of background-image when i want to make them 100% stretchable which supported in most browsers.

---

If you want to add an image only for the special content on the page or for only one page the you should use IMG tag and if you want to put image on more than one pages then you should use CSS Background Image.

---

Another background-image PRO: Background-images for <ul>/<ol> lists.

Use background images if they are part of the overall-design and are repeated on multiple pages. Preferably in background sprite form for optimization.

Use tags for all images that are not part of the overall design, and are most likely placed once, like specific images for articles, people, and important images that deserve to be added to google images.

** The only repeated image that I enclose in a <img> tag is the site/company logo. Because people tend to click it to go to the homepage, thus you wrap it with an <a> tag.

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