Site icon DW Faisalabad

HTML Images

Zahid Farid

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

HTML Images Syntax

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute specifies the URL (web address) of the image:

<img src=”url“>

The alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example

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

Try it Yourself »

If a browser cannot find an image, it will display the value of the alt attribute:

Image Size – Width and Height

You can specify the width and height of an image.

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

Try it Yourself »

The width and height attributes always defines the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

Width and Height, or Style?

The width, height, and style attributes are valid in HTML5.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

Example

<!DOCTYPE html>
<html>
<head>
<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>

Try it Yourself »

Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page.

However, it is common to store images in a sub-folder. You must then include the folder name in the srcattribute:

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

Try it Yourself »

 

 

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example

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

Try it Yourself »

The <picture> Element

HTML5 introduced the <picture> element to add more flexibility when specifying image resources.

The <picture> element contains a number of <source> elements, each referring to different image sources. This way the browser can choose the image that best fit the current view and/or device.

Each <source> element have attributes describing when their image is the most suitable.

The browser will use the first <source> element with matching attribute values, and ignore any following <source> elements.

Example

Show one picture if the browser window (viewport) is a minimum of 650 pixels, and another image if not, but larger than 465 pixels.

<picture>
<source media=”(min-width: 650px)” srcset=”img_pink_flowers.jpg”>
<source media=”(min-width: 465px)” srcset=”img_white_flower.jpg”>
<img src=”img_orange_flowers.jpg” alt=”Flowers” style=”width:auto;”>
</picture>

Try it Yourself »

Note: Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags matched.

HTML Screen Readers

A screen reader is a software program that reads the HTML code, converts the text, and allows the user to “listen” to the content. Screen readers are useful for people who are blind, visually impaired, or learning disabled.

Chapter Summary

Note: Loading images takes time. Large images can slow down your page. Use images carefully.

Exit mobile version