- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <img> Tag
HTML <img> tag is used to embed image in to the HTML document. It is an inline and empty element, thus it doesn't begin on a new line and doesn't require a closing tag.
An <img> element must have two attributes src, which fetch the image from that source, and alt, which specifies an alternative text for the picture. The browser inserts an HTML image from the source supplied in the <img> tag instead of directly inserting the picture into the document.
Syntax
<img src="..." alt="...">
Attributes
HTML img tag supports Global and Event attributes of HTML. And some specific attributes as well which is listed bellow.
Attribute | Value | Description |
---|---|---|
alt | text | Specifies alternate text. |
crossorigin | anonymous use-credentials |
It allows images from third-party sites that allow cross-origin access to be reused with canvas. |
height | Pixels | Specifies the height of the image. |
ismap | ismap | Defines the image as a server-side image map. |
loading | eager lazy |
Specifies when an image should load. |
longdesc | URL | Specifies the long description of the attached image. |
referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Specifies which referrer information. |
sizes | sizes | Specify the image sizes for different. |
src | URL | Specify the image URL which will be displayed. |
srcset | URL-list | Specifies a list of image files to use in different situations. |
usemap | #mapname | Defines the image as a client-side image map and used alongwith <map> and <area> tags. |
width | pixels | Sets the width of an image in pixels or in %. |
Examples of HTML img Tag
Bellow examples will illustrate the usage of img tag. Where, when and how to use img tag and how we can manupulate img element using CSS.
Inserting Image using img Tag
Let’s consider the following example, where we are going to upload the image into the HTML page using the <img> tag. It will generate an output consisting of the image uploaded to the webpage
<!DOCTYPE html> <html> <head> <title>HTML Tag</title> </head> <body> <img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="HTML Tutorial" height="150" width="390" /> </body> </html>
Aligning image element using CSS
Considering another scenario where we are going to align the image using CSS along with the <img> tag.
<!DOCTYPE html> <html> <body> <h2>Image vertical-align: middle</h2> <p> Pawan Kalyan <img src= "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB3tcOH6bebY1QFANMOUDhGU0nI3fTaKqP2qEKxBxpRKKBL5Y-51iu&usqp=CAE&s" width="42" height="42" style="vertical-align:middle"> is an Indian actor, politician, filmmaker, and philanthropist. He primarily works in Telugu cinema. He is the recipient of a Filmfare Award, a SIIMA Award, a CineMAA Award and a Santosham Film Award. </p> <h2>Image vertical-align: top</h2> <p> Mahendra Singh Dhoni <img src= "https://upload.wikimedia.org/wikipedia/commons/7/70/Mahendra_Singh_Dhoni_January_2016_%28cropped%29.jpg" width="42" height="42" style="vertical-align:top"> is an former Indian cricketer. He was captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014. </p> </body> </html>
Clickable Image
Following is an example where we are going to place the <image> tag inside the <a> tag, making the image a link.
<!DOCTYPE html> <html> <head> <title>Image tag</title> </head> <body> <h2>TUTORIALSPOINT</h2> <p>Click on the image to direct to webpage.</p> <a href="https://www.tutorialspoint.com/index.htm"> <img src="https://www.tutorialspoint.com/images/logo.png?v2" height="55" width="200"> </a> </body> </html>
Image failed to Load alternative
In the following example, we are going to use the alt attribute and also style the <img> tag using CSS.
<!DOCTYPE html> <html> <body> <div> <img src="https://www.tutorialspoint.com/cg/images/ogo.png" alt="Tutorialspoint_Logo" width="100" height="106"> </div> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
img | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google