HTML Images

HTML Images

Images can improve the design and the appearance of a web page.

Examples

<img src="pic_trulli.jpg" alt="Italian Trulli"> <img src="img_girl.jpg" alt="Girl in a jacket"> <img src="img_chania.jpg" alt="Flowers in Chania">

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; they are linked to web pages. The <img> tag creates a placeholder for the referenced image.

The <img> tag is empty, meaning it contains attributes only and has no closing tag.

The <img> tag has two required attributes.

• src – Specifies the path to the image
• alt – Specifies alternate text for the image

<img src="url" alt="alternatetext">

The src Attribute

The required src attribute specifies the URL or path to the image.

If the browser cannot find the image, a broken image icon and the alt text will be displayed.

<img src="img_chania.jpg" alt="Flowers in Chania">

The alt Attribute

The required alt attribute provides alternate text if the image cannot be displayed.

The value of the alt attribute should describe the image.

<img src="wrongname.gif" alt="Flowers in Chania">

Tip: Screen readers use the alt text to describe images to visually impaired users.

Image Size – Width and Height

You can use the style attribute to specify the width and height of an image.

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Alternatively, you can use the width and height attributes.

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

The width and height attributes always define the size in pixels.

Note: Always specify width and height to prevent page layout shifts while the image loads.

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.

Using the style attribute is often preferred because it prevents stylesheets from unintentionally changing image sizes.

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Images in Another Folder

If your images are stored in a subfolder, include the folder name in the src attribute.

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Images on Another Server

You can link to images hosted on another website using an absolute URL.

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Note: External images may be protected by copyright and can be changed or removed without notice.

Animated Images

HTML supports animated GIF images.

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Image as a Link

To use an image as a link, place the <img> tag inside an <a> tag.

<a href="default.asp">   <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"> </a>

Image Floating

You can use the CSS float property to align images to the left or right of text.

<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>

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	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

Chapter Summary

• Use the <img> element to display images
• Use the src attribute to specify the image URL
• Use the alt attribute for accessibility
• Define image size with CSS or width and height attributes
• Use CSS to control image layout and positioning

Exercise

What is the correct HTML element for adding an image?

<image> <img> <media>

HTML Image Tags

Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area inside an image map
<picture>	Defines a container for multiple image resources