html image assignment

HTML Images

In this tutorial you will learn how to include images in an HTML document.

Inserting Images into Web Pages

Images enhance visual appearance of the web pages by making them more interesting and colorful.

The <img> tag is used to insert images in the HTML documents. It is an empty element and contains attributes only. The syntax of the <img> tag can be given with:

The following example inserts three images on the web page:

Each image must carry at least two attributes: the src attribute, and an alt attribute.

The src attribute tells the browser where to find the image. Its value is the URL of the image file.

Whereas, the alt attribute provides an alternative text for the image, if it is unavailable or cannot be displayed for some reason. Its value should be a meaningful substitute for the image.

Note: Like <br> , the <img> element is also an empty element , and does not have a closing tag. However, in XHTML it closes itself ending with " /> ".

Tip: The required alt attribute provides alternative text description for an image if a user for some reason cannot able to view it because of slow connection, image is not available at the specified URL, or if the user uses a screen reader or non-graphical browser.

Setting the Width and Height of an Image

The width and height attributes are used to specify the width and height of an image.

The values of these attributes are interpreted in pixels by default.

You can also use the style attribute to specify width and height for the images. It prevents style sheets from changing the image size accidently, since inline style has the highest priority.

Note: It's a good practice to specify both the width and height attributes for an image, so that browser can allocate that much of space for the image before it is downloaded. Otherwise, image loading may cause distortion or flicker in your website layout.

Using the HTML5 Picture Element

Sometimes, scaling an image up or down to fit different devices (or screen sizes) doesn't work as expected. Also, reducing the image dimension using the width and height attribute or property doesn't reduce the original file size. To address these problems HTML5 has introduced the <picture> tag that allows you to define multiple versions of an image to target different types of devices.

The <picture> element contains zero or more <source> elements, each referring to different image source, and one <img> element at the end. Also each <source> element has the media attribute which specifies a media condition (similar to the media query) that is used by the browser to determine when a particular source should be used. Let's try out an example:

Note: The browser will evaluate each child <source> element and choose the best match among them; if no matches are found, the URL of the <img> element's src attribute is used. Also, the <img> tag must be specified as the last child of the <picture> element.

Working with Image Maps

An image map allows you to define hotspots on an image that acts just like a hyperlink .

The basic idea behind creating image map is to provide an easy way of linking various parts of an image without dividing it into separate image files. For example, a map of the world may have each country hyperlinked to further information about that country.

Let's try out a simple example to understand how it actually works:

The name attribute of the <map> tag is used to reference the map from the <img> tag using its usemap attribute. The <area> tag is used inside the <map> element to define the clickable areas on an image. You can define any number of clickable areas within an image.

Note: The image map should not be used for website navigation. They are not search engine friendly. A valid use of an image map is with a geographical map.

Tip: There are many online tools available for creating image maps. Some advanced editors like Adobe Dreamweaver also provides a set of tools for easily creating image maps.

Is this website helpful to you? Please give us a like , or share your feedback to help us improve . Connect with us on Facebook and Twitter for the latest updates.

Interactive Tools

• HTML Images

You can insert HTML images in a web page.

Images plays an important part to make a web page attractive and beautiful. You can add multiple images with variety of sizes in HTML page. Some of the mostly used image formats and extensions are: .jpg, .png, .jpeg & .gif.

Till now, we have used text along with different formatting options. Now we will see how to add images, graphics and even icons on our web page.

How to Insert HTML Images:

Images can be inserted with the  <img>  tag in HTML.

The source (src) attribute specifies the image URL (address). The  <img>  tag is an empty tag, so it does not have any closing tag. However you can optionally close it like this:  <img />

Example to simply include “photo.jpg”:   <img src="photo.jpg">

Example using Relative Image URL: Relative URL specify path that is relative to current folder/page. When you have have image in the same or nearby folder, you need not to specify full domain or path of the image. You can only specify image name in source, if image exists in the same folder.

If image is in any sub-folder, you can mention folder name with slash “/” and then image name. Suppose image “myphoto.jpg” is available in “pictures” folder, We can include it as given in following example:

Example using Absolute Image URL: Absolute URL refers to the full Image URL/Path for the image location. You can include images from external website using absolute URL in source. See example below:

Image Alternate Text Attribute

The alt attribute is used to specify an alternate text for an image. This text will be displayed if image not found at given location. You can test it by using wrong image URL in source. Use example below:

Image Title Attribute

The title attribute is used to specify the title of an image. This title is visible when you point your mouse over any image. Use example below:

You can change image name as per your image.

Image Size (Width & Height Attribute)

Width and Height attributes are available to specify the image width and height. The values for Height and Width attributes are specified in pixels (px) by default.

