HTML and CSS Reference
In-Depth Information
implementing an HTML element that could be used for images and other media was
occurring in early 1993 when 21-year-old Marc Andreessen proposed and later imple-
mented the self-closing img element in the Mosaic web browser. 1 Mosaic is credited
with being central in enabling the Internet boom of the 1990s by moving web browsers
from text-based systems to graphics-enabled applications that more readily appealed to
a nontechnical audience. Despite reservations about img 's limitations (others wanted an
element that could embed a greater variety of media than just images), the img element
is still here today. Not much has changed in HTML5, other than the removal of the at-
tributes align , border , hspace , and vspace , the functionality of which should be
created through CSS.
1 Marc Andreesen's original message proposing the img element is archived at ht-
tp:// .
The img element generally requires two attributes: src and alt . The first, src ,
specifies the location of the actual image file. The location may be given as an absolute
or relative URL, meaning it may be specified as an absolute address for the image, like
src="" , or an address relative to the
current HTML page, such as src="images/pic.jpg" . JPEG, GIF, and (relatively
more recently) PNG images are popular image formats for the Web, but it is perhaps
less well known that the img element is not limited to these formats and their vari-
ants. Depending on the web browser, TIFF, BMP, XBM, and even PDF 2 files may be
displayed. This variety of support is because the HTML specification does not specify
which image formats need to be supported by this element, only that the file to display
is in fact an image.
You can follow some general rules when deciding what image format to use for par-
ticular imagery on your website. For photographic content, where there are lots of
tones of color, JPEG is the format to choose. If you have areas in your images that
are solid continuous blocks of color, such as in a logo or illustration, choose between
GIF or PNG. PNG offers more flexibility than GIF and was originally created to re-
place GIF because of a licensing issue with an algorithm in the GIF format. So, in
general, go with PNG. However, GIF has more legacy support. PNGs that contained
transparency would famously show up pink in Internet Explorer 6; however, it may
well be time to drop support for browsers this far back in browser history and just go
with PNG. PNG generally comes in two forms: PNG-8 and PNG-24. Use PNG-8 if
the color palette in the image is quite small (256 or fewer individual colors) and if
Search WWH ::

Custom Search