Image tag in HTML22 min read

1. Introduction

  • Image tag in HTML is used to embed images/pictures in a web page as it makes it more attractive than a page worth thousands of words.
  • One can add graphs, images, charts as images in HTML documents either to improve its appearance to present important information.
  • One can create an image using tools such as Gif Constructor or Adobe Photoshop etc.
  • Most Image files are composed of pixels. The pixels that constitute an image are ordered as a grid (columns and rows); each pixel consists of numbers representing magnitudes of brightness and color.
  • Loading images take time, so use images carefully.
  • Image tag in HTML is inserted using <IMG> tag.

2. Image Format for Internet and HTML

Sr.No.Image FormatStands ForDescription
1).GIFGraphics Interchange Format
Compresses image files and supports only Interchange Format 8-bit palette or 256 colors. The GIF format supports animation and provides image animation effects. It is more effective when large areas have a single color and ineffective for detailed images. 

2)

.JPEG

Joint Photographic Experts Group

Is not easily compressed and is used for color Experts Group images. JPEG-compressed images are usually stored in the JFIF (JPEG File Interchange Format) file format. JPEG compression is (in most cases) lossy compression. (“lossy” compression is a data encoding method which discards (loses) some of the data, in order to achieve its goal). The JPEG/JFIF format also is used as the image compression algorithm in many Adobe PDF files.
3).JPEG2000JPEG2000 is a new format enabling both lossless and lossy storage. The compression methods improve quality and compression ratios. JPEG 2000 also adds features that are missing in JPEG. It is not nearly as common as JPEG, but it is used currently in professional MOVIE EDITING AND DISTRIBUTION

4)

.PNG

Portable Network Graphics

PNG is license-free and is used by browsers forex, Internet Explorer and Netscape Navigator. The PNG file format supports true color (16 million colors). The PNG file excels when the image has large, uniformly colored areas. The lossless PNG format is best suited for editing pictures with Mozilla Firefox or Internet Explorer 7, all contemporary web browsers now support all common uses of the PNG format. PNG is designed to work well in online viewing applications; PNG is robust, providing both full file integrity checking and simple detection of common transmission errors.

5)

.BMP

Bitmap

This is most commonly used in a window environment It supports 256 colors, but does not support transparency. ) handles graphics files within the Microsoft Windows OS. Typically, BMP files are uncompressed, hence they are large. The advantage is their simplicity and wide acceptance in Windows programs.

6)

Exif

Exchangeable Image File Format

The exchangeable image file format is a file standard similar to the JFIF format with TIFF extensions. Its purpose is to record and standardize the exchange of images with image metadata between digital cameras and editing and viewing software. The metadata is recorded for individual images and includes camera settings, time and date, shutter speed, exposure, image size, compression, name of the camera, color information, etc. When images are viewed or edited by image editing software, all the image information can be displayed.

7)

TIFF

Tagged Image File Format

a TIFF format is a flexible format that normally saves 8 bits or 16 bits per color (red, green, blue) for 24-bit and 48-bit totals. TIFFs can be lossy and lossless. TIFF image format is not widely supported by web browsers. TIFF remains widely accepted as a photograph file standard in the printing business.

8)

RAW

RAW refers to a family of raw image formats. These formats usually use a lossless or nearly lossless compression and produce file sizes much smaller than the TIFF formats of full-size processed images. Many graphic programs and image editors may not accept.

9)

PPM, PGM, PBM, PNM 
Portable PixMap Portable GrayMap Portable BitMap Portable Any Map 
These are either pure ASCII files or raw binary files with an ASCII header that provide very basic functionality.

10)

WEBP

Uses lossy compression. It was designed by Google to reduce image file size to speed up web page loading.

3. Comparison between. GIF and. JPEG format

  • .GIFs are best used for banners, clip art, and buttons. The main reason for this is that gifs can have a transparent background which is priceless when it comes to web design.
  • On the downside, gifs are usually larger files, not as compressed as a jpeg, which calls for slow load times and large transfer rates. Gifs are also limited to the 256 color scheme.
  • JPEGs have an unlimited color wheel and have a high compression rate which downsizes your load times and saves hard drive space.
  • Jpeg’s don’t allow for transparent backgrounds and animation, but their size/quality ratio is outstanding. It’s best to use Jpeg’s for photo galleries, or artwork to allow the viewer to catch that extra bit of detail.
  • Avoid Jpeg’s for graphical design, stick to using them for thumbnails and backgrounds. ck to using them for thumbnails.

4. Important Issues while selecting Image for Web Page. 

  • It takes more time to load images compare to text.
  • One must consider speed versus image quality while loading a web page as the better quality picture will take more time to load.
  • Color images may not be portable. An image that looks good on the web page on your system may look distorted on another system.
  • Some of the image formats may not be supported by some web browsers so be careful while selecting the image format.
  • Most of the web browser supports two formats namely. GIF and. JPEG. One can optimize images using the following technique to reduce the loading time of the image,
  • Reducing the colors in images
  • Reducing the size of images either by resizing or cropping or by creating thumbnails
  • By compressing the size of the image using compression technique etc.

5. Image as Background of Web Page

One can add an image as background in an HTML document using the BACKGROUND attribute of the <BODY> tag.

Syntax: <BODY BACKGROUND = “Image_File”>

</BODY>

Here one must specify the complete path of the image file if it is not in the current directory.

URL Types:

URL TYPELocal DescriptionLocal BACKGROUND
Same DirectoryPicture file resides in the same directory as .html fileBACKGROUND = “sunset.jpg”
Previous Directory Picture file resides in the previous directory as .html file BACKGROUND = “../sunset.jpg”
Specific Directory Picture file resides in the specific directory as .html file BACKGROUND = ” ../pictures/sunset.jpg”

By default when the URL has not specified a path, it searches the image in the directory where the HTML document is saved. A URL cannot contain drive letters, since a Background URL is a relational source interpretation based on the location of your.html file and the location of the picture file. Therefore something like BACKGROUND=”C:\\www\web\picture!” will not work. Pictures must be uploaded along with your.html file to your web server.

While uploading the images for postcard photos, the file size should be between 10-100 KB and for signature, it should be between 5-20 KB.

6. Image Tag in HTML

  • You can insert an image in a document using the <IMG> tag.
  • Image Tag in HTML is an empty tag or singular tag.
  • It allows you to control the height, width, border of the image.
  • One must specify or it is mandatory to use attributes SRC if one would like to insert an image using the <IMG> tag.

The inline images are displayed along with the page while external images are displayed on separate web pages.

Syntax : < IMG> Image_File </IMG>

Attributes

1) SRC: Indicates to the browser the location and the name of the image that needs to be inserted into the web page. The source of the image can be a local or network file. It is one of the mandatory attributes that must be specified with the <IMG> tag.

Syntax <IMG SRC= “URL”>

Example <IMG SRC=”SUNSET.JPG” ALT: The ALT attribute provides alternative information for an image if a user for some reason cannot view the image and is known as an alternate text image. • Browser does not support GUI i.e. if a user is using a character user interface-based browser which is not able to display images within an HTML page. • When the image is deleted or moved to another location. Syntax <IMG SRC = “URL” ALT = “Text”> ALT = “Unable to display Image”> =

Example <IMG SRC = “SUNSET.JPG

2) BORDER: Creates a border around the image. It accepts an integer value in pixels. It helps to enhance the image.

Syntax <IMG SRC = “URL” BORDER “PIXEL”

Example <IMG SRC = “SUNSET.JPG”> 

3) HEIGHT: Used to specify the vertical area that an image will cover in an HTML page. One can increase or decrease the height of the image. The browser will determine the actual dimension of the image if you have not specified height.

BORDER=”2″>

4) WIDTH: Used to specify the horizontal area that an image will cover in an HTML page. One can increase or decrease the width of the image. The browser will determine the actual dimension of the image if you have not specified height.

Important: It is always better to use the HEIGHT and WIDTH attribute with <IMG> tag as the browser will know in advance how much screen space to give to the image. Thus before downloading the image browser will layout the page properly.

5) ALIGN: Aligns the image with respect to the text around the image. By default, the text is aligned with the bottom of the image. This default alignment can be changed using the following value for the attributes ALIGN

Top ALIGN text to the top of the image. Middle ALIGN text to the middle of the image. Bottom ALIGN text to the bottom of the image. Left ALIGN text to the left of the image. It is the default. Right, ALIGN text to the right of the image.

Demonstration to show or load inline-image sunset.jpg

<HTML>
<HEAD> <TITLE> Image in HTML </TITLE> </HEAD> 

  <BODY>
  
  <H3> Sunset </H3> 
  <IMG SRC="Sunset.JPG" Width="150" Height="100" Border="2" ALT="Unable to Display Image">
  
  </BODY>
  
