Login With Github

HTML Images

Images which can make web pages look more beautiful and words more lively are necessary parts of web pages.

You can use the <img> tag to display an image on a web page.

Here is an example:

<img src = "boat.jpg" alt = "This is a boat">

Image Syntax

Images in HTML can be defined by the <img> tag.

Basically, <img> is an empty element, which means that it contains only attributes and has no closing tag.

The syntax for defining a image is as follows:

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

The src Attribute

The src attribute defines the URL of a image.

Relative URL : Images are in the local site.

Here is an example:

<img src = "images / boat.jpg" alt = "This is a boat">

Absolute URL : Images are from other sites.

Here is an example:

<img src = "http://www.tutorialdocs.com/images/boat.jpg" alt = "This is a boat">

The alt Attribute

The alt attribute is used to provide the description of a image when the image in a page can't be rendered smoothly.

For example, when the image is loaded slowly or the source address of the image is incorrect, the text description of the alt attribute will be displayed instead of the image itself.

Here is the case when a image can be displayed correctly:

<img src = "boat.gif" alt = "Big Boat">

Here is another case of which a image can't be displayed correctly:

<img src = "boat2.gif" alt = "Big Boat">

It's a good practice to add the alt attribute to every image of a page, because it not only help to display information better, but also is convenient and useful for those who are using plain text browsers.

The Height and Width of a Image

The height and width attributes define the height and width of a image respectively.

For example:

<img src = "boat.jpg" alt = "Big Boa" width = "322" height = "235">

The default unit is pixel. You can also use the width and height attributes in CSS style to set the width and height of a image if you need.

For example:

<img src = "boat.jpg" alt = "Big Boa" style = "width: 322px; height: 235px;">

Both of these methods are available in HTML5 standard, but the W3C recommends using the width and height attributes in your CSS style.

Note: It's always a good habit to set the height and width of a image. If the image specifies the height and width, the page will keep the specified size when it's loading. If you don't specify the size, then it may destroy the overall layout of the HTML page when loading the page.

Image Mapping

You can use the <map> tag to create a series of clickable areas for a given image.

You can click on the computer, cellphone and a cup of coffee in the picture below:

HTML code is as follows:

<img src = "workplace.jpg" alt = "Workplace" usemap = "# workmap">

<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 = "Coffee" href = "coffee.htm">


The name attribute of <map> tag must keep consistent with the value of the usemap attribute of <img> tag.

The <map> tag contains several <area> tags which define the clickable area of the image.

Background Images

Not only can you insert an image in a web page, you can also define a background image for the specified HTML elements. You can define the background image of an element by using the background-image attribute in CSS.

Here is an example:

<body style = "background-image: url ('clouds.jpg')">

<h2> Background Image </ h2>

</ body>

For more information about the background-image attribute, please refer to CSS background-image.

The <picture> tag

The <picture> tag is a new tag of HTML5. It allows you to load various images in different-sized devices more flexibly.

Here's a basic example of checking if the viewport is smaller than 768px and then loading a smaller image if it's smaller than 768px:


    <source srcset = "smaller.jpg" media = "(max-width: 768px)">

    <source srcset = "default.jpg">

    <img srcset = "default.jpg" alt = "My default image">


0 Comment