HTML Images

A web page's design and appearance can be improved with the use of images.

A sample html image :-

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="html-resources/img-waterfall.jpg" alt="Water fall" width="500" height="333">

</body>
</html>

Output :-

HTML Image

You can also search for these topics, html background image, html image link, how to add image in html from a folder, html image tag, hyperlink image html, html images not showing android, html images are defined with the img tag, html image attributes, html image height width.

HTML Images Syntax

An image is embedded on a web page using the HTML <img> tag.

Images are linked to online sites, rather than being put into them. The <img> tag produces a placeholder for the picture that is being referenced.

The <img> tag is empty, containing only attributes, and has no closing tag.

There are two properties that must be present in the <img> tag.

src - The path to the image is specified in this property.
alt - Provides a text alternative for the image.

Syntax :-

<img src="location-of-image-url" alt="alternate-text">

You can also search for these topics, html image tag syntax, syntax for html image tag, html image syntax example.

The src Attribute

The needed path (URL) for the image is set by the src attribute.

Note:- It is the browser that loads a web page that picks and inserts the image from a web server. Make sure the image remains in the same place as the website, otherwise your visitors will be given an icon with a broken link.

Example :-

<img src="html-resources/img-computer.jpg">

Output :-

You can also search for these topics, src is an attribute of which tag in html, src attribute is used with target, image and html body, meta tag, example for the src Attribute.

The alt Attribute