</HTML>

Assuming file sunset.jpg resides in the directory where you have created the HTML file. Otherwise, you will get the message Unable to Display Image.

7. Align Images

One can align the image either

1. Inline Message Image

The image that we are inserted is basically referred to as an inline image. Thus, Inline Images are those that are displayed along with the page itself. When the inline image is inserted in a document along with text then by default the text is aligned with the bottom of the image. One can change this default alignment using one of the following values for attribute ALIGN.

  1. ALIGN = “TOP”:- Align the top of the image with the top line of the message (Text). 
  2. ALIGN = “MIDDLE”:- Align the middle of the image with the middle line of the message (Text).
  3. ALIGN = “BOTTOM”:- Align the bottom of the image with the bottom line of the message (Text).

The drawback of the inline image is that when the image is larger in size then the line becomes very tall and includes various lots of white space automatically.

  • TOP ALIGN
  • MIDDLE ALIGN
  • BOTTOM ALIGN

Example Alignment with inline Images

<HTML>

 <HEAD> <TITLE> Alignment with Image </TITLE> </HEAD> 

  <BODY>
    
    <P>
      <IMG SRC="Sunset.JPG" ALIGN="TOP" WIDTH="100" HEIGHT="100" BORDER="2" ALT="Unable to Display Image">
      This text is aligned with the <u> Top </u> of the image. 
    </P> 
      
    <P>
      <IMG SRC="Sunset.JPG" ALIGN="MIDDLE" WIDTH="100" HEIGHT="100" BORDER="2" ALT="Unable to Display Image"> 
      This text is aligned with the <u> Middle </u> of the image.
    </P>
    
    <IMG SRC="Sunset.JPG" ALIGN="BOTTOM" WIDTH="100" HEIGHT="100" BORDER="2" ALT="Unable to Display Image">
    This text is aligned with the W Bottom /u> of the image.
    
  </BODY> 
    
 </HTML>

2. Floating Image

There are many situations on Web pages where you have an image that you’d like to appear inside the text with the text flowing around it. For example, in print-based publication, it’s common for text to flow around images. There is nothing particular we need to do in our HTML to achieve this effect. Simply we have to one of the following attribute values for the ALIGN attributes,

a) ALIGN=”LEFT”: Will causes the images to be placed on the left side and text that is appearing on right will wrap around the image.

b) ALIGN=”RIGHT”: This Will cause the images to be placed on the right side and text that is appearing on left will wrap around the image.

Demonstration of Floating Image

<HTML>

 <HEAD> <TITLE> Demo of Floating Image </TITLE> </HEAD> 

  <BODY> 
  
  <IMG SRC="Sunset.JPG" HEIGHT="100" ALIGN="LEFT" ALT="Picture Path is not Correct "> 
  
  </BODY>
  
</HTML>

Images in a web page make it more attractive as pictures are worth thousands of words. One can create an image hyperlink. One can add graphs, images, charts as images in HTML documents either to improve its appearance to present important information. One can create an image using tools such as Paint Brush, Gif Constructor, or Adobe Photoshop, etc. Most Image files are composed of pixels. The pixels that constitute an image are ordered as a grid (columns and rows), each pixel consists of numbers representing magnitudes of brightness and color. Loading images take time, so use images carefully.

9. Image as Hyperlink

You could use your image as a hyperlink to another document. To make an image into a clickable hyperlink, simply replace the hyperlink text with some HTML image code. Images can have a relative path (/images/sample-image.gif), or they can have an absolute path (http://hyperlinkcode.com/images/sample-image.gif). It is very easy to create a hyperlink from an image. To do this all you have to do is use the anchor tag </A> with the <IMG> tag.

Steps for creating Image link

1) Include the image you want to hyperlink within the IMG tag with attributes SRC. One may change the height and give a border to the Image using the attribute HEIGHT, BORDER 

2) Include an IMG tag within Anchor tag <A> to create a link. Thus image becomes a hotspot to link.

For example- <A HREF=”home.html”><IMG SRC=” Sunset.JPG”></A> To create a border around your image when linked, use the ‘border’ attribute, specifying the size of the border. For example, type border=”2″ in the <IMG> tag. a

If you don’t provide the ‘border’ attribute, some browsers will automatically display a border around the image.

Demonstration of Image Hyperlink