Image Border Attribute

You can set border around the image using “border” attribute. By default border thickness will be measured in pixels (px) and images will have 0 or no border if not specified.

Image Alignment Attribute

You can align image horizontally using “align” attribute of “img” tag. Images are aligned left be default. To test image alignment in better way, you can add some text or paragraph as well.

Commonly used align properties given below:

• Set Image Alignment Left:  align="left"
• Set Image Alignment Right:  align="right “
• Set Image Alignment Center:  align="center"

Complete Example using all Image Attributes

You can use multiple images in any webpage. Different attributes can be used together for any image as well. Use following example to test various image properties. Please change Image name & URL as per your image.

Share this post:

• Previous Page
• HTML Tutorial Index
• HTML Introduction
• HTML Page Structure
• HTML Elements and Tags
• HTML Attributes
• HTML Headings
• HTML Paragraphs
• HTML Styles
• HTML Formatting
• HTML Comments
• HTML Iframes
• HTML Tables
• HTML Frames

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

HTMLImageElement

The HTMLImageElement interface represents an HTML <img> element, providing the properties and methods used to manipulate image elements.

Constructor

The Image() constructor creates and returns a new HTMLImageElement object representing an HTML <img> element which is not attached to any DOM tree. It accepts optional width and height parameters. When called without parameters, new Image() is equivalent to calling document.createElement('img') .

Instance properties

Inherits properties from its parent, HTMLElement .

A string that reflects the alt HTML attribute, thus indicating the alternate fallback content to be displayed if the image has not been loaded.

Returns a boolean value that is true if the browser has finished fetching the image, whether successful or not. That means this value is also true if the image has no src value indicating an image to load.

A string specifying the CORS setting for this image element. See CORS settings attributes for further details. This may be null if CORS is not used.

Returns a string representing the URL from which the currently displayed image was loaded. This may change as the image is adjusted due to changing conditions, as directed by any media queries which are in place.

An optional string representing a hint given to the browser on how it should decode the image. If this value is provided, it must be one of the possible permitted values: sync to decode the image synchronously, async to decode it asynchronously, or auto to indicate no preference (which is the default). Read the decoding page for details on the implications of this property's values.

An optional string representing a hint given to the browser on how it should prioritize fetching of the image relative to other images. If this value is provided, it must be one of the possible permitted values: high to fetch at a high priority, low to fetch at a low priority, or auto to indicate no preference (which is the default).

An integer value that reflects the height HTML attribute, indicating the rendered height of the image in CSS pixels.

A boolean value that reflects the ismap HTML attribute, indicating that the image is part of a server-side image map. This is different from a client-side image map, specified using an <img> element and a corresponding <map> which contains <area> elements indicating the clickable areas in the image. The image must be contained within an <a> element; see the ismap page for details.

A string providing a hint to the browser used to optimize loading the document by determining whether to load the image immediately ( eager ) or on an as-needed basis ( lazy ).

Returns an integer value representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows 0 . This is the height the image would be if it were rendered at its natural full size.

An integer value representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show 0 . This is the width the image would be if it were rendered at its natural full size.

A string that reflects the referrerpolicy HTML attribute, which tells the user agent how to decide which referrer to use in order to fetch the image. Read this article for details on the possible values of this string.

A string reflecting the sizes HTML attribute. This string specifies a list of comma-separated conditional sizes for the image; that is, for a given viewport size, a particular image size is to be used. Read the documentation on the sizes page for details on the format of this string.

A string that reflects the src HTML attribute, which contains the full URL of the image including base URI. You can load a different image into the element by changing the URL in the src attribute.

A string reflecting the srcset HTML attribute. This specifies a list of candidate images, separated by commas ( ',', U+002C COMMA ). Each candidate image is a URL followed by a space, followed by a specially-formatted string indicating the size of the image. The size may be specified either the width or a size multiple. Read the srcset page for specifics on the format of the size substring.

A string reflecting the usemap HTML attribute, containing the page-local URL of the <map> element describing the image map to use. The page-local URL is a pound (hash) symbol ( # ) followed by the ID of the <map> element, such as #my-map-element . The <map> in turn contains <area> elements indicating the clickable areas in the image.

An integer value that reflects the width HTML attribute, indicating the rendered width of the image in CSS pixels.

An integer indicating the horizontal offset of the left border edge of the image's CSS layout box relative to the origin of the <html> element's containing block.

The integer vertical offset of the top border edge of the image's CSS layout box relative to the origin of the <html> element's containing block.

Obsolete properties

A string indicating the alignment of the image with respect to the surrounding context. The possible values are "left" , "right" , "justify" , and "center" . This is obsolete; you should instead use CSS (such as text-align , which works with images despite its name) to specify the alignment.

A string which defines the width of the border surrounding the image. This is deprecated; use the CSS border property instead.

An integer value which specifies the amount of space (in pixels) to leave empty on the left and right sides of the image.

A string specifying the URL at which a long description of the image's contents may be found. This is used to turn the image into a hyperlink automatically. Modern HTML should instead place an <img> inside an <a> element defining the hyperlink.

A string representing the name of the element.

An integer value specifying the amount of empty space, in pixels, to leave above and below the image.

Instance methods

Inherits methods from its parent, HTMLElement .

Returns a Promise that resolves when the image is decoded and it's safe to append the image to the DOM. This prevents rendering of the next frame from having to pause to decode the image, as would happen if an undecoded image were added to the DOM.

If an error occurs while trying to load or render the image, and an onerror event handler has been configured to handle the error event, that event handler will get called. This can happen in a number of situations, including:

• The src attribute is empty or null .
• The specified src URL is the same as the URL of the page the user is currently on.
• The specified image is corrupted in some way that prevents it from being loaded.
• The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes.
• The specified image is in a format not supported by the user agent .

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• The HTML element implementing this interface: <img>

• HTML Tutorial
• HTML Exercises
• HTML Attributes
• Global Attributes
• Event Attributes
• HTML Interview Questions
• DOM Audio/Video
• HTML Examples
• Color Picker
• A to Z Guide
• HTML Formatter
• HTML Introduction
• HTML Editors
• HTML Basics
• HTML Comments
• HTML Elements
• HTML Headings
• HTML Paragraphs
• HTML Text Formatting
• HTML Quotations
• HTML Colors
• HTML Links Hyperlinks

HTML Images

• HTML Favicon
• HTML Tables
• HTML Ordered Lists
• HTML Unordered Lists
• HTML Description Lists
• HTML Block and Inline Elements
• HTML Iframes
• HTML File Paths
• HTML Layout
• HTML Computer Code Elements
• HTML5 Semantics
• HTML Entities
• HTML Symbols
• HTML Emojis
• HTML Charsets
• HTML URL Encoding
• HTML Responsive Web Design

HTML Graphics

• SVG Tutorial

HTML Tutorial References

• HTML Tags - A to Z List
• HTML Attributes Complete Reference
• HTML Global Attributes
• HTML5 Complete Reference
• HTML5 MathML Complete Reference
• HTML DOM Complete Reference
• HTML DOM Audio/Video Complete Reference
• SVG Element Complete Reference
• SVG Attribute Complete Reference
• SVG Property Complete Reference
• HTML Canvas Complete Reference

In this article, we will know the HTML Image , how to add the image in HTML, along with knowing its implementation & usage through the examples. In earlier times, the web pages only contains textual contents, which made them appear quite boring and uninteresting. Fortunately, it wasn’t long enough that the ability to embed images on web pages was added for users. In this article, we will know how to add images to the web page that will make the website attractive & various methods to insert the images.

There are 2 ways to insert the images into a webpage:

• By providing a full path or address (URL) to access an internet file.
• By providing the file path relative to the location of the current web page file.

We will first discuss inserting the image to the webpage & simultaneously, we will understand both the above approaches.

Adding images on a webpage: The <img> tag is used to add or embed the images to a webpage/website. The “img” tag is an empty tag, which means it can contain only a list of attributes and it has no closing tag. The addition of the images improves the quality along with enhancing the design structure, appearance of the webpage. Nowadays, a website does not directly add images to a web page, as the images are linked to web pages by using the <img> tag which holds space for the image. 

Attribute: The <img> tag has following attributes:

• src : It is used to specify the path to the image.
• alt : It is used to specify an alternate text for the image. It is useful as it informs the user about what the image means and also due to any network issue if the image cannot be displayed then this alternate text will be displayed.
• crossorigin : It is used to import images from third-party sites that allow cross-origin access to be used with canvas.
• height : It is used to specify the height of the image.
• width : It is used to specify the width of the image.
• ismap : It is used to specify an image as a server-side image map.
• loading : It is used to specify whether a browser should defer the loading of images until some conditions are met or load an image immediately.
• longdesc : It is used to specify a URL to a detailed description of an image.
• referrerpolicy : It is used to specify which referrer information to use when fetching an image i.e. no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url.
• sizes : It is used to specify image sizes for different page layouts.
• srcset : It is used to specify a list of image files to use in different situations.
• usemap : It is used to specify an image as a client-side image map.

src:  The src stands for source. Every image has an src attribute which tells the browser where to find the image you want to display. The URL of the image provided points to the location where the image is stored. When the webpage loads for the first time, then the browser gets the image from a web server and inserts it into the page. If the image is not spotted by the browser then users will get a broken link icon. It might be possible if the file path is wrong or the image got deleted from that location.

Example 1: This simple example illustrates the use of the <img> tag in HTML that is used to embed the image into the webpage.

Adding GFG logo using tag

Example 2: The example illustrates the use of the src attribute in the <img> tag.

Use of src attribute

alt: If the image cannot be displayed then the alt attribute acts as an alternative description for the image. The value of the alt attribute is a user-defined text. It generally happens when the user, for some reason, cannot view it due to a slow internet connection or an error in the src attribute, or if the user uses a screen reader.

Example 3: The example illustrates the use of the alt attribute in the <img> tag.

Adding image name in the alt attribute

Setting width and height of Image: The width and height attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default. The width and height attributes are always declared in pixels. Please refer to the How to set the width and height of an image using HTML? article for further details.

Example 4: The example illustrates the use of the width & height attribute in the <img> tag.

Setting the width & height of the image

Adding titles to Image: Along with the images, titles can also be added to images to provide further information related to the inserted image. For inserting a title, the title attribute is used. Please refer to the HTML | title Attribute article for further details.

Example 5: The example illustrates the use of the title attribute in the <img> tag.

Adding the title to the image

Setting style to the Image: In this example, we are using the border property to decorate the image. By default, every picture has a border around it. By using the border attribute, the thickness of the border can be changed. A thickness of “0” means that there will be no border around the picture. Please refer to the HTML | <img> border Attribute for further details.

Example 6: This example illustrates the use of style property inside the <img> tag in HTML.

Setting the border of the image

Aligning an Image:   By default, an image is aligned on the left side of the page, but it can be aligned to the centre or right using the align attribute. Please refer to the HTML | <img> align Attribute for further details.

Example 7: This example illustrates the use of align property in the <img> tag whose value is set to right.

Aligning the image to the right

Adding Image as a Link: An image can work as a link with a URL embedded in it. It can be done by using the “img” tag inside an “a” tag. We need to specify the file path in order to render the image on the webpage. File paths are used to link external resources such as images, videos, style sheets, JavaScript, displaying other web pages, etc. To insert a file on a web page its source must be known.

File paths are of two types:

• Absolute File Paths : It always contains the root element along with the complete directory list required to locate the file.
• Relative File Paths: It is the hierarchical path representation that locates the file or folder on a file system beginning from the current directory.

Example 8: This example illustrates the use of link property in the <img> tag. Here, we have used the absolute path link in order to provide the link to the image. Please refer to the HTML | File Paths & How to turn an Image into a Link in HTML? article for further details.

Output:  

Adding the image as a link

Adding animated Image: Animated images in .gif format can also be added using the “img” tag.

Example 9: This example explains the addition of an image in the GIF format in HTML.

Adding an image in GIF format

Using Image as a Background: An image can be used as a background for a webpage. For this, we use the background-image property of CSS. Please refer to the HTML | <body> background Attribute for further details.

Example 10: This example illustrates the use of body background property in the <img> tag.

Adding the image as a background

Common Image Format: Here is the commonly used image file format that is supported by all the browsers.

Supported Browsers:

• Google Chrome 93.0
• Internet Explorer 11.0
• Microsoft Edge 93.0
• Firefox 92.0
• Safari 14.1

Please Login to comment...

• HTML-Questions
• Technical Scripter
• Web Technologies
• How to Delete Whatsapp Business Account?
• Discord vs Zoom: Select The Efficienct One for Virtual Meetings?
• Otter AI vs Dragon Speech Recognition: Which is the best AI Transcription Tool?
• Google Messages To Let You Send Multiple Photos
• 30 OOPs Interview Questions and Answers (2024)

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

• HTML Lab Assignments

HTML Assignment and HTML Examples for Practice

Text formatting, working with image, working with link.

HTML Tutorial

Html graphics, html examples, html references.

HTML is the standard markup language for Web pages.

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it!

Easy Learning with HTML "Try it Yourself"

With our "Try it Yourself" editor, you can edit the HTML code and view the result:

Click on the "Try it Yourself" button to see how it works.

In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!

Go to HTML Examples!

Advertisement

HTML Exercises

This HTML tutorial also contains nearly 100 HTML exercises.

Test Yourself With Exercises

Add a "tooltip" to the paragraph below with the text "About W3Schools".

Start the Exercise

HTML Quiz Test

Test your HTML skills with our HTML Quiz!

Start HTML Quiz!

My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study at W3Schools without using My Learning.

At W3Schools you will find complete references about HTML elements, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, browser support, and more:

Kickstart your career

Get certified by completing the course

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.