Adding Images Using the <img>

Element
Images are added to a site using the <img> element, which must carry at least
two attributes: the src attribute, indicating the source of the image, and an alt
attribute, which provides a description of the image.
For example, the following line would add the image called logo.gif into the
page (in this case, the image lives in a directory called images).
<img src="logo.gif" alt="Wrox logo" >
In addition to carrying all the universal attributes, the <img> element can carry the following

Attributes

src alt height width ismap usemap

The src Attribute

The src attribute tells the browser where to find the image. The value is a URL.

the URL can be an absolute URL or a relative URL.

Generally speaking, images for your site should always reside on your server or on another server

you control. It is not good practice to link to images on other sites because if the owner of the other

site decides to move that image, your users will no longer see the image. Because the images are on
your server, rather than being an absolute URL, the value is more likely to be a relative URL that uses
the same shorthand notations.

Most web page authors create a separate directory (or folder) in the website for images. If you have

a large site, you might even create different folders for different types of images. For example, you

might keep any images used in the design of the interface (such as logos or buttons) separate from

images used in the content of the site.

The alt Attribute

The alt attribute should appear on every <img> element and its value should be a text description of

the image. <img src="logo.gif" alt="Wrox logo" >

Often referred to as alt text, the value of this attribute should describe the image because of the

following:
 ➢ If the browser cannot display the image, this text alternative is shown instead.
➢ Web users with visual impairments often use software called a screen reader to read a page
to them, in which case the alt text describes the image they cannot see.
➢ Although search engines are clever, they cannot yet describe or index the contents of an
image; therefore, providing a text alternative helps search engines index your pages and
helps visitors find your site.
Sometimes images do not convey any information and are used only to enhance the layout
of the page. (For example, you might have an image that is just a decorative element and
does not add any information to the page.) In such a case, the alt attribute should still be
used but given no value, as follows:
<img src="stripy_page_divider.gif" alt="" >

The height and width Attributes

The height and width attributes specify the height and width of the image, and the values for these

attributes are almost always shown in pixels.

<img src="logo.gif" alt="Wrox Logo" height="120" width="180" >

Technically, the values of these attributes can be a percentage of the browser screen. Or if the image

is inside an element that takes up only part of the page, known as a containing element, it would be
a percentage of the containing element. If you do use a percentage, the number will be followed by a

percent sign, but for most web pages this is rare, and showing an image at any size other than the
size at which it was created can result in a distorted or fuzzy image. Specifying the size of the image is
considered good practice, so you should try to use these attributes

on any image that you put on your pages. It also helps a page to load faster and more smoothly
because the browser knows how much space to allocate to the image, and it can correctly render the
rest of the page while the image is still loading.

Also, if for some reason the image doesn’t load, you’ll also have the browser draw an empty box of
the given height and width with the alt text within it

Although you can tell the browser to display images smaller or larger than they actually are (by
telling the browser that the width and height are different from what they actually are), you should
avoid doing this because your image will not be as clear. Rather, you should aim to create versions of
images at the same size that you will use them on your web pages. Programs such as Photoshop,
Photoshop Elements, Paint Shop Pro, or GIMP can help you do this.

It is also important not to use images bigger than they are shown on screen (for example, you should
not use an image 800 pixels by 800 pixels if you will show it only at 100 pixels by 100 pixels on the
screen) because the smaller an image, the smaller the size of the file (in terms of kilobytes). And the
smaller the file size, the quicker the image loads in the browser. Also, for putting your site on the web
for others to see, it might save you money because you are often charged in relation to the total size
of all the files you send to the people who visit your site.

Likewise, it is important not to show images larger than they actually are. If you have a small image
(say, 100 pixels by 100 pixels) and try to display it much larger (say, 300 pixels by 300 pixels) it will
appear grainy
Although it is not a good idea to do so, if you just specify the height or width attribute and leave out

the other one, your browser will show the image to scale. Assume for a moment that you have an
image that is 200 pixels wide by 100 pixels tall. If you just specify the width of the image as 200
pixels, it would try to show the image at its correct size: 200 pixels wide by 100 pixels tall. However, if
you said that the image was 100 pixels wide and did not specify the height, the browser would try to
make the image 50 pixels tall. Because it is 50 percent the width of the original image, it would
display the image at 50 percent of its height. In other words, it maintains the aspect ratio of an image
(its width divided by its height).

You could even distort images by providing a different width in relation to height

Adding Images to a Web Page

In this example, you add some images to the café example. You add a logo for the café and also a
picture of the special brunch offer. So, open the homepage in a text editor or web page authoring
tool and

follow these steps:

1. Replace the <h1> heading with the logo.gif in the images folder of the sample application.

<img src="images/logo.gif" alt="example café logo" width="194" height="80" >

2. The src attribute indicates the URL for the image. The URLs in this example are all relative URLs

pointing to an images directory inside the folder that the example page is in.

3. Add the following after the navigation and before the <h2> element:

<img src="images/scrambled_eggs.jpg" width="622" height="370" alt="Photo of

scrambled eggs on an English muffin" >

4. The width and height attributes tell the browser how big the image should be displayed.

The image element is referred to as a replaced element. Replaced elements are HTML elements
whose content is provided by another resource, in this case the scrambled_eggs.jpg referenced in
the src attribute. This image has intrinsic properties including height, width, and aspect ratio. This is
why you can supply only one or none of the dimensions, and the browser can figure out the rest by
itself, according the image the proper space within the layout. Here you provide those dimensions to
help the browser render more efficiently, but it’s not necessary because of the nature of replaced
elements.

Using Images as Links

It’s easy to turn an image into a link. Rather than putting text between the opening <a> tag and the

closing </a> tag

you simply place an image inside these tags. Images are often used to create graphical buttons or
links to other pages, as follows

<a href="http://www.wrox.com">

<img src="images/wrox_logo.gif" alt="Wrox logo"

width="338" height ="79" >

</a>

Or you cant try:

<a href="aboutus.html">abouts us

<img src="yeah.jpg" alt="man raising hand"

width="338" height ="79" >

</a>

Choosing the Right Image Format

Images and graphics can bring your site to life, but you must learn how to prepare images for the
web. Otherwise, they can significantly increase the time it takes for a page to load.

When writing sites on your desktop or laptop computer, you may not realize how long a page will
take to load; files that are sitting on your computer will load a lot faster than they would if they were
on the Internet. Therefore, choosing the right image format and saving your images correctly can
ensure that your site will not load unnecessarily slow—and this should result in happier visitors.

Most static images on the web are classified as bitmapped images. Bitmapped images divide a
picture into a grid of pixels and specify the colour of each pixel individually. If you look closely at your
computer screen, you might see the pixels that make up the screen. There are several different
bitmap formats; common ones include JPEG, GIF, TIFF, PNG, and the rather confusingly named
bitmap or BMP.

The more pixels or dots per inch an image contains, the larger the size (in KB) of the file, and the
larger the file, the longer it takes to transfer over the web. Therefore, any images that you use on the
web should be saved at a resolution of 72 dots per inch.

Browsers tend to support three common bitmap graphics formats, and most graphics programs save
images in these formats:

➢ GIF: Graphics Interchange Format (pronounced either “gif” or “jif”)

➢ JPEG: Joint Photographic Experts Group (pronounced “jay-peg”)
➢ PNG: Portable Network Graphics (pronounced “pee-en-gee” or “ping”)