Adding an image in any part within an HTML is as simple as wrapping text in <p> and </p> tags. The label used to insert images in the HTML documents: <img> tag. It’s an empty tag and contains attributes only, that tag consists of a single instruction, and so </img> does not exist, and their use is prohibited. We can insert an image within <body>…</body> tag as if it were a word of it and displayed by the browser after the text. The src attribute used to add the image source, i.e., URL of this image. The alt attribute is for adding alternative text, width for adding width, and height for adding this image’s height.
It can seem that we have inserted an arrow in mid-sentence, and after the image, we continued to write. Although we can create this effect with images of all sizes, it is not recommended to have a height much greater than the text.
To insert an image in HTML, we need to have it in a separate file. There are many formats to store an image in a file: BMP, GIF, JPEG, XPM, XBM, PNG, TIFF, etc. each of which have characteristics. The selected format on the World Wide Web is the GIF format that distinguishes your files because they have the “. gif”. We could say that all browsers are capable of showing the images in this format. Text-based browsers often provide methods to view pictures using any external viewer program.
A second format that has been introduced in the WWW and supported by most browsers (including the Explorer and Navigator) is JPEG. This format is especially useful for pictures and can compress this type of image, so they take up to 4 times less than the GIF format images. The files that contain photos JPEG format have the extension “. jpg”.
To add an image to an HTML document, you need to include the <img> tag concerning the desired image. The <img> tag is an empty element i.e., it does not require a closing tag, and you can use it to include small icons to large Images. The syntax of the <img> tag can be given below:
Syntax: <img src=“dog.jpg” alt=“alternative text”>
Every image needs to carry at least two attributes: the src attribute and an alt attribute.
Src: The letters “src” stand for “source”. It defines the URL of the image. It identifies the specific image to use with its type, i.e., it not only specifies what image; it also specifies the URL of the image file. The commonly used image file types are GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group).
Alt: The “alt” attribute stands for “alternative”. Whereas, the alt attribute gives a text description of the image inserted. This attribute is useful in text-only browsers, where images turned off to load files faster. With this attribute, visitors will get the image’s text description if it cannot be displayed for some reason.
For graphical browsers (Internet Explorer, Netscape Navigator, etc.), the alternative text appears as the pop-up text i.e., whenever the visitor hovers the mouse over the image, the alternative text appears within a rectangular box. The following lines of code describe how to include an image with alternative text on a web page.
We’ll be covering the following topics in this tutorial:
Various Attributes Used With <img> Tag
Setting the Width and Height of an Image
Height and Width: These attributes are used to set the dimensions of an image. The values of these attributes are interpreted in pixels by default. The value from 1 to 100 percent. You are specifying dimensions of an image decrease the loading time and improve the overall appearance of the page. You first decide the image size, which will be most appropriate for your web page, and then include that image.
In most of the browsers, these attributes get precedence over the actual image size. When a browser starts loading a page, it first notes these attributes and leaves that much space for the image before it displays the remaining text. Ultimately it goes back and fills in the image.
In the absence of these attributes, the browser first loads enough of the image to know how much space that image requires, and tell then the rest of the page might not be displayed. To specify the dimensions to make your page load faster because it becomes easier for the browser.
Syntax: <img src="/images/dogs.jpg" height="pixels" width="pixels">Another use of “height” and “width” attributes would be to size images. It is rarely a good idea, as the image may end up distorted. One way to avoid distortion is to shrink images proportionally. Shrinking the image with these attributes does not affect the file size while resizing the image beforehand will shrink the file and reduce the download time. However, these are two drawbacks to specifying the “height” and “width”.
• These are presentational attributes. So they ideally belong in a style sheet instead of in your <img> tag.
• If you have a small image and specify its height and width, the Navigator and Internet Explorer, won’t fit the alternate text inside the small image box for those users not displaying images.
The speed advantage of setting the “width” & “height” attributes may out weight the two drawbacks, especially if you are not using small images with a lot of alternate text.
You might also use the style attribute to define width and height for those images. It prevents style sheets from altering the image size unintentionally since the inline style has the maximum priority.
Align: HTML provides another appearance attribute called the “align” attribute using which you can position your image on the web page. This attribute offers both horizontal and vertical alignment options. It can take any of the five values left, right, top, middle, and bottom.
Syntax: <img src=“url” align=“left | right | top | middle | bottom”>
Horizontal Alignment: Horizontally image can align to the left or right of the window.
Left: Images by default align to the left, with any text following the image appearing on the same line. However, if the text is long, then it wraps to the bottom of the image. Specifying align = “left” forces the image to the current left margin and any accompanying text appears on the same line around the image’s right margin. Its interpretations also depend on whether any images or other material with left alignment appear earlier or not. In that case, former material will get preference, and later image will appear on the former one’s right. Any text preceding the image forces it to appear on the next line.
Right: It is similar to left except that image is forced to the right margin, and any accompanying text appears on the same line around the image’s left margin. In the following example, you will see how the “to align” attribute works. Here the same image is included thrice to show you all the possible horizontal alignments.
As you can see in the output, the first image has default alignment, which forces the long surrounding text to appear at the bottom of the image, whereas specifying the alignment lets the surrounding text appear beside the image.
Vertical Alignment: Vertically image can align to the top, middle, and bottom of the window.
Top: Aligns the top of the image with the top of the current text, and the remainder of the image hangs below the text line.
Middle: Aligns the vertical mid-line of the image to the current baseline of the surrounding text.
Bottom: This is the default vertical alignment that aligns the bottom of the image with the accompanying text’s baseline. The remainder of the image remains higher than the surrounding text setting.
3. Border: By default, no border appears around an image unless that image is a link. However, you can specify a border for an image using the “border attribute in <img> tag.
Syntax: <img src=“url” border=“pixels”>
The width of the border is specified in pixels. If you use the border = “1” attribute in <img> tag, then a thin border will appear around the image. Also, you can increase the border width by increasing the value in the border attribute.You can hide the border by specifying border =” 0″ to the <img> tag.
To add a border to the image, simply add this attribute in <img> tag.
Syntax: <img src=“d:\dog.jpg” alt=“A dog sitting on the grass” border=“10”>
An image’s border width does not count towards determining. an image’s height or width. So if you specify an image to be 100pixels wide (width = “100”) and have a border width of 10 (Border=” 10″) then the image will take 120 pixels of horizontal space (because the border appears on both the left and right sides of the image).
The image will also take a few pixels more than 120 because browsers will put a small amount of space between an image and text. The amount of space allocated is determined by the HSpace and VSpace attributes.
4. VSpace and HSpace: Internet Explorer and Navigator do not place images right next to the text. Instead, they put a small margin of a few pixels in between text and an image. You can control the amount of horizontal space with the HSPACE attribute and the vertical space with the VSpace attribute.
These spaces also referred to as white space. White space doesn’t need to be white; it just means space has color, which depends on the background. Including white space around images makes the page’s overall appearance better.
Syntax: <img src=“drl” hspace=“pixels”vspace=“pixels”>
The “HSpace” attribute used to insert a buffer of horizontal space on the left and right of an image while the “VSpace” attribute is used to insert a buffer of vertical space between the top and bottom of the image and other objects.
The value of both attributes should be a positive number of pixels. Simultaneously, under some browsers, it may be possible to set the attribute values to percentage values. It is inadvisable because very high values may produce strange results. By default, these attribute values are small, non-zero numbers, which provide just enough space to keep the surrounding text away from the image.
As you can see, there is a text written before the <img> tag, and it forces the image to appear in a new line. Specifying white space keeps the surrounding text away from the image.
Using the HTML5 Picture Element
Scaling an image up or down to match various devices (or display sizes) does not function as expected. Additionally, reducing the image dimension using the width and height attribute or property does not lower the initial file size. To tackle these issues, HTML5 has introduced the <picture> tag, which lets you specify several images to target unique devices.
The <picture> element includes zero or more <source> elements, each referring to different image source, and one <img> element at the end. Additionally, each <source> element has the media attribute, which defines a media requirement (similar to the media query) that can be utilized by the browser to determine when a specific source should use. Let us try an illustration:
<picture> <source media="(min-width: 1040px)" src set="smalllogo.png"> <source media="(max-width: 800px)" src set="mainlogo.png"> <img src="logo.png" alt="website logo"> </picture>
Working with Image Maps
An image map permits you to specify hotspots within an image that behaves exactly like a hyperlink.
The simple idea behind making image map is to present a simple means of linking a variety of sections of an image without breaking it into different image files. For example, a map of the planet could have every country hyperlinked to additional information relating to this country.
Let’s try out a simple example to understand how it actually works:
<img src="objects.png" usemap="#objects" alt="Objects">
<map name="objects">
<area shape="circle" coords="100,291,71" href="india.html" alt="India">
<area shape="poly" coords="312,136,233,302,412,380" href="russia.html" alt="Russia">
<area shape="rect" coords="510,170,681,322" href="canada.html" alt="Canada">
</map>
The title attribute of this <map> tag is used to mention the map in the <img> tag with its usemap attribute. The <area>tag is used within the <map> element to specify the clickable areas within an image. You may specify some of clickable areas in an image.
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular