HTML Image
Use the HTML img tag to show an image on a web page. HTML’s img tag is an empty tag that only has attributes. HTML’s image element doesn’t use closing tags, so it doesn’t have any.
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag makes a space for the image it points to.
The img> tag is empty because it only has attributes and no closing tag.
Syntax
<img src=”url“ alt=”alternatetext“>
The img> tag has two attributes that must be used:
src tells the computer where to find the image.
alt: Tells the image what text to use instead.
Let’s look at what an HTML image looks like.
HTML Image Example:
<img src=”imagename.jpg” alt=”Hello Friends”/>
What the HTML img tag can do
The HTML img tag has two important parts: src and alt. Here are all of the attributes of the HTML image tag.
1) src
It is a required attribute that tells where the image came from or what its path is. It tells the browser where on the server to find the picture.
The image could be on the same server or on a different server.
2) alt
If the image can’t be shown, the alt attribute tells the browser what text to show instead. The value of the alt attribute is a list of words that describe the picture. From an SEO point of view, the alt attribute is good.
3) width
It is an optional attribute that lets you choose how wide the image will be. It is not a good idea right now. Instead of the width attribute, you should use CSS.
4) Height
It gives the image’s height. The iframe, image, and object elements can also be used with the height attribute. It is not a good idea right now. Instead of the height attribute, you should use CSS.
Using height and width with the img tag
You now know how to add an image to a web page. If we want to give the image a certain height and width to fit our needs, we can do so with the height and width attributes of the image.
Example:
<img src=”E:/images/logo.png height=”180″ width”300″ alt= “coderazaa logo” />
Alt attribute use
We can use tag’s alt attribute. If the image can’t be shown on the browser, it will show an alternative text. Here’s what the alt attribute looks like:
How to get an image from a different folder or directory?
To add an image to your website, that image needs to be in the same folder as your HTML file. But if the image is in a different directory, you can get to it this way:
Example
<img src=”E:/images/coderazaa-logo.png height=”180″ width”300″ alt= “coderazaa logo” />
Output
In the above statement, we put the picture in the local disc D->images->animal.png.
If the src URL is wrong or misspelt, your image won’t show up on the web page. Try to use the right URL.
Use <img> tag as a link
We can also link an image to another page or use an image as a link. Put the img> tag inside the a> tag to do this.
Height and width, or style?
In HTML, width, height, and style are all valid attributes.
But we recommend you use the style attribute. It stops style sheets from making images bigger or smaller:
<!DOCTYPE html>
<html>
<head>
<style>
/* This internal style sets the width of all images to 100%: */
img {
width: 100%;
}
</style>
</head>
<body><h2>Width/Height Attributes or Style?</h2>
<p>The first image uses the width attribute (set to 150 pixels), but in style it sets the width to 100%.</p>
<img src=”/images/coderazaa-logo.png alt=”Image txt” width=”150″ height=”150″>
<p>The second image uses the style attribute to set the width to 150 pixels, this will not be overridden by the style in the head section:</p>
<img src=”/images/coderazaa-logo.png alt=”Image txt” style=”width:150px;height:150px;”>
</body>
</html>
Animated Images
HTML lets you create animated GIFs:
<img src=”image.gif” alt=”Image txt” style=”width:150px;height:150px;”>
Formats for most images
Here are the most common image file types that Chrome, Edge, Firefox, Safari, and Opera all support:
| 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 |
Summary of the Chapter
- Use the <img> element of HTML to specify an image.
- Use the src attribute of HTML to set the image’s URL.
- Use the HTML alt attribute to set an image’s alternative text if it can’t be shown.
- You can set the size of the image using the HTML width and height attributes or the CSS width and height properties.
- You can let the image float to the left or right by using the CSS float property.
- Large images take time to load, which can slow down your website. Be careful with images.