HTML Images
Images can improve the design and the appearance of a web page.
HTML Images Syntax
The HTML <img> tag is used to display images on web page.
Images are not physically inserted into a web page; instead, they are linked to web pages. The <img> tag reserves a space on the web page to display the referenced image.
The <img> tag is tag is a self-closing tag that only contains attributes and does not require a closing tag.
The <img> tag has two required
attributes:
- src - Specifies the path to the image
- alt - Specifies an alternate text for the image
The src Attribute
The required src attribute specifies the path (URL) to the image.
Note:
When a web page loads, the browser retrieves the image from a web server and places it within the page. To avoid displaying a broken link icon to visitors, ensure that the image remains in the same position in relation to the web page. alt text are shown if the browser cannot find the image.
The alt Attribute
The required alt attribute supplies an alternative text for an image in case the user is unable to view it due to slow connection, errors in the src attribute, or if they are using a screen reader.
The value of the alt attribute should describe the image:
Image Size - Width and Height
You can use the style attribute is used to define the width and height of an image.
Instead, you have the option to use the width and height attributes for specifying the dimensions of an image:
Width and Height, or Style?
The width, height, and style attributes are all acceptable in HTML for controlling the size of images.
However, it is recommended to use the style attribute to preserve the image size, as it prevents style sheets from altering the image dimensions:
Images in Another Folder
When your images are located in a sub-folder, it is essential to include the folder name in the src attribute of the image tag:
Images on Another Server/Website
Certain websites link to images hosted on a different server.
To link to an image on another server, you need to provide an absolute (full) URL in thesrc attribute of the image tag:
Notes on external images: External images may be subject to copyright restrictions. Using them without proper permission could lead to copyright infringement. Moreover, you have no control over external images, and they might be removed or altered without warning.
Animated Images
HTML allows animated GIFs:
Image as a Link
To create an image link, simply place the <img> tag inside the <a>
tag:
Image Floating
Employ the CSS float property to let the image float to the right or to the left of a text:
HTML Image Maps
HTML image maps let you make clickable parts on a picture.
The HTML
You can click on specific regions when you move your cursor over different parts of the image.
HTML Background Images
You can set a background image for almost any HTML element.
If you want to put a background image on an HTML element, you can do it by using the HTML style attribute along with the CSS background-image property:
Background Repeat
If the background picture is not as big as the element, it will keep appearing repeatedly both horizontally and vertically until it covers the entire element.
To prevent the background image from repeating, use the background-repeat property and set it to no-repeat.
Background Cover
If you wish to make sure the background image fills the whole element, just use the background-size property and set it to cover.
Additionally, ensure the complete coverage of the entire element by setting the background-attachment property to fixed.
In this method, the background picture will completely cover the element without getting distorted, maintaining its original proportions:
Background Stretch
If you wish the background picture to expand and cover the whole element, you can use the background-size property and set it to 100% 100%.
Common Image Formats
| 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 |
Chapter Summary
- Use the HTML
<img> element to display an image
- Use the HTML
src attribute can be used to give URL to the image
- Use the HTML
alt attribute is used to give an alternate text for an image, if it cannot be displayed
- Use the HTML
width and height attributes
or the CSS width and height
properties used to specify the size of the image
- Use the CSS
float property to let the image float
to the left or to the right
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="/assets/files/plant.png" alt="plant">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="/assets/files/sunset.jpg" alt="sunset">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="/assets/files/mushroom.jpg" alt="mushroom">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="url" alt="alternatetext">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="/assets/files/sunset.jpg" alt="sunset">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="/assets/files/mushroom.jpg" alt="mushroom">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="/assets/files/plant.png" alt="plant" style="width:500px;height:600px;">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="/assets/files/plant.png" alt="plant" width="500" height="600">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
/* This 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 128 pixels), but the style in the head section overrides it, and sets the width to 100%.</p>
<img src="/assets/images/html/html5.gif" alt="HTML5 Icon" width="128" height="128">
<p>The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in the head section:</p>
<img src="/assets/images/html/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<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="/assets/images/html/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Images on Another Server</h2>
<img src="/assets/images/html/green.jpg" alt="propertutorials.com">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="/assets/images/html/programming.gif" alt="Computer Man" style="width:48px;height:48px;">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="https://propertutorials.com/" target="_blank">
<img src="/assets/images/html/smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>
<img src="/assets/images/html/smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will be positioned to the right of the text using the CSS float property.
</p>
<p>
<img src="/assets/images/html/smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will be positioned to the left of the text using the CSS float property. the text.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<img src="/assets/files/benches.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Background Image</h2>
<p>A background image for a p element:</p>
<p style="background-image: url('/assets/files/sunset.jpg');">Lorem Ipsum is simply dummy text of the printing and <br> typesetting industry. Lorem Ipsum has been the <br> industry's standard dummy text ever since the <br> 1500s, when an unknown printer took a galley of type <br> and scrambled it to make a type specimen book. <br> It has survived not only five centuries, but also <br> the leap into electronic typesetting, remaining <br> essentially unchanged. It was popularised in the 1960s <br> with the release of Letraset sheets containing <br> Lorem Ipsum passages, and more recently with <br> desktop publishing software like Aldus PageMaker <br> including versions of Lorem Ipsum.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Background Image</h2>
<p>A background image for a p element:</p>
<p style="background-image: url('/assets/files/sunset.jpg');">Lorem Ipsum is simply dummy text of the printing and <br> typesetting industry. Lorem Ipsum has been the <br> industry's standard dummy text ever since the <br> 1500s, when an unknown printer took a galley of type <br> and scrambled it to make a type specimen book. <br> It has survived not only five centuries, but also <br> the leap into electronic typesetting, remaining <br> essentially unchanged. It was popularised in the 1960s <br> with the release of Letraset sheets containing <br> Lorem Ipsum passages, and more recently with <br> desktop publishing software like Aldus PageMaker <br> including versions of Lorem Ipsum.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/assets/files/sunset.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>A background image for a p element:</p>
<p>Lorem Ipsum is simply dummy text of the printing and <br> typesetting industry. Lorem Ipsum has been the <br> industry's standard dummy text ever since the <br> 1500s, when an unknown printer took a galley of type <br> and scrambled it to make a type specimen book. <br> It has survived not only five centuries, but also <br> the leap into electronic typesetting, remaining <br> essentially unchanged. It was popularised in the 1960s <br> with the release of Letraset sheets containing <br> Lorem Ipsum passages, and more recently with <br> desktop publishing software like Aldus PageMaker <br> including versions of Lorem Ipsum. </p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/assets/files/sunset.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>A background image for a p element:</p>
<p>Lorem Ipsum is simply dummy text of the printing and <br> typesetting industry. Lorem Ipsum has been the <br> industry's standard dummy text ever since the <br> 1500s, when an unknown printer took a galley of type <br> and scrambled it to make a type specimen book. <br> It has survived not only five centuries, but also <br> the leap into electronic typesetting, remaining <br> essentially unchanged. It was popularised in the 1960s <br> with the release of Letraset sheets containing <br> Lorem Ipsum passages, and more recently with <br> desktop publishing software like Aldus PageMaker <br> including versions of Lorem Ipsum. </p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/assets/files/sunset.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>A background image for a p element:</p>
<p>Lorem Ipsum is simply dummy text of the printing and <br> typesetting industry. Lorem Ipsum has been the <br> industry's standard dummy text ever since the <br> 1500s, when an unknown printer took a galley of type <br> and scrambled it to make a type specimen book. <br> It has survived not only five centuries, but also <br> the leap into electronic typesetting, remaining <br> essentially unchanged. It was popularised in the 1960s <br> with the release of Letraset sheets containing <br> Lorem Ipsum passages, and more recently with <br> desktop publishing software like Aldus PageMaker <br> including versions of Lorem Ipsum. </p>
</body>
</html>
HTML
CSS
Javascript
Jquery