The HTML image tag: img for adding images to your web sites.

Now that you’ve mastered the paragraph HTML tag p and line break HTML tag br, let’s learn how to add an image to our web page.

 

The image tag: < img> is another self-closing tag. Inside the tag itself, you have to include a piece of information called the source (src) attribute. An image tag looks like this:

[html] <img src="image.jpg">[/html]

The equals sign = and double quotes ” ” set the value of the source attribute.

An ATTRIBUTE is a useful way of giving your browser extra information about a HTML element.

There are lots of different kinds of attributes you can include in your tags. There are two parts to an attribute: the attribute name and the value of the attribute.

You use an equals sign = to set the value of the attribute and put the value in double quotes ” “

So an attribute will always look like this: name=”value”

Attributes are added to the opening tag, or to the only tag (in the case of a self-closing tag).

You have to include the source attribute in the

[html]<img>[/html]

tag so your browser knows where to find your image.

Without it, your browser won’t know what to display on-screen.

The value of your source attribute can either be set to a file name of a saved image or a URL (web address) of your image.

 

Using a saved image

If you have an image saved as a JPEG file .jpg in your Coding folder, it’s really easy to add this image to your page.

All you need to do is set the value of the source attribute to the name of your image file, using the equals sign = and double quotes ” “

So if your file is called gold.jpg, your code will look like this:

[html] <body>

<p>My first image in a website.</p>

<img src="gold.jpg">
</body>[/html]

 

Using an image URL

If there’s an image on the Internet you want to use on your web page, you have to set the value of the source attribute in your tag to the URL of the image.

You find the URL of a picture by right-clicking on it and selecting Copy image URL on a PC or Copy image address on a Mac.

You then paste the URL inside your tag as the value of the source attribute.

Don’t forget to put it in double quotes ” “ like this:

[html] <body>

Coding in HTML is awesome.

Here is a photo from another URL

<img src="https://www.google.ca/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</body>[/html]

A URL will always start with http:// or https://

UNLESS you are making relative URL references, for example to link to an image1.jpg (content) on the same URL domain (relative) to www.example.com but in a folder named /photos/  the relative URL link would be as follows:

< img src = “/photos/image1.jpg” / >

Assumes your on the same URL domain name (www.example.com)

 

Naming an image

If you include an image on your page, you should always give it a name.

It helps search engines like Google find your page.

A name is also handy for users who may not be able to download images.

To name your image, you need to add the alternative (alt) attribute after your source attribute, like this:

[html] <img src="gold.jpg" alt="Gold"/>[/html]

The complete code block for our web page with text and images now looks like this:

[html] <body>

Coding in HTML is awesome.

Here is a photo from another URL

<img src="https://www.google.ca/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo Image"/>
</body>[/html]

In some web browsers, if you hover your mouse over the image in your browser and leave it still, a little pop-up will be displayed containing the text in your alt attribute.

The quotes in our code are always straight ” “ rather than curly “ ”

Your browser won’t understand instructions if they are in curly quotes.

Definition and Usage

The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

  • src – Specifies the path to the image
  • alt – Specifies an alternate text for the image, if the image for some reason cannot be displayed

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

Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag (see example below).

Attributes

Attribute Value Description
alt text Specifies an alternate text for an image
crossorigin anonymous
use-credentials
Allow images from third-party sites that allow cross-origin access to be used with canvas
height pixels Specifies the height of an image
ismap ismap Specifies an image as a server-side image map
loading eager
lazy
Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met
longdesc URL Specifies a URL to a detailed description of an image
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
Specifies which referrer information to use when fetching an image
sizes sizes Specifies image sizes for different page layouts
src URL Specifies the path to the image
srcset URL-list Specifies a list of image files to use in different situations
usemap #mapname Specifies an image as a client-side image map
width pixels Specifies the width of an image


Global Attributes

The <img> tag also supports the Global Attributes in HTML.


Event Attributes

The <img> tag also supports the Event Attributes in HTML.


More Examples

Example

Align image (with CSS):

<img src=”smiley.gif” alt=”Smiley face” width=”42″ height=”42″ style=”vertical-align:bottom”>
<img src=”smiley.gif” alt=”Smiley face” width=”42″ height=”42″ style=”vertical-align:middle”>
<img src=”smiley.gif” alt=”Smiley face” width=”42″ height=”42″ style=”vertical-align:top”>
<img src=”smiley.gif” alt=”Smiley face” width=”42″ height=”42″ style=”float:right”>
<img src=”smiley.gif” alt=”Smiley face” width=”42″ height=”42″ style=”float:left”>

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.