0

What's the best practice and established way to portray an image? I am working from the assumption that it shouldn't be done in HTML anymore so I am not using the img tag in my markup. Instead, I am linking the image in my CSS via background: url('dir'). If I am already going wrong with this assumption, let me know.

If linking an image in CSS is the correct (or at least a good, well established) way to go, then the next question is what HTML tag to use in the document? Technically, images can be applied to just about any element in HTML, so which one's the right one to use?

Case in point: Right now I am working on a row of icons where each icon has some text underneath it. At the moment, I have it set up as an unordered, horizontal list and I am applying the image and text in my CSS to each individual list item tag. However, there are several other ways I could do this. I could have a row of divs or spans, for example. Or I could use the img tag without defining the src property in the HTML and instead setting it in the CSS (at least I think this is possible). Or several other ways I can think.

What is the best practice in cases like this?

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
user1457366
  • 659
  • 3
  • 13
  • 19
  • 2
    *"I am working from the assumption that it shouldn't be done in html anymore so I am not using the img tag in my markup."* wat – JJJ Aug 05 '13 at 16:33
  • 2
    `img` tags aren't bad, just make sure you set alt text. But inserting content with CSS is definitely bad, don't do that unless it's a last ditch effort. I find a mix of the two to be best. – maxinacube Aug 05 '13 at 16:34
  • Not that there are a lot but if a user has stylesheets disabled and you would not have any `img` tags on your website, it would be pretty empty. – putvande Aug 05 '13 at 16:40

2 Answers2

5

Images should be displayed with the <img> tag if the image is contextual information on the page. For example, if you have a web page showing custom swimming pools you build, your image of the swimming pools (under normal circumstances) should be set on the page using the <img> tag with an appropriate alt attribute.

// Shows a picture of a pool, provides contextual fallback text
<img src="pool.png" alt="The 'Custome' style pool." />

CSS background images are used more for stylist or decorations on the page. The background image of your webpage is not contextual, so it is set with a background image, for example. However, CSS background images are used for things such as sprites or JavaScript sliders. In these cases, special measures are taken to make sure they are still specified as contextual content (such as setting the title attribute).

// Alert icon is just a design element and does not
// provide context to the page
<div class="alert-icon"></div>
.alert-icon{background:url('alert.png');width:42px;height:42px}

It is also important to note that, by default, <img> will be printed and background-image will not. Chrome, as well as other browsers, now have an option to turn on background printing, but if you want to be 100% certain an image prints, <img> is the way to go.

TL;DR: For the majority of cases, use <img> for contextual images with proper alt attributes. Use CSS background images for decorations or sprites that do not convey context to the site.

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
  • +1 for the printing aspect. While many web pages aren't meant to be printed, there are always scenarios where printing would be desired. Maps/directions would be the first thing that comes to mind. If you have directions to your custom pools shop and the image is a static map, you'd definitely want that included. – Dryden Long Aug 05 '13 at 17:16
0

Using CSS to display images using the background property is best if you want to display a sprite whose image can be manipulated via class or id. Other than that, using the <img> tag is still in practice.

Jace Cotton
  • 2,004
  • 1
  • 21
  • 38