What is it for?
According to W3C:
“The
IMGelement embeds an image in the current document at the location of the element’s definition.”
It is pretty clear therefore that we can use <img> tag in order to put images into our web pages.
This tag at one point revolutionised the web, as it brought images to it.
As time has moved on images and video dominate the web and the above simple guideline from W3C is nowhere near enough to tell us how we should be using this tag.
Appropriate uses
For content, not design
<img> tag should be used only for images which are directly related to the content of the given web page.
Any design related imagery, such as background tiling or component wrappers should be coded as part of an external CSS file and included via background CSS property.
Image source locations
Images are files which reside on server of some sort in order to be accessible by the end user.
In recent years it has become commonplace to use CDNs such as Flickr to serve all images within web pages.
There are known advantages and disadvantages to this approach.
The main advantage is that serving images can be much faster, as the CDN will have servers in particular country where the end user is based, hence serving of images will be faster for each user.
The main disadvantage is that images are outside the domain within which the given web site resides, making developers have to rely on the CDN to be up and running for the images to work within web pages.
Another disadvantage is that businesses are often concerned with giving their content away to third parties.
Main concern is that if the given CDN increases price of hosting, it may become more expensive to host images externally than internally.
There is also a big element of faith in hoping that the given CDN will be up and running forever (i.e. what happens if Yahoo goes bust and Flickr stops existing as a service?).
Content manageability
On large scale web sites which use teams of content editors, it is very important to consider those people within the work flow of a web site maintenance and updating processes.
Content editors usually have familiarity with HTML code, but not CSS, hence coding images as HTML backgrounds can sometimes create maintenance problem for non-technical staff.
Sometimes it is better to use <img> tag instead of CSS background in order to give content editors greater control over the content on the web site.
However these should be considered on individual bases through constructive communication and business interests should be taken into account (this usually means making sacrifices towards maintainability by non technical staff over semantics of the page).
Inappropriate uses
For layout
It was common in the past to use various ‘spacer’ images in order to control layout of web pages.
These spacers usually came in the form of a 1×1 pixel GIF image, which was stretched by developers using width and height attributes within the <img> tag.
This practice should be avoided by all means, as it unnecessarily bloats up the web page and creates very hard to maintain pages.
This practice is also bad because it misuses <img> tag for layout purposes rather than to bring good quality content into a web page.
Not using alt attribute
Images have accessibility issues associated with them – blind people and search indexers cannot see them.
This is the reason why there is an alt attribute present within <img> tag.
Sometimes however, in rush or through simple negligence, developers do not use alt attribute appropriate or at all.
alt attribute should always be used and should describe the image in the best way possible.
You should not be using an empty alt attribute simply to satisfy W3C code validator and make your code validate against the guidelines.
Using appropriate alt text is also important from Search Engine Optimisation perspective, as it is usually very relevant to have your web site images show up high in various search engine search results pages.