All Snippets
Top 100 Snippets

By Language

GBIC >> Source Code >> HTML >> Snippet

07 Images

..Browsers can display images.  The < img > tag is used for this
and can also be used to determine where the image is displayed
and how surrounding text will flow around the image.

Here's an example of an image tag:

< img src = "mypicture.jpg" >

Once a browser sees the img tag it will download the image file
and display it at normal size - in the browser at the point in the text
where the img tag is placed.  Text elsewhere in the HTML page
will flow around the image.  There is no implied line or paragraph
break - the image is considered 'inline'.

Here's another example of an image tag, showing some of the
common attributes that are used:

< img src = "mypicture.jpg" width = 200 height = 300 border = 2 align =right >

By telling the browser the size of the image, using width/height, the
browsere can allocate a space for the image and continue loading
the rest of the document, then filling in the image when it arrives from
its source.

The border attribute provides a simple black border as many pixels
thick as the HTML code defines.  The browser default is to have no

An image can be aligned to the left or right of a page using the align
attribute.   Or, the image can be aligned with respect to the line of
text it is on, using the top/bottom/middle align attribute values.

There are many more attribute for the < img > tag.  These are just some
of the more commonly used ones.

Image Formats
All browsers support JPG or GIF image formats. Some browsers
support additional formats.

GIFs support transparency, interlacing, and animation.

JPGs are better suited for pictures and tend to be smaller because they
have a higher compression ratio than GIFs.  On the downside, JPGs
suffer from loss of image quality when compressed too much.