Image

Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. It also enhances visual appearance of the web pages by making them more interesting and colorful.

There are following image types mostly used with HTML:

GIF (Graphic Interchange Format): The image type for vector graphics, simple images created like cartoons, that can contain up to 256 colours. They are usually used for bullets, buttons, accents, fancy lines and images featuring text. GIF images may have transparent areas, so that they do not obscure the background image or colour of the page. An added bonus with GIF images is that they can be animated.

JPG/JPEG Images (Joint Photographic Experts Group): These are commonly used for photo-realistic pictures containing thousands or millions of colours. JPEG pictures are useful because you can control the file size by altering the compression. The higher the file compression you set the lower the image quality will be, and as a result the file size is decreased. Photos clicked by camera are default JPG/JPEG images.

PNG (Portable Network Graphics): This is a new format used as an alternative to GIF that supports transparency for pictures containing thousands or millions of colours. Logos are mostly designed in PNG format.

BMP Images (Bitmap): It can be used, but they are not recommended. They are much larger than JPG or GIF files as they are not compressed, so will take longer to download.
In HTML <img> tag is used to display image on the web page and with <img> tag src attribute must be used. Attributes used with <img> tag are:
  1. src
  2. height
  3. width
  4. alt
  5. border
  6. align
  7. title
SRC Attribute
The src stands for source. It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server. The location of image may be on the same/different directory or another server.

Height/Width Attributes
You can set image width and height based on your requirement using width and height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size. The attribute values are specified in pixels by default.

Alt Attribute
The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective. It is displayed on mouse over on the image in some web web browser, but main use of alt attribute is to display information about image when there is error in image loading.

Border Attribute
By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture. In HTML there no method to specify image border color without using CSS, but we will learn a trick to specify border color of an image in HTML in this tutorial.

Align Attribute
By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right using this attribute.

Title Attribute
Along with the images, titles can also be added to images to provide further information related to the inserted image. For inserting a title, the title attribute is used. Title information is displayed when mouse is placed(over) on the image.

Examples



<!DOCTYPE html>
<html>
<head>
<title>Learning image tag in HTML</title>
</head>
<body>

<p>
Adding image in HTML.
</p>

<img src="example.jpg">


<p>
Displaying image with different attributes and using remote URL in HTML.
</p>

<img src="https://myragroup.in/education/assets/images/default/pcelogo.png" alt="this is logo" title="This is an image through remote URL" height="100" width="180">



<p>
Displaying image with border attribute inside a folder. This is animated gif image
</p>

<img src="images/example2.gif" border="4">


<p>
Displaying image with border color.
</p>
<font color="green">
<img src="images/example2.gif" border="4">

</font>

</body>
</html>

Adding image in HTML.

Displaying image with different attributes and using remote URL in HTML.

this is logo

Displaying image with border attribute inside a folder. This is animated gif image

Displaying image with border color.



HTML5 Picture Element

Sometimes, scaling an image up or down to fit different devices (or screen sizes) doesn't work as expected. Also, reducing the image dimension using the width and height attribute or property doesn't reduce the original file size. To address these problems HTML5 has introduced the <picture> tag that allows you to define multiple versions of an image to target different types of devices.
The <picture> element contains zero or more <source> elements, each referring to different image source, and one <img> element at the end. Also each <source> element has the media attribute which specifies a media condition (similar to the media query) that is used by the browser to determine when a particular source should be used.

Image Maps

An image map allows you to define hotspots on an image that acts just like a hyperlink.

The basic idea behind creating image map is to provide an easy way of linking various parts of an image without dividing it into separate image files. For example, a map of the world may have each country hyperlinked to further information about that country.

Examples



<!DOCTYPE html>
<html>
<head>
<title>Learning about image in HTML</title>
</head>
<body>

<p>
Using picture element in HTML.
</p>

<picture> <source media="(min-width: 1000px)" srcset="https://myragroup.in/education/assets/images/default/pcelogo.png"> <source media="(max-width: 500px)" srcset="https://myragroup.in/education/assets/images/default/pcelogo2.png"> <img src="https://myragroup.in/education/assets/images/default/pcelogo.png" alt="My logo"> </picture>

<p>
Learning image map in HTML.
</p>

<img src="example.jpg" title="Learning Image Map" usemap="#myImage">

<map name="myImage"> <area shape="circle" coords="137,231,71" href="https://myragroup.in/education/website/tutorial/?type=1623082580&block=1623537172&learning=Formatting%20%20Tags" alt="HTML formatting Tag"> <area shape="poly" coords="363,146,273,302,452,300" href="https://myragroup.in/education/website/tutorial/?type=1623082580&block=1624513095&learning=space%20%20Management" alt="HTML space management"> <area shape="rect" coords="520,160,641,302" href="https://myragroup.in/education/website/tutorial/?type=1623082580&block=1625258539&learning=Lists" alt="Lists in HTML"> </map>

</body>
</html>

Using picture element in HTML.

My logo

Learning image map in HTML.

HTML formatting Tag HTML space management Lists in HTML