- HTML Basics
- HTML Home
- HTML Basics
- HTML Document Structure
- HTML Data Types
- HTML Attributes
- HTML Fonts
- HTML Headings
- HTML Character Entities
- HTML Horizontal Line
- HTML Line Break
- HTML Paragraph
- HTML Citation Definition
- HTML Quotations
- HTML Comments
- HTML Styles
- HTML Formatting
- HTML CSS
- HTML Tags
- HTML Basic Tags
- HTML All Tags
- HTML Root Tags
- HTML Metadata Tags
- HTML Section Tags
- HTML Head Heading Tags
- HTML Flow Tags
- HTML Phrasing Tags
- HTML Embedded Tags
- HTML Interactive Tags
- HTML Meta Tags
- HTML Texts
- HTML Text Formatting
- HTML Physical Style Text
- HTML Logical Style Text
- HTML Organizing Text
- HTML Arranging Text
- HTML Displaying Lists
- HTML List
- HTML Links Tables
- HTML Links URLs
- HTML Links
- HTML URL Encode
- HTML Tables
- HTML Images Colors
- HTML Images Colors
- HTML Images
- HTML Color Codes
- HTML Canvas
- HTML Backgrounds
- HTML Forms
- HTML Forms
- HTML Form Tag
- HTML Input Tag
- HTML Button Tag
- HTML Multiple-Choice
- HTML Select Tag
- HTML Option Tag
- HTML Optgroup Tag
- HTML Textarea Label
- HTML Fieldset Legend
- HTML Datalist Tag
- HTML Keygen Tag
- HTML Output Tag
- HTML Progress Tag
- HTML Meter Tag
- HTML Submit Form
- HTML enctype Attribute
- HTML action Attribute
- HTML Method Attribute
- HTML Get Method
- HTML Post Method
- HTML Interactive
- HTML Interactive Web
- HTML Details Summary
- HTML Menu Tag
- HTML Command Tag
- HTML KBD Tag
- HTML Time Tag
- HTML Multimedia
- HTML Multimedia
- HTML Multimedia Tags
- HTML Audio Video
- HTML Embedded Multimedia
- HTML EMBED Tag
- HTML OBJECT Tag
- HTML FIGURE FIGCAPTION
- HTML Advance
- HTML Blocks
- HTML Classes
- HTML Iframes
- HTML JavaScript
- HTML Layouts
- HTML Responsive
- HTML Test
- HTML Online Test
- Give Online Test
- All Test List
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:

« Previous Tutorial Next Tutorial »