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.

Html IMG vs CSS Background-image

Proper uses of IMG

  1. Use IMG if you intend to have people print your page and you want the image to be included by default. 
  2. Use IMG (with alt text) 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

  1. Use IMG if 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.
  2. Use IMG if you rely on browser scaling to render an image in proportion to text size.
  3. Use IMG for multiple overlay images in IE6.
  4. Use IMG with a z-index in order to stretch a background image to fill its entire window.
    Note, this is no longer true with CSS3 background-size; see #6 below.
  5. Using img instead of background-image can dramatically improve performance of animations over a background.

When to use CSS background-image

  1. Use CSS background images if the image is not part of the content.
  2. Use CSS background images when doing image-replacement of text eg. paragraphs/headers.
  3. Use background-image if 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.
  4. Use background-image if you need to improve download times, as with CSS sprites.
  5. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
  6. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!