Is it better to define images in direct html or css?

Question

If I have a choice to embed images directly in html or in css, say, for example, a link wrapped in an image that I could make ...

<a href="#"><img src="#" alt="" width="" height="" /></a> 

Or I could do ...

 <a id="img" href="#"></a> #img {background: url('#') no-repeat; height: #; width: #;} 

Which is better and why? Both work as desired, but is there a difference in boot time, etc., or in any best practice considered?

Answer 1

Using images in HTML is better if the image has any contextual meaning ... if it is a decorative picture without contextual meaning, then use CSS. CSS is for presentation, HTML is for content.

Best hint for determining whether to use HTML or CSS for an image: If I delete the image, will the content of the webpage still make sense?

The image in HTML is intended to provide visual meaning in a context with significant text indentation. Avoid using element A without any content, as its content will be related to the link, for browsers and web crawlers (such as the Google bot).

Use only CSS images for decorative purposes only. Otherwise, it can damage your search engine rankings. Always provide an alt attribute for images, define what will represent that the potential visitor cannot see any images.

Answer 2

If the image has a context, such as a logo or photograph, I would suggest downloading it as <img> Make sure you provide alternative text for accessibility and SEO reasons.

If the image has no context in the page area, then I think that the right place for it is defined in CSS, which controls the design.

The whole idea is to separate the presentation from your content as much as you can. An image can be content, and if so, it should be in it.

Answer 3

As a rule, I try to put as many images as possible in CSS, but Doozer and Mario have good points. If an image is important for context, it can go in HTML. I will also use <img> tags when the text should float around and the image.

One thing CSS can do, <img> cannot CSS sprites . This is the only real performance benefit you get from one or the other. Productive puzzles such as youtube.com will combine many images into one large composite image to reduce HTTP traffic (and therefore page load time). For example, this is a sprite taken from youtube.com.

Answer 4

Follow the principles of semantic HTML. If the image is content, that is, a thumbnail, photo, or button, use the <img> element. If this is more of a page design, a background image may be more appropriate.

A more specific example: if you use your image as an icon next to a text link, use a background image:

 <span class="printIcon" onclick="window.print()">Print</a> .printIcon { background: url(...) no-repeat; padding-left: 20px } 

If your image is the button itself, without the textual aspect, use the <img> element with the corresponding alt attribute, which will work to replace the image if it is not available.

 <img src="printButton.png" alt="Print" onclick="window.print()" />