HTML Images
Images
JPG Images
GIF Images
PNG Images
Example
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="/images/html/pic_mountain.jpg"
alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>
Try it Yourself
HTML Images Syntax
In HTML, the <img> tag is used to define the images.
The <img> tag is not having any value or kept empty, but it contains attributes only, and closing tab is not present
The src attribute is used to specify the URL (web address) for the image:
Example
<img src="url" alt="some_text"
style="width:width;height:height;">
The alt Attribute
The alt attribute is used to provide an alternate text for an image, if the user cannot view the image for some reason (due to slow connection, an src attribute error, or if screen reader is used by the user).
If the image is not found by the browser, the alt attribute value will be displayed:
Example
<img src="/images/html/wrongname.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
Try it Yourself
The alt attribute is necessary. A web page does not validate correctly without the alt attribute.
HTML Screen Readers
A screen reader is known as a software program which reads the HTML code, does text conversion, and enables content "listening" by user. Screen readers are helpful for differently abled people like blind, visually impaired, or learning disabled.
Image Size - Width and Height
You can utilise the style attribute for specifying the image width and height.
The pixels values are specified(type px after the value):
Example
<img src="/images/html/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself
there is an alternative method to use the width and height attributes. default value specified here is pixels:
Note:The image width and height should be always specified. If image width and height are not mentioned , the flickering of page will happen during image load.
Width and Height, or Style?
All of the width, height, and style attributes are considered valid in HTML5.
But, we are suggesting you to use the style attribute. It does not allow internal or external styles sheets to change the images original size:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5
Icon" width="128" height="128">
</body>
</html>
Try it Yourself
Images in Another Folder
If the image is not specified, the browser is expected to find it in the same folder as the web page.
However, it is a common practice to store all the images in a sub-folder. You must be including the folder name present in the src attribute:
Example
<img src="/images/html/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself
Images on Another Server
Some of the web sites has the habit of storing their images on image servers.
In practice, accessility of the images can be done from any web address in the world:
Animated Images
The GIF format or standard allows us to use animated images:
Example
<img src="/images/html/programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Try it Yourself
You can notice that the inserting animated images syntax is not different from non-animated images.
Using an Image as a Link
For using an image as a link, nesting of the <img> tag inside the <a> tag needs to be done:
wExample
<a href="html_home.php">
<img src="/images/html/smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
Try it Yourself
Note: border:0; is added for preventing IE9 (and earlier) to display a border around the image (if the image is given as a link).
Image Floating
The CSS float property can be used to let the image float to the left or right of a text:
Example
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
Image Maps
Using the <map> tag for defining an image-map. An image-map is known as an image which is having clickable areas.
The name attribute of the <map> tag is related with the <img>'s usemap attribute.It can create a relationship between the map and the images.
The <map> tag has a number of <area> tags, which is used to define the clickable areas of the image-map:
Example
<img src="/images/html/planets.gif" alt="Planets" usemap="#planetmap"
style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126"
alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3"
alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8"
alt="Venus" href="venus.htm">
</map>
Chapter Summary
- The HTML <img> element is used to define an image
- The HTML src attribute is used to define the URL of the image
- The HTML alt attribute is used to define an image's alternate text , incase it cannot be displayed
- The HTML width and height attributes are used to define the image size
- Use the CSS width and height properties for defining the image size (alternatively)
- The CSS float property is used for letting the image float
- The HTML <map> element is used for defining an image-map
- Use the HTML <area> element is used for defining the clickable areas of the image-map
- The HTML <img>'s element usemap attribute is used for pointing to an image-map
Note: Loading of images always takes time. Large images loading can lead to slow down of your page. Use of images should be done carefully.
HTML Image Tags