If a user is unable to view an image for some reason, the necessary alt attribute gives an alternative text (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The image should be described in the alt attribute's value.

Example :-

<img src="html-resources/img_computer2.jpg" alt="A computer on a table">

Output :-

Note:- If a browser is unable to locate a picture, the alt attribute value will appear in the browser screen.

A screen reader is a piece of software that scans HTML code and allows users to "listen" to it. People who are visually impaired or learning handicapped can benefit from screen readers.

You can also search for these topics, the alt attribute example, why is the alt attribute necessary for a website code in html, how to use alt attribute in html image, link, and other html elements.

Image Size - Width and Height

To define an image width and height you might use the HTML width and height attribute or CSS style property.

Example:-

<p>Here we use the CSS style property to specify the width and height of an image:</p>

<img src="html-resources/img-roses.jpg" alt="Beautiful Roses" style="width:300px;height:200px;">

<p>Here we use the HTML height and width attribute to specify the size of an image:</p>

<img src="html-resources/img-roses.jpg" alt="Beautiful Roses" width="300" height="200">

Output :-

Here we use the style attribute to specify the width and height of an image:

Here we use the HTML height and width attribute to specify the size of an image:

The image's width and height are always specified in pixels through the width and height properties.

Note : Enter the height and width of a picture at any time. The web page may flicker when the image loads if width and height is not given.

However, we recommend that you use the style attribute. It prevents the size of pictures from being changed by styles sheets.

You can also search for these topics, html image size width and height attribute, div and body background, fit screen, html image size width and height not working, html image size - width and height using css background.

Images in Another Folder

You need add the folder name in the src attribute if you have your photographs in a sub-folder :

Example :-

<p>It is common to store images in a sub-folder. You must then include the folder name in the src attribute.</p>

<img src="html-resources/img-computer.jpg" alt="Computer" style="width:128px;height:128px;">

Output :-

It is common to store images in a sub-folder. You must then include the folder name in the src attribute.

You can also search for these topics, html background image in another folder example, how to add background image in css from another folder, html img in another folder src, html image in another folder multiple next to each.

Images on Another Server/Website

Some web pages point an images on a server from different website.

Example :-

You must use an absolute (full) URL in the src element to refer to a picture on another server or website.

<img src="https://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg" alt="Wikipedia Logo">

Output :-

Attention: Copyright may be used for external pictures. You may be violating copyright laws if you do not have permission to use it. Furthermore, external pictures cannot be controlled. They might be unexpectedly withdrawn or modified.

You can also search for these topics, html images on another server/website example in application, how to download and display html images from website, browse html image code online, display responsive html images.

Animated Images

Example :-

HTML enables GIF animation :-

<p>Image Credit : Wikipedia (https://en.wikipedia.org/wiki/GIF)</p>

<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Newtons_cradle_animation_book_2.gif" 
alt="Newton cradle animation book" style="width:220px;height:220px;" />

Output :-

Image Credit : Wikipedia (https://en.wikipedia.org/wiki/GIF)

You can also search for these topics, html code for animated gif images, html animated image slider, html animated images different sizes with scroll, how to add animated image in html, html animated image background, html animate image on hover, html animated images hyperlink, animated text on image html.

Image as a Link

Example :-

Put the img element within the a tag to utilise an image in a link.

<p>The image is a link. You can click on it.</p>

<a href="https://www.simmanchith.com">
<img src="../../favicon.png" alt="Homepage">
</a>

Output :-

The image is a link. You can click on it.

You can also search for these topics, html image as a hyperlink, html image add a link, svg image link and download, html how to use an image as a link, html image url load, multiple image links, html image link new tab, html image url not working, create image as a link in html, html image preview link.

Image Floating

Example :-

Allow an image to float to the right or left of a paragraph using the CSS float property :

<p><strong>Float the image to the right:</strong></p>

<p>
<img src="../../favicon.png" alt="Simmanchith Favicon" style="float:right;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

<p><strong>Float the image to the left:</strong></p>

<p>
<img src="../../favicon.png" alt="Simmanchith Favicon" style="float:left; margin-right:12px">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.  
</p>

Output :-

Float the image to the right:

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

Float the image to the left:

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

You can also search for these topics, html image floating text example, html floating image bottom right, html add floating image, html css text floating around images, floating horizontal scrollbar and menu bar, floating outside div.

Common Image Formats

The most popular picture file formats are listed here, and all browsers support them (Chrome, Edge, Firefox, Safari, Opera) :

Abbreviation	File Format	File Extension
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

You can also search for these topics, html common image formats file list, list of supported image format in html, content-type image/jpeg, name some common image formats used in html pages.

HTML <picture> Element

The HTML picture element enables you to see various images (same image with different dimensions or pixels) for various sizes or devices.

The HTMLpicture element allows web designers to define image resources with greater flexibility.

The srcset attribute of the picture element contains one or more source elements, each of which refers to a different image. This allows the website to select the best image for the current view and/or device.

The media attribute of each source element specifies when the image is most appropriate.

Example :-

Show different images for different screen sizes :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
  <source media="(min-width: 600px)" srcset="html-resources/523px-Wikipedia-logo.png">
  <source media="(min-width: 465px)" srcset="html-resources/209px-Wikipedia-logo.png">
  <img src="html-resources/523px-Wikipedia-logo.png" style="width:auto;">
</picture>

<p><strong>Resize the browser to see different versions of the picture
loading at different viewport sizes</strong>.</p>

<p>The img element is <strong>required as the last child tag of the picture</strong> declaration block.
The img element is used to provide backward compatibility for browsers that <strong>do not support 
the picture element</strong>, or if none of the source tags matched.
</p>

<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>

</body>
</html>

Output :-

The picture Element

Resize the browser to see different versions of the picture loading at different viewport sizes.

The img element is required as the last child tag of the picture declaration block. The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.

Note: The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.

You can also search for these topics, what tag is used to display a picture in a html page, picture + element blended word, html picture element not working, html picture element size, width height and background.

When to use the Picture Element

The picture element has two primary functions :

1. Bandwidth

You do not need to load large image files if you have a small screen or device. The first element source with corresponding attribute values is used by the browser and all the following elements are ignored.

2. Format Support

Not all picture formats are supported by all browsers or devices. You can add photos of any format to the picture element, and the browser will use the first format it recognises, ignoring any of the subsequent elements.

You can also search for these topics, html bandwidth test with picture element, html image vs picture tag.

Image Maps

You can make clickable portions on a picture using HTML image maps.

A map is defined via the HTMLmap tag. An image map is a picture that contains areas that may be clicked on. Using one or more area tag, the areas are defined.

Example :-

Here is the HTML source code for the image map above :

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to 
a new page from wikipedia and read more about the topic:</p>

<img src="html-resources/img-computer.jpg" alt="A computer on the table" usemap="#workmap" width="400" height="379" />

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://en.wikipedia.org/wiki/Computer" />
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="http://en.wikipedia.org/wiki/Phone" />
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://en.wikipedia.org/wiki/Coffee" />
</map>

Output :-

Image Maps

Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:

You can also search for these topics, image map definition, html map area, how to get coordinates for image map in html, html image maps generator, types of image map, html image maps responsive scale, html image maps alternative, html image map show borders, href links generator, map zoom, html image map click event, map background color, target _blank, border color, html image map with text.

How Does it Work?

An image map's concept is that based on where in the image you click, you should be able to conduct different actions.

You'll need a picture and some HTML code that explains the clickable sections to make an image map.

The Image

Theimg tag is used to insert the picture. The only thing that sets this image apart from others is that it requires the usemap attribute:

<img src="html-resources/img-computer.jpg" alt="A computer on the table" usemap="#myimage" />

The usemap value is used to establish a link between the picture and the image map. It begins with the hash tag # and ends with the name of the image map.

Tip:- As an image map, you can utilise any image.

You can also search for these topics, background image, align, center and rotate the image, crop, resize, fit the image in html, zoom, change the size of an image, the image is not showing in html, text next to the image in html.

Create Image Map

Then, add a map element.

The element map is used for the generation of an image map and is linked to the image with the name feature.

<map name="myimage"></map>

The usemap attribute on the img must have the same value as the name myimage attribute.

You can also search for these topics, create image map html example, free online image map generator.

The Areas

Add the clickable spots after that.

The area element is used to create a clickable area.

The clickable surface form must be defined, and one of these can be selected:

rect - specifies a rectangular area.
circle - define a circular area.
poly - A polygonal region is defined by its shape.
default - encompasses the entire area

Note:- All shape coordinates need to be defined manually so that the clickable area is placed in a picture.

You can also ser for these topics, html map area css style, html area shape fill color, how to get coordinates for image map in html, responsive image with clickable areas, html area onclick, map area tooltip, html area onclick, the areas in html define inline styles.

Image Map and JavaScript

The JavaScript function can also be initiated with a clickable area.

To perform a JavaScript function, add a click event to thearea element.

Example :-

When the area is clicked, we utilise the onclick attribute to run the following JavaScript code:

<h2>Image Maps With Javascript Click Event</h2>

<p>Click on the cup of coffee to execute a JavaScript function:</p>

<img src="html-resources/img-computer.jpg" alt="Image of Computer, Phone, Coffee" usemap="#coffee" width="400" height="379" />

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="https://en.wikipedia.org/wiki/Coffee" onclick="myFunction()" />
</map>

<script>
    function myFunction() {
        alert("You clicked the coffee cup!");
    }
</script>

Output :-

Image Maps With Javascript Click Event

Click on the cup of coffee to execute a JavaScript function:

You can also search for these topics, create image map in html javascript, create an image map with clickable regions in html, html javascript and imagemap example.