<HTML> 

 <HEAD> <TITLE> Demo of Image Hyperlink </TITLE> </HEAD> 

  <BODY>
    
    <A HREF="image1.html"> Sunset Image <IMG SRC="Sunset.JPG" HEIGHT="60" ALIGN="LEFT" alt="Picture path is not correct "></A>
    Images in a web page make are more attractive as pictures are worth than thousand of words. One can create an image hyperlink. 
    One can add graphs, images, charts as images in HTML documents either to improve its appearance to present important information. 
    Click on the picture, it will load the image1.html file. Assume it is already created and stored in your current directory"
      
  </BODY> 
  
</HTML>

Sunset Image Images in a web page make it more attractive as pictures are worth thousands of words. One can create an image hyperlink One can add graphs, images, charts as images in HTML documents either to improve their appearance to present important information. Click on Picture, It will load the image1 Html file. Assume it is already created and stored in your current directory”

10. Image Link Code to Thumbnails

You can link to a larger version of an image. When you do this, the smaller image is usually referred to as a “thumbnail” or “thumbnail image”. When using thumbnails, it’s best to resize the image using an image editor. This means you should have two images, one a full-sized image, and one (smaller thumbnail image with a different file name than the original larger image

The advantage of thumbnails is the small file size. This helps to reduce bandwidth costs on high traffic sites and reduce loading image time,

Code for Creating Thumbnails

<HTML>
  
 <HEAD> <TITLE> Demo of Thumbnails </TITLE> </HEAD> 
 
 <BODY>
   
  <A HREF="image1.html"> Thumbnails Image <IMG SRC="COPY_ SUNSET.JPG" ALIGN="LEFT" alt="Picture path is not correct "> </A> 
    
 </BODY>
   
</HTML>

On clicking the image, it will open the image1.html file which contains the actual picture. <!– Coding of image1.html

<HTML> 

 <HEAD>
  
  <TITLE> Image in HTML</TITLE> 
 
 </HEAD> 
  
 <BODY>
 
 <IMG SRC="Sunset.JPG" ALIGN="MIDDLE" BORDER="2"> 
 
 </BODY>
 
</HTML>

11. Image List

Instead of creating a list using either bullet or numbers, one can also generate the image list and known as image bullet by including <IMG> tag within tag <DL>. It will enhance the list by means of pictures.

Demo of Image Bullet

<HTML>
 
 <HEAD> <TITLE> Demo of Image List </TITLE> </HEAD> 

  <BODY>
  
   <H3> Image List </H3> <DL>
  
    <DD> <IMG SRC="computer.gif" ALT="*"> List Item 1 
    <DD> <IMG SRC="computer.gif" ALT="*"> List Item 2
    <DD> <IMG SRC="computer.gif" ALT="*"> List Item 3 </DL> Demo of India

  </BODY>

<HTML>

Demonstrate the usage of the image files with the below-given Specification. a. b. The size of the image is 400*400 pixels. C. The image should contain a border.

<HTML> 

 <HEAD>
   
  <TITLE> IMAGE IN HTML</TITLE> 
  
 </HEAD> 
 
  <BODY BGCOLOR='GREEN> 

  <H3>Pengunis</H3>
    
  <IMG SRC="C:\Users\Public\Pictures! Penaunis Sample Pictures Penguins.JPG"
  Width="200"
  Height="200"
  Border="4"
  ALT="Unable to Display Image"> 
 
  </BODY>
 
</HTML>

12. Image Map

  • It is a single image that consists of a number of hyperlinks incorporated within the image.
  • Image maps are images on a web page that include links known as hotspots that are used to navigate from one web page or website to another.
  • A hotspot is an area on an image that contains a hyperlink.
  • For example, in a map of Maharashtra state which has many cities, if one wishes to view the detailed information of Nagpur city then one must know the coordinates of Nagpur area city within the map in order to link to Nagpur city document file and this concept is known as Image Map i.e. dividing images into many parts via coordinates.

12.1 Components of Image Map

An image map consists of three components:

1) Image

The image is inserted into a web page to create an image map. The image should be divisible into sections so that each section opens other interconnected web pages containing the corresponding information.

2) Hotspots

The areas on which the links are created you can define hotspots in three shapes: 

  1. Circle 
  2. Rectangle
  3. Polygon.

3) Co-ordinates

Define the area on which the link will be created. You can find the coordinates of an image with the image editor or with simple mathematical calculations. Co-ordinates need to be defined for each of the following shapes:

