Html IMG vs CSS Background-image
Image – Useful Tips
An image can be used in a webpage for two regions,
1) Image = for content use, on the other hand, tend to change frequently. New images are uploaded often, users change their profile images and photo galleries, etc.
2) Background Image = for design. I.e. logos, button images, links with images, etc. tend to stay the same. They’re only changed if designer want to redesign.
The way I tend to think about this is, do I want the image to appear on all screen sizes, on all devices, with CSS turned either on or off? Do I want the image to be “indexed” by Google and Facebook. If the answer is yes to all or any of these questions, then usually the image is “content” and you should use an IMG tag.
If you want a different image to display at different screen sizes (or no image at all on certain devices), or if you’re happy for the image to not appear on a print out, or you’re happy for the image to not appear if CSS is turned off, then usually the image is “design” and you should use a background image.
Note: If an HTML file contains ten images – eleven files are required to display the page right. Loading images takes time, so my best advice is: Use images carefully.
Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
Proper uses of IMG
IMGif you intend to have people print your page and you want the image to be included by default.
alttext) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
Pragmatic uses of IMG
IMGif you intend to have people print your page and you want the image to be included by default. Browsers aren’t always set to print background images by default; if you intend to have people print your page. Use IMG if you want the image to print by default.
IMGif you rely on browser scaling to render an image in proportion to text size.
IMGfor multiple overlay images in IE6.
z-indexin order to stretch a background image to fill its entire window.
Note, this is no longer true with CSS3 background-size; see #6 below.
background-imagecan dramatically improve performance of animations over a background.
When to use CSS background-image
- Use CSS background images if the image is not part of the content.
- Use CSS background images when doing image-replacement of text eg. paragraphs/headers.
background-imageif you intend to have people print your page and you do not want the image to be included by default. Use IMG if you want the image to print by default. Use background-image if you don’t want the image to print by default.
background-imageif you need to improve download times, as with CSS sprites.
background-imageif you need for only a portion of the image to be visible, as with CSS sprites.
background-size:coverin order to stretch a background image to fill its entire window.