Download starburst animated gif

Images

Image formats

GIF - Graphics Interchange Format
JPEG Joint Photographers Expert Group image format.
PNG Portable Network Graphic format.

Use CSS text-align for positioning

image Element <img>

The image element is a void element (so has no closing tag in XHTML). Void elements in xhtml must be expressed with a space and a slash (ie / ) before the closing angle bracket of the tag.

<

img element attributes

• - Replacement text for use when images are not available
• - URL for the image
• - Horizontal dimension
• - Vertical dimension
• - Name of image map to use
• - How the element handles crossorigin requests for use with canvas element

---

The <img> tag inserts a graphical image into the document's normal text flow.
An image can be placed inline with text anywhere on a page.
The default alignment of an image is with the baseline of the surrounding text.

Images should be used sparingly.

• Non graphical browsers such as lynx have no provision for displaying images.
• Users can choose to disable their browser from displaying inline images.
• It takes significantly more time to load an image across the net than it does to load textual information.
• Users with slow access to the net are likely to disable inline images to save download time (and money).
• People with a visual impairment may not be able to see your image clearly.
• Some visually impaired people use the web by using text to speech software that reads the text of a page and has no way of interpreting images.
• The content of an image cannot be searched using the"find" button of a browser.
• Users are impatient.
• Using lots of images and particularly large images, means that the browser takes a longer time to render your document. Users are normally searching for small amounts of information from your page and don't want to wait while images that contain extra information are slowly loaded.
  
  Users will hit the stop button and go elsewhere.

img element

<img src= "URL"attributes />

The image element is a void element (ie has no children).

Empty tags in HTML5 need to be expressed with a space and a slash (ie /) before the closing angle bracket of the tag to be compatible with xhtml.

The <img> tag inserts a graphical image into the document's normal text flow.

An image can be placed inline with text anywhere on a page.

The default alignment of an image is with the baseline of the surrounding text.

Why images should be used sparingly.

• Non graphical browsers

  • non graphical browsers such as lynx have no provision for displaying images.
  • Users can choose to disable their browser from displaying inline images.

• It takes significantly more time to load an image across the network than it does to load textual information. Users with slow network access are likely to disable inline images to save download time (and data usage).

• People with a visual impairment may not be able to see your image clearly.

• Some visually impaired people use the web via text to speech software that reads the text of a page and has no way of interpreting images.

• The content of an image cannot be searched using the "Find" tool of a browser.

• Some images can cause a distraction to reading the page.

• Users are impatient.

  Using lots of images and particularly large images, means that the browser takes a longer time to render your document. Users are normally searching for small amounts of information from your page and don't want to wait while images that contain extra information are slowly loaded.
  
  Users may hit the stop button and go elsewhere.

img element

Syntax

Minimal declaration

<img src = "url" alt = "String"/>

Using height and width attributes speeds up rendering of page by informing the browser of how much space (measured in pixels) to set aside for the image.

<img src = "url" alt = "String" width = "Number" height = "Number"/>

Alignment of images can be done using rules from inline, embedded or external style declarations.

<img src = "url" alt = "String" width = "Number" height = "Number" style="some inline CSS rule declarations" usemap="#url"/>

The align attribute still works in most browsers to support legacy code but is deprecated in xhtml strict, html strict and html5

<img src = "url" alt = "String" width = "Number" height = "Number" align="alignment" /> - do not use in HTML5

src = "url"

alt = "String"

width = "Number"

height = "Number"

[only the src and alt attributes are required, the rest are optional]

image Alignment

Early versions of HTML used the attribute for the alignment of images ( and some other elements).

The align attribute is only included here in case you need to perform changes to legacy html pages.

nb. the align attribute is not supported in HTML5, html strict or xhtml strict.

align = "top" | "middle" | "bottom" |"left" |"right"

Deprecated. This attribute specifies the position of an img with respect to its context.

The following values for align determine the object's position with respect to surrounding text:

• top: means that the top of the object should be vertically aligned with the top of the current text line.
• middle: means that the center of the object should be vertically aligned with the current baseline.
• bottom: means that the bottom of the object should be vertically aligned with the current baseline. This is the default value.

