Dear Ms. FEWD,
I know we have the image tag in HTML, and background-image in CSS. When is the proper time each should be used?
Dear Image Scrimmage,
While both render an image, they’re both used for very different purposes. To decide which should be used, ask yourself: is the image content or presentation?
Examples of content might be article images or images showing products. You definitely want to denote this as part of the content, which is where the HTML img tag comes into play. Having the required "alt" attribute (and, if needed, the optional "title" attribute) filled out in the img tag also gives you some additional benefits. First, the alt attribute gives the image properties and keywords that improve SEO, so that search engine crawlers know what they are looking at and can index it.
Second, the alt attribute is a place to describe the picture for accessibility. Not only does the alt attribute shows up as a tooltip when a user hovers a pointer over the image, but the information that gets read aloud by screen readers for users with impaired vision. Last, if the image becomes broken, the alt text will display on the page as a fallback. Your user will still see the description of what was supposed to be there (until you fix it, of course).
When an image is part of the site design, the CSS background-image property should be used and, performance-wise, is the fastest rendering option. For instance, an arrow next to a menu link is a common design element right now. This sort of image is purely for presentation and does not need the attributes found on an HTML img tag. The link itself gives all the necessary information. If the arrow were to disappear, no information of value would be lost. The link’s attributes and copy inform the user, crawler, or screen reader of what it needs to know.
Do you have a front end development question? Email Ms. FEWD or DM her on Twitter: @MsFEWD.
Photo by John Westra