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:
<img src="image.jpg">
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
<img>
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:
<body> <p>My first image in a website.</p> <img src="gold.jpg"> </body>
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:
<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>
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:
<img src="gold.jpg" alt="Gold"/>
The complete code block for our web page with text and images now looks like this:
<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>
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”>
