Image Tag in HTML

You are currently viewing Image Tag in HTML

The image tag is used to add the image in the web page. A web page may have different types of images used in the image tag. Graphics make websites more attractive and interesting. HTML can be used to add static or animated graphics on websites. The image put into a webpage is called inline images. The most popular types of images used in web pages are .gif, .png and .jpg. <img> tag is used to insert images in web pages. This tag has no ending tag.

Attributes of the Image tag

AttributeDescription
SrcThe image tag specifies the name and path of the image to be displayed. The only name of the images is specified if the image is stored in the same directory in which the web page is stored. Otherwise, the complete path of the image is specified.
Align the image tag specifies the alignment of the image. Possible alignments are as follows:
Left
Right
Center
It also specifies the text alignment with respect to the image. Possible alignments are as follows:
Top:
The text is written at the top next to the image
Bottom:
The text is written at the bottom next to the image
Middle:
The text is written in the middle next to the image
BorderThe image specifies the size of the border around the image. The possible values are 1,2,3 and so on. The default value is 0.
WidthIt specifies the width of the image in pixels or percentages.
HeightIt specifies the height of the image in pixels or percentage
Hspace It specifies the amount of space to the left and right side of the image in pixels
VspaceIt specifies the amount of space to the top and bottom of the image in pixels
AltIt specifies the text to be displayed if the browser cannot display the image

Example



<html>
	<head>
		<title>wuexerice</title>
	</head>
	<body>
		<img src="folder/bike.jpg">
	</body>
</html>

Output

image tag

Read more about image tag:

Different images formats supported by HTML (image tag) are as follows:

Graphic interface format (GIF)

Graphic Interface Format uses a compression technique that preserves all color information for the image. It uses a maximum of 256 colors. The GIF format is best for displaying images like logos, icons, and buttons. A GIF file with few numbers of colors has a smaller file size and allows greater compression. However, the use of the GIF format is limited because of the color depth limitation. It should not be used for photographs and complex graphics.

GIF images are in two different versions. These are GIF 87 and GIF 89a format. GIF 89a in newer and has the following features:

  • Interlacing: interlacing is a capability that enables the browser to display the images as it loads. The image gradually gets clearer until it is loaded completely. Interlaced images are slightly larger in size than non-interlaced images.
  • Transparency: GIF 89a format can be used to set a single color to be transparent.
  • Animated GIFs: GIF 89a images can also be animated. Animated GIF images are actually a number of GIF images saved in a single file.

Joint Photographic Expert Group (JPG, JPEG)

Joint Photographic Expert Group is a good format for images. It can contain millions of colors. It does not provide the option of transparency or interlacing. It allows specifying the degree of compression to create a balance between image quality and file size. It uses a compression technique that discards some colors that may cause a loss of quality of the original image. The higher compression reduces the file size but provides lower image quality.

Limited Support or Non-supported image formats

The following image formats are supported by some computers but not all. These are not recommended to be included in HTML pages. These images can be converted to supported formats by using graphics editors such as Corel Photo-Paint or Adobe Photoshop.

  • Portable Network Graphic (PNG)
  • BMP (Bitmap picture)
  • TIFF (Tagged Image File Format)
  • PCX

Reference

If you want to learn more about HTML or image tag then visit the official website: Visit

Visit the HTML tutorial list. And make strong your HTML concept. Click here. wuschools.com is always written about the HTML concept for the HTML lover. Ang writes about how HTML makes your life easy if you are a web site developer. We help you to continue your learning.

This Post Has 11 Comments

  1. Alexis

    Right here is the perfect blog for anybody who really wants to find out about this topic.
    You know a whole lot its almost tough to argue with you
    (not that I really would want to…HaHa). You definitely put a fresh spin on a subject that’s been written about for
    a long time. Great stuff, just wonderful!

  2. Tamera

    Just wish to say your article is as astonishing.
    The clarity in your post is just nice and that i can assume
    you’re an expert in this subject. Well together with your permission let me to grasp your feed to
    keep up to date with approaching post. Thank you one million and please keep up the gratifying
    work.

    1. Muhammad Waqar

      Thanks

  3. Moises

    Today, while I was at work, my sister stole my
    apple ipad and tested to see if it can survive a thirty foot drop,
    just so she can be a youtube sensation. My iPad is
    now destroyed and she has 83 views. I know this is entirely off topic but I had to
    share it with someone!

  4. Valentina

    This paragraph gives clear idea in support of the new
    people of blogging, that truly how to do running a blog.

  5. Lisa

    Informative article, just what I needed.

  6. Savannah

    I was pretty pleased to find this great site. I need to to thank you for your time for this particularly wonderful read!!
    I definitely loved every bit of it and i also have you book-marked to check out new information on your
    web site.

    1. Muhammad Waqar

      Thank you Savannah

  7. Sam

    Thanks for sharing your thoughts about website. Regards

  8. Izetta

    I am sure this piece of writing has touched all the internet viewers, its really
    really nice paragraph on building up new webpage.

  9. Adriene

    Hello, after reading this amazing article i am also cheerful to share my experience here with mates.

Leave a Reply