Copyright © tutorialspoint.com

HTML Images

previous next


Advertisements

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.

A Simple Example:

<img src="http://www.tutorialspoint.com/images/html.gif" alt="HTML Tutorial" />

This will produce following result:

HTML Tutorial

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:

HTML Tutorial

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!

HTML TutorialThe 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!

HTML TutorialThe 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).

For more Web Graphics including patterns you can look into Free Web Graphics


previous next

Copyright © tutorialspoint.com