HTML Images

Insert Image in Web page

HTML allows you to insert an image in a Web page with the help of the IMG tag. This tag uses several attributes, such as src, id, lang, dir, and alt.

Note - Out of all the attributes of the IMG tag, only the src attribute is necessary.

The src attribute provides the information about the path of the image file to the Web browser. If your image and HTML files are stored in the same folder, then there is no need to specify the full path of the image file in the src attribute.

If your image and HTML files are in different folders, you have to specify the full path of the image file in the src attribute of the IMG tag

Syntax to Insert Image in a Web page

Here is the syntax to insert an image in a Web page:

<img src="url" alt="some_text">

Attributes of the IMG tag

The following table describes the attributes of the IMG tag :

Attribute	Description
id	Assigns a unique identifier to a tag. This identifier must be used only once in a document. This attribute is optional
class	Assigns a single name or a set of `class` names to a tag. However, one or more tags can be assigned with a same `class` name. This attribute is optional
lang	Specifies the base language used for the IMG tag. This attribute is optional
dir	Assigns a direction to entire or a section of HTML file. This attribute is optional
title	Describes the objective of the use of the IMG tag. This attribute is optional
style	Applies inline CSS style on individual tags in an HTML file. This attribute is optional
src	Specifies the URL or the location of the image. This attribute is mandatory
alt	Specifies the alternate text to be used, if the Web browser cannot render the image. This attribute is optional
height	Specifies the height of the image. This attribute is optional
width	Specifies the width of the image. This attribute is optional
ismap	Indicates that the image is used as an image map. This attribute is optional
usemap	Associates a tag with an image map. This attribute is optional

HTML alt Attribute

The alt attribute specifies an alternate text for the image, if it cannot be displayed

The value of the alt attribute should describe the image in words:

<img src="html5.jpg" alt="The official HTML5 Icon">

Note : The alt attribute is required. A web page will not validate correctly without it

Note : Always specify the width and height of an image. If width and height are not specified, the page will flicker while the image loads

HTML Screen Readers

Screen readers are software programs that can read what is displayed on a screen

Used on the web, screen readers can "reproduce" HTML as text-to-speech, sound icons, or braille output

Screen readers are used by people who are blind, visually impaired, or learning disabled

Note : Screen readers can read the alt attribute

HTML Image Size - Width and Height

Use the style attribute to specify the width and height of an image

The values are specified in pixels (use px after the value). Here is an example demonstrates how to set width and height of an image in a web page:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Image Example</title>
</head>
<body>

<img src="html5.jpg" alt="HTML5 Official Icon" style="width:128px;height:128px">

</body>
</html>

Here is the sample output produced by the above HTML image example code shows how to set width and height of an image:

Here is the live demo output produced by the above HTML image example program:

Alternatively, you can use width and height attributes. The values are specified in pixels (without px after the value). Here is an example:

<img src="html5.jpg" alt="HTML5 Official Icon" width="128" height="128">

It will produce the same result as above.

Both the width, the height, and the style attributes, are valid in the latest HTML5 standard.

We suggest you to use the style attribute. It prevents style sheets from changing the default size of images. Here is an example.

<!DOCTYPE html>
<html>
<head>
	<title>HTML Image Example</title>
	<style>
		img
		{ 
			width:100%; 
		}
	</style>
</head>
<body>

<img src="html5.jpg" alt="HTML5 Official Icon" width="128" height="128">

</body>
</html>

Here is the sample output produced by the above HTML image example code:

HTML Image Floating

Here is an example shows how to float an image at the right side in a web page in HTML:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Image Example - Image Float</title>
</head>
<body>

<img src="html5.jpg" alt="HTML5 Official Icon" style="width:128px;height:128px;float:right;">

</body>
</html>

Here is the sample output of the above HTML image floating example code:

HTML Image Formats

You can use different types of image formats in Web pages. Some of the commonly used image formats are:

GIF - used to create illustrations, such as logos or cartoons
JPEG - used to generate complex images, such as photographs
PNG - used with the images that have more number of colors

GIF and JPEG are supported by all the Web browser whereas, PNG is supported by some of the Web browsers.

The GIF Image Format

The GIF image format was developed for CompuServe (an online information service) before the Internet was invented. Converting an image to an GIF format is safe, as no data is lost at all time of conversion. There are the following two types of GIF images:

GIF87 - Does not support the image transparency and animation
GIF89a - Supports image transparency and animation

Both types of GIF images support 256 colors and have the .gif file extension

The JPEG Image Format

In comparison to GIF, JPEG supports unlimited number of colors and has the .jpeg or .jpg extension. JPEG uses a complex compression algorithm, known as the JPEG algorithm.

You can convert any image format into the JPEG image format by using the JPEG algorithm. This algorithm focuses on various important aspects, such as brightness and contrast of the image.

The JPEG image format has certain standards that specify codecs, which define the process to compress an image into bytes and again decompress the bytes into the image. Exchangeable Image File Format (EXIF) and Joint Photographic Experts Group (JFIF) are the most commonly used standards of JPEG.

The PNG Image Format

The PNG image format has all the features of GIF. PNG uses a lossless compression algorithm and supports and unlimited number of colors. The lossless compression algorithm prevents any loss that occurs while compressing an image.

PNG provides alpha transparency, which allows you to have variable levels of opacity as compared to GIF. In the true alpha transparency, each pixel of the image can be stored with an alpha value that indicates the amount of transparency of the pixel. The alpha value can be adjusted to make a PNG image completely transparent or completely opaque.

HTML Image Example

Here is a simple example of inserting an image on a web page:

<!DOCTYPE html>
<html>
<body>

<img src="imagecol.jpg" alt="image color" width="142" height="142">

</body>
</html>

Here is the sample output of the above HTML image example code:

HTML Online Test

« Previous Tutorial Next Tutorial »