a) Rectangle: You need to define any two diagonally opposite points. 

Syntax : <AREA SHAPE=”RECTANGLE” COORDS=”X1,Y1,X2, Y2″ HREF=”URL”>

b) Circle: You need to define the center and radius of the circle.

Syntax <AREA SHAPE=”CIRCLE” COORDS=”X1,Y1,R” HREF=”URL”>

c) Polygon: You need to define each point of the image.

Syntax: <AREA SHAPE=”POLYGON” CO-ORDS=”X1,Y1,X2,Y2—–,XN, YN” HREF=”URL”>

12.2 Categories of Image Map

Based on where data is stored and who interprets the data, there are two categories of image maps:

1) Client-Site Maps

The data of the client site map is stored in HTML files. The web browser interprets the coding of client-site maps when an end-user clicks an image map on the client-site, the end-user receives the information.

2) Server-Site Maps

A server-site image map requires a CGI script. The web server interprets the coding of server-side image maps. When an end-user clicks an image map, the web-server does the required processing and determines the source of the link.

12.3 Tags used for Image Map

The following two tags are used to define Image Map

1) <MAP> tag is used to define client-site <MAP NAME=”MAP NAME”>

image map

2) <AREA> tag specifies the geometric regions of a client-site map and the associated link. For example,

<AREA SHAPE=RECT COORDS=”253,35,299,65″ HREF=”Nagpur.htm” ALT= “NAGPUR CITY”>

<MAP>

3) The NAME=”MAP_NAME” associates a name with a map. This attribute is used by usemap attribute of then <IMG> tag to refer to the map.

<IMG SRC=”MAHARASTRA.JPG” BORDER=2 USEMAP=”#MAP NAME”>

13. MARQUEE Image

Like text, one can also scroll images on the web page. One must include <IMG> tag within <MARQUEE> and </MARQUEE> tag for this purpose. The selected image which is highlighted will scroll the image from right to left and vice versa. Some web browser does not support these features.

Syntax: <MARQUEE> <IMG SRC “URL”> </MARQUEE>

Demonstration of Scrolling Image Using Marquee

<HTML>

  <HEAD> <TITLE> DEMO OF MARQUEE IMAGE </TITLE> </HEAD> 
  
   <BODY> 
  
   <MARQUEE ALIGN="TOP" DIRECTION="RIGHT" SCROLLDELAY="100">
   <IMG SRC = "SUNSET.JPG" HEIGHT = "50">
   
   <MARQUEE>
   Moving Image 
  
   </BODY>
   
</HTML>

13. Embedding Images in HTML

  • Images make a web page more attractive but at the same time, they also cost storage space. More the image web page content will take more time to load. So be careful while designing your web page especially if you would like to put images.
  • One can load pre-image or can include self-created images using various image software. Depending upon the place of images, images for the web fall into two main categories.

13.1 Inline Images

Inline Images are those that are displayed along with the page itself. They are displayed to you automatically with the text of the page. Inline images are stored in a local computer in a specific directory. Inline images can be viewed if you have a graphical browser and the view image option is selected. In order to include an inline image use the following syntax

Syntax <IMG SRC=”image.gif”>

If your image is in a different directory say picture then the tag will be like the following example

<IMG SRC=”Picture/sunset.jpg”>

13.2 External Images

  • External Images on the other hand are displayed on the page only if the viewer wants to load them. They are stored on a separate web page and can be viewed only if the user wants to view that link.
  • We need External Images in the case where you have a large image and of a format other than GIF or JPG and want the user to view it only if he is really interested so to achieve this you need to provide a link to the page.
  • For example in situations where your content involves the use of maps, complex diagram. The following image formats can be GIF, JPEG, BMP, and PNG. Creating links to these image formats is very simple.
  • <A HREF=”www.quessing.com/runners.jpg”> View External Image</A>

13.3 Difference between Inline Image and External Image

Sr. No.Inline/Internal ImageExternal Image
1)It refers to an image that is stored on a local computer.It refers to an image that is stored on a remote computer.
2)Inline Images are those that are displayed along with the page itself.It must be exclusively loaded after the HTML page is loaded.
3)It is loaded quickly.It takes some time to load.
4)Generally, load images have format. GIF or. JPGIt usually follows the relative path of the image file to be loaded.
5)One can load recent types of image formats like. PNGOne must specify the absolute path of the image to be loaded.

Share:

Leave a Reply