HTML Images
Images can improve the design and look of a web page.
Trulli houses
An image of Trulli houses.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intro Trulli</title>
</head>
<body>
<img src="pic_trulli.jpg" alt="Italian Trulli">
</body>
</html>
Girl in a jacket
An image with alt text.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intro Girl</title>
</head>
<body>
<img src="img_girl.jpg" alt="Girl in a jacket">
</body>
</html>
Flowers in Chania
Another image with alt text.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intro Chania</title>
</head>
<body>
<img src="img_chania.jpg" alt="Flowers in Chania">
</body>
</html>
HTML Images Syntax
The <img> tag puts an image on a page. Images are not really inserted into the page; they are linked to it, and the <img> tag makes a holding space for the linked image. It is an empty tag with attributes only and no closing tag.
It has two required attributes: src, the path to the image, and alt, alternate text for the image.
Image syntax
The shape of an image tag.
<img src="url" alt="alternatetext">
The src Attribute
The required src attribute sets the path (URL) to the image.
Note: When the page loads, the browser fetches the image from the server and inserts it. Keep the image in the same place relative to the page, or visitors will see a broken-link icon. The broken-link icon and the alt text appear when the browser cannot find the image.
Example
An image set with the src attribute.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Src Chania</title>
</head>
<body>
<img src="img_chania.jpg" alt="Flowers in Chania">
</body>
</html>
The alt Attribute
The required alt attribute gives alternate text shown when the image cannot be viewed, such as on a slow connection, a wrong src, or for screen-reader users. The text should describe the image.
Tip: A screen reader reads the HTML aloud so the user can listen to the content; it helps people who are visually impaired or have a learning disability.
Descriptive alt text
An image with describing alt text.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt Chania</title>
</head>
<body>
<img src="img_chania.jpg" alt="Flowers in Chania">
</body>
</html>
When the image is missing
The alt text shows because the image cannot be found.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt Broken</title>
</head>
<body>
<img src="wrongname.gif" alt="Flowers in Chania">
</body>
</html>
Image Size - Width and Height
You can set an image's width and height with the style attribute, or with the width and height attributes. Both always measure in pixels.
Note: Always set the width and height. If you do not, the page may flicker while the image loads.
With the style attribute
Sizing an image with CSS in the style attribute.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Size Style</title>
</head>
<body>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
</body>
</html>
With width and height attributes
Sizing an image with the width and height attributes.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Size Attributes</title>
</head>
<body>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>
Width and Height, or Style?
The width, height, and style attributes are all valid. PromptCookbook suggests the style attribute, because it stops style sheets from changing the image's size.
Example
A page where a style sheet would otherwise resize the images.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Images in Another Folder
If your image is in a sub-folder, include the folder name in the src attribute.
Example
An image referenced from a sub-folder.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Subfolder</title>
</head>
<body>
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Images on Another Server/Website
To use an image from another server, give a full (absolute) URL in the src attribute.
Note: External images may be under copyright, and using one without permission could break copyright laws. You also cannot control external images; they can change or disappear without warning.
Example
An image loaded from another website.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image External</title>
</head>
<body>
<img src="https://prompt-cookbook.com" alt="PromptCookbook">
</body>
</html>
Animated Images
HTML can show animated GIFs the same way as any other image.
Example
An animated GIF.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Gif</title>
</head>
<body>
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
</body>
</html>
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag.
Example
An image that works as a link.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Link</title>
</head>
<body>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
</body>
</html>
Image Floating
Use the CSS float property to let an image float to the right or left of the text around it.
Example
Images floating to the right and to the left of text.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Float</title>
</head>
<body>
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
</body>
</html>
Common Image Formats
The most common image formats, supported in all browsers, are: APNG (Animated Portable Network Graphics, .apng), GIF (Graphics Interchange Format, .gif), ICO (Microsoft Icon, .ico), JPEG (.jpg, .jpeg), PNG (Portable Network Graphics, .png), and SVG (Scalable Vector Graphics, .svg).
Chapter Summary
To recap: use the <img> element to define an image, the src attribute for its URL, and the alt attribute for alternate text. Set the size with the width and height attributes or the CSS width and height properties, and use the CSS float property to float an image left or right.
Note: Large images take time to load and can slow your page, so use images carefully.
HTML Image Tags
The image-related tags are: <img> (defines an image), <map> (defines an image map), <area> (defines a clickable area inside an image map), and <picture> (defines a container for multiple image resources).