Two other values, left and right, cause the image to float to the current left or right margin.

Use CSS and to apply alignment in html5.

CSS Image Alignment Examples:

top
here is tux <img src="images/www.cronistalascolonias.com.ar" style="vertical-align:top" alt="Tux the penguin" /> the Linux penguin

here is tux the Linux penguin

middle
here is tux <img src="images/www.cronistalascolonias.com.ar" style="vertical-align:middle" alt="Tux the penguin" /> the Linux penguin

here is tux the Linux penguin

bottom
here is tux <img src="images/www.cronistalascolonias.com.ar" style="vertical-align:bottom" alt="Tux the penguin" /> the Linux penguin

here is tux the Linux penguin

left
<img src="images/www.cronistalascolonias.com.ar" style="float:left" alt="Tux the penguin" /> here is tux the Linux penguin.

here is tux the Linux penguin. Any more text is wrapped here to the right of the image.

right
<img src="images/www.cronistalascolonias.com.ar" style="float:right" alt="Tux the penguin" /> here is tux the Linux penguin.

here is tux the Linux penguin. Any more text is wrapped here to the left of the image.

Scaling the image display size

• width = nimage width in pixels

• height = nimage height in pixels.

The width and height attributes are not required but are recommended to help the browser render the page faster. The browser can begin rendering the remainder of the page before waiting for the image to start loading when it would otherwise find the dimensions of the image.

The height and width attributes can also be used to scale an image in the horizontal and vertical dimensions

Single pixel tricks

This works OK, but it would is better to draw graphics without a table using a HTML5 canvas.

Concensus amongst Web Developers is that table elements should not be used as a page layout tool and should only be used for representing tabular data.

Accessibility attributes

• alt="some text" Specifies an alternative string of text to display in place of the image. (for non graphical browsers and when inline images are switched off).
• longdesc="url" This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute.

  The longdesc attribute is not part of HTML5.
  You could use an a element to link to the long description instead.

  <img src="www.cronistalascolonias.com.ar" alt="family photo" width="" height="" /> <a href="www.cronistalascolonias.com.ar">long description</a>

  or

  <a href="www.cronistalascolonias.com.ar"> <img src="www.cronistalascolonias.com.ar" alt="family photo" width="" height="" /> </a>

Client-side image maps

usemap="url" Specifies a link to an area map of the image. The area map is used to identify areas within the image that provide hyper links to anchors within the current document or to other documents.

• The area element defines a region inside an image that the user can select with a mouse click.
• The href attribute is used for a hypertext link.
• If the nohref attribute is specified, the area is an inert "dead zone" which does not respond to a user clicking within the defined region.
• A map element contains one or more area elements.
• In case of overlap of area regions, area elements are examined using the order in which they are listed in the map element. The first area element containing the selected coordinates will be the active element.
• The origin for coordinates is the image top-left hand corner of the image.

area element attributes

Common Image formats

• GIF - Graphics Interchange Format

• jpeg - Joint Photographers Expert Group image format

• PNG - Portable Networks Graphics

GIF

• a bitmap format
• uses compression to reduce file size.
• Created by CompuServe in

1. plain GIF

This is an ordinary graphical image. The image consists of a mosaic of pixels (picture elements) that are coloured from a palette of colours. Each pallete colour is defined as a rgb (red,green,blue) combination and is given a unique number for a particular GIF image. There are different palette entries to choose from and their colour values are determined when the image is created.

3. animated GIF

An animated GIF file contains multiple GIF images and some control information. When the animated gif is displayed each image it contains is displayed consecutively by drawing over the top of the previously displayed image.

This spinning globe was created using the animator Script in the Gimp.

JPEG

PNG

"PNG was designed to be the successor to the once-popular GIF format, which became decidedly less popular right around New Year's Day when Unisys and CompuServe suddenly announced that programs implementing GIF would require royalties, because of Unisys' patent on the LZW compression method used in GIF."

Other formats

TIFF, PCX, BMP, XBM, PS, PDF

These formats generally require the use of a "plugin" helper application to be displayed and should be avoided as a way of including images into a page.

img Attribute Summary

img attributes