Images are very important to beautify as well as to depicts many concepts on your web page. Its is true that one single image is worth than thuasands of words. So as a Web Developer you should have clear understanding on how to use images in your web pages.
Insert Image - The <img> Element:
You will insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.
<img src="image URL" attr_name="attr_value"...more attributes /> |
Image Attributes:
Following are most frequently used attributes for <img> tag.
- width: sets width of the image. This will have a value like 10 or 20%etc.
- height: sets height of the image. This will have a value like 10 or 20% etc.
- border: sets a border around the image. This will have a value like 1 or 2 etc.
- src: specifies URL of the image file.
- alt: this is an alternate text which will be displayed if image is missing.
- align: this sets horizontal alignment of the image and takes value either left, right orcenter.
- valign: this sets vertical alignment of the image and takes value either top, bottom orcenter.
- hspace: horizontal space around the image. This will have a value like 10 or 20%etc.
- vspace: vertical space around the image. This will have a value like 10 or 20%etc.
- name: name of the image with in the document.
- id: id of the image with in the document.
- style: this will be used if you are using CSS.
- title: specifies a text title. The browser, perhaps flashing the title when the mouse passes over the link.
- ismap and usemap: These attributes for the <img> tag tell the browser that the image is a special mouse-selectable visual map of one or more hyperlinks, commonly known as an image map. We will see how to use these attributes in Image Links chapter.
A Simple Example:
| <img src="http://www.tutorialspoint.com/images/html.gif" alt="HTML Tutorial" /> |
This will produce following result:
 |
Image Attributes - width, height, title, border and align:
Now let us try to set some more attributes:
| <img src="http://www.tutorialspoint.com/images/html.gif" alt="HTML Tutorial" width="100" height="100" border="2" align="right" title="HTML Tutorial" /> |
This will produce following result:
|
Remember that all the images will have a border by default. In our examples its not showing because our global style sheet has set img {border:0px;} which means that no border will be displayed till it is mentioned explicitly.
You can remove an image border by setting border="0" or through CSS by setting img {border:0px;}.
To Become more comfortable with other image attributes - Do Online Practice
Wrapping text around images:
Example 1:
| <p>This is the first paragraph that appears above the paragraph with the image!</p> <p><img src="http://www.tutorialspoint.com/images/html.gif" width="75" height="75" alt="HTML Tutorial" align="right"> The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph.</p> <p>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 browser then renders subsequent document content in the remaining portion of the flow adjacent to the image. The net result is that the document content following the image gets wrapped around the image. </p> |
This will produce following result:
This is the first paragraph that appears above the paragraph with the image!
The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph.
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 browser then renders subsequent document content in the remaining portion of the flow adjacent to the image. The net result is that the document content following the image gets wrapped around the image.
|
Example 2:
You can use vspace or hspace attributes if you want to keep some distance between text and image. Let us revise above example:
| <p>This is the first paragraph that appears above the paragraph with the image!</p> <p><img src="http://www.tutorialspoint.com/images/html.gif" vspace="10" hspace="15" width="75" height="75" alt="HTML Tutorial" align="right"> The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph.</p> <p>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 browser then renders subsequent document content in the remaining portion of the flow adjacent to the image. The net result is that the document content following the image gets wrapped around the image. </p> |
This will produce following result:
This is the first paragraph that appears above the paragraph with the image!
The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph.
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 browser then renders subsequent document content in the remaining portion of the flow adjacent to the image. The net result is that the document content following the image gets wrapped around the image.
|
For a complete list of image attributes please check reference to HTML Image Tag.
Which image format is suitable for you ?
The images in Graphics Interchange Format - GIF format are best used for banners, clip art, and buttons. The main reason for this is that gifs can have a transparent background which is priceless when it comes to web design. On the down side, gifs are usually larger files, not as compressed as a jpeg, which calls for slow load times and large transfer rates. Gifs are also limited to the 256 color scheme.
Ths images in Joint Photographic Experts Group - JPEG format have an unlimited color wheel, and have a high compression rate downsizing your load times and saving hard drive space. JPEGs don't allow for transparent backgrounds, but their size/quality ratio is outstanding. Its best to use JPEG format for photo galleries, or artwork to allow the viewer to catch that extra bit of detail. Avoid Jpegs for graphical design, stick to using them for thumbnails and backgrounds.
The images in Portable Network Graphics - PNG format is an extensible file format for the lossless, portable, well-compressed storage of raster images. PNG provides a patent-free replacement for GIF and can also replace many common uses of TIFF. Indexed-color, grayscale, and truecolor images are supported, plus an optional alpha channel. Sample depths range from 1 to 16 bits. PNG also compresses better than GIF in almost every case (5% to 25% in typical cases).