5.2Inserting Images in Your Documents:
One of the most compelling features of HTML and XHTML is their ability to include images with your document text, either as an intrinsic components of the document (online images), as separate documents specially selected for download via hyperlinks, or as a background for your document. and it have to types of formats GIF & JPEG .
5.2.1 Image Formats:
The Graphics Interchange Format (GIF) was first developed for image transfer among users of the CompuServe online service. Its encoding is cross-platform.The second main feature is that GIF uses special compression technology that can significantly reduce the size of the image file for faster transfer over a network.Also, GIF images can be easily animated.
The Joint Photographic Experts Group ( JPEG) is a standards body that developed what is now known as the JPEG image-encoding format. Like GIFs, JPEG images are platform-independent and specially compressed for high-speed transfer via digital communication technologies. Unlike GIF, JPEG supports tens of thousands of colors for more detailed, photorealistic digital images. And JPEG uses special algorithms that yield much higher data-compression ratios.
5.2.2 Speeding Image Downloads:
- Keep it simple
- A full-screen, 24-bit color graphic, even when reduced in size by digital compression with one of the standard formats, such as GIF or JPEG, is still going to be a network-bandwidth hog.
- Reuse images
- This is particularly true for icons and GIF animations. Most browsers cache incoming document components in local storage for the very purpose of quick, network-connectionless retrieval of data.
- Divide up large documents
- This is a general rule that includes images. Many small document segments, organized through hyperlinks (of course!) and effective tables of contents, tend to be better accepted by users than a few large documents.
- Isolate necessarily large graphics
- Provide a special link to large images, perhaps one that includes a thumbnail of the graphic, thereby letting readers decide if and when they want to spend the time downloading the full image.
- Specify image dimensions
- Finally, another way to improve performance is by including the image's rectangular height and width information in its tag.
lets you reference and insert a graphic image into the current text flow of your document.
- Inserts an image into a document
- align, alt, border, class, controls (), dir, dynsrc (), height, hspace, id, ismap, lang, longdesc, loop (), lowsrc (), name (), onAbort, onClick, onDblClick, onError, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, src, start (), style, title, usemap, vspace, width
- End tag
- None in HTML; </img> or <img ... /> in XHTML
- Used in
126.96.36.199 the src attribute
The src attribute for the <img> tag is required.Its value is the image file's URL.Example
188.8.131.52 The alt and longdesc attributes
The alt attribute specifies alternative text the browser may show if image display is not possible or is disabled by the user. It's an option, but one we highly recommend you exercise for most images in your document.
The value for the alt attribute is a text string of up to 1,024 characters, including spaces and punctuation. The string must be enclosed in quotation marks.
The longdesc attribute is similar to the alt attribute but allows for longer descriptions. The value of longdesc is the URL of a document containing a description of the image. If you have a description longer than 1,024 characters, use the longdesc attribute to link to it.Example
184.108.40.206 The align attribute
The standards don't define a default alignment for images with respect to other text and images in the same line of text: you can't always predict how the text and images will look.Example
220.127.116.11 Wrapping text around images
The left and right image-alignment values tell the browser to place an image against the left or right margin, respectively, of the current text flow.The net result is that the document content following the image gets wrapped around the image.
You can place images against both margins simultaneously,and the text will run down the middle of the page between them:Example
The following source fragment achieves that staggered image effect:Example
18.104.22.168 Centering an image
You can horizontally center an inline image in the browser window, but only if it's isolated from surrounding content, such as by paragraph, division, or line-break tags. Then, either use the <center> tag or use the align=center attribute or center-justified style in the paragraph or division tag to center the image.Example
Use the paragraph tag with its align=center attribute if you want some extra space above and below the centered image:Example
22.214.171.124 The border attribute
Browsers normally render images that also are hyperlinks (i.e., images included in an tag) with a 2-pixel-wide colored border, indicating to the reader that the image can be selected to visit the associated document. Use the border attribute and a pixel-width thickness value to remove (border=0) or widen that image border.Example
126.96.36.199 The height and width attributes
A more efficient way for authors to specify an image's dimensions is with the height and width <img> attributes. That way, the browser can reserve space before actually downloading an image, speeding document rendering and eliminating the content shifting. Both attributes require an integer value that indicates the image size in pixels; the order in which they appear in the <img> tag is not important.
188.8.131.52 Resizing and flood-filling images
Another trick with height and width provides an easy way to flood-fill areas of your page and can also improve document performance. Suppose you want to insert a colored bar across your document. Rather than creating an image to fill the full dimensions, create one that is just 1 pixel high and wide and set it to the desired color. Then use the height and width attributes to scale it to the larger size:
<img src="pics/one-pixel.gif" width=640 height=20>
also,we can use:
<img src="pics/one-pixel.gif" width="100%" height=20>
184.108.40.206 Problems with height and width
Although the height and width attributes for the <img> tag can improve performance and let you perform neat tricks, there is a knotty down side to using them. The browser sets aside the specified rectangle of space to the prescribed dimensions in the display window, even if the user has turned off automatic download of images.
220.127.116.11 The hspace and vspace attributes
The hspace and vspace attributes can give your images breathing room. With hspace, you specify the number of pixels of extra space to leave between the image and text on the left and right sides of the image; the vspace value is the number of pixels on the top and bottom:Example
18.104.22.168 The ismap and usemap attributes
The ismap and usemap attributes for the <img> tag tell the browser that the image is a special mouse-selectable visual map of one or more hyperlinks.
The browser automatically sends the x,y position of the mouse (relative to the upper-left corner of the image) to the server when the user clicks somewhere on the ismap image. Special server software (the /cgi-bin/images/map2 program, in this example) may then use those coordinates to determine a response.
The usemap attribute provides a client-side image-map mechanism that effectively eliminates server-side processing of the mouse coordinates and its incumbent network delays and problems. Using special <map> and <area> tags, HTML authors provide a map of coordinates for the hyperlink-sensitive regions in the usemap image, along with related hyperlink URLs. The value of the usemap attribute is a URL that points to that special <map> section.Example