Images


Images or pictures no doubt bring live and beauty to web experience, so we will be learning how to add pictures or images into our web page.

Images in your web page
First the name of the image file is welcome.jpg the image file type or extension common with website includes .JPG or JPEG, .GIF and .BMP If you are using a graphics application such as Photoshop or Fireworks (we will cover Fireworks letter in this book) It is expected to optimize your image to suit web environment. This means that you should not only have a quality picture or graphics but also ensure that the pictures size and attribute is best for website.


Welcome.jpg

For example when I took the photo shot of this artwork using my mobile phone the width / height is about 1200 by 1000px (pixels) making the size to be about 3MB, which is above 3000KB (if converted to kilobyte), because 1MB(MegaByte) is equivalent to 1024KB(KiloByte). Before I optimize it using Fireworks by reduce its width / height to 500 by 375PX makings its size to be 64.1KB; what this means is that you should not be tempted to snap and use a picture without watching its size, if the image size is big it will cause the web page to load slowly because the downloading time will be much and one thing that website visitors don’t like is to wait for a page to load, beside this will also consume more byte (which means money) from those browsing your website using a mobile phone. So by optimizing the picture the image will load faster.
Now we will learn how to add an image to a web page using the <IMG> tag,
I advice you put your images inside a separate folder on your website, so that it is separated from web pages. For this example I have my picture in folder name “image” inside my website; shown below is a collapse or tree view of what I have in Dreamweaver.



Then I specify the picture path; that is, the folder “images” a slash then the name of the picture “welcome.jpg” as we have below.
<HTML>
<HEAD>
<TITLE> Bengallery Info. Tech. </TITLE>
</HEAD>
<BODY>
<B>This is an image :</B>
<BR />
<IMG SRC="images/welcome.jpg">
</BODY>
</HTML>

The preview


You can use the WIDTH and HEIGHT attribute the alter the size of your images on the webpage, however this does not have effect of the physical picture or image file, as this attributes only have effect on the web front only.
The example below shows how I change the WIDTH and HEIGHT of the picture in the second <IMG> tag.

<BODY>
<B>This is an image :</B>
<BR />
<IMG SRC="images/welcome.jpg">
<BR /><BR />
Below image size is adjusted
<BR />
<IMG SRC="images/welcome.jpg" WIDTH=300 HEIGHT=100>
</BODY>

The preview


It’s quite common that when you set the WIDTH and HEIGHT of image it may appear distorted, (as we have in the second picture, above) because both sides are not adjusted proportionally.
If you are facing this kind of challenge I will advise you to set only the WIDTH or only the HEIGHT, for the second image I remove the HEIGHT attribute leaving only WIDTH to achieve a balance proportion.

...
Below image size is adjusted
<BR />
<IMG SRC="images/welcome.jpg" WIDTH=300>
</BODY>

See the preview (Now), compare to the former (Before)

 

Alignment for images
You can align image in your web page by inclosing it in a paragraph that aligned, then you set the paragraph to align to left, right or center, although <IMG> has a ALIGN attribute, but I don’t found it as flexible as paragraph alignment. For example below I align the second image (along with its heading text) to the center using a paragraph.

<BODY>
<B>This is an image :</B>
<BR />
<IMG SRC="images/welcome.jpg" align="middle">
<BR />
<BR />
<P ALIGN="CENTER">
Below image size is adjusted
<BR />
<IMG SRC="images/welcome.jpg" WIDTH=300>
</P>
</BODY>


The preview

 

Alternative text for images
According to W3C standard every image in your web page should have an alternative text; in order to conform to the accessibility standard for people with disability, most especially the visually impaired, surfing your web page with a text reading device; beside some web surfers may turn off images support on their browser, In order to carry this set of users along, the alternative text of an image on your web page will appear in the place in the place of the picture so this users can read or hear the text equivalent of the picture.
To add the alternative text, just add an ALT parameter to <IMG> tag. Below I added an ALT text to the second image from our last project.
...
<P ALIGN="CENTER">
Below image size is adjusted
<BR />
<IMG SRC="images/welcom.jpg" WIDTH=300 ALT="The second art picture">
</P>
</BODY>

 

When you do this it may not have any visible effect on the picture, but the benefit of the ALT text is that it can appear as a tooltip in a browser such as Microsoft Internet Explorer, when you move your mouse pointer to it, and wait. See the screenshot below

The ALT text appears can also appear whenever the image or picture is unable to load, either due to bad internet connect connection, browser image is turn off, mistake in the image name or path (as I purposely did here by changing the name of the picture from welcome.jpg to welcom.jpg ) or when the picture is not available.
See the preview in Internet Explorer. Note it may appear quite differently in other browsers.


Accessing Image from different locations
In the last image examples, the image file or picture is residing in an images folder in the same folder where the html file is located. What If our image file resides in another directory outside or website (although this is not advisable), but in case we found ourselves here, then we must specify the full relational path or a complete URL to where the image is located, for example the line of code below specify how I reference an image in My Document of my computer
<IMG SRC="file:///C:/Users/USER/Documents/music_and_color.jpg">



Please note also that I use underscore instead of space in the image name “music_and_color.jpg” rather than “music and color.jpg” it is advisable to name this file this way so as not to create confusion.

 

Similarly you can reference an image from another website if you know the correct address or path to that image on that website. For example

<IMG SRC="http://bengallery.net/asset/bengallery_logo.jpg">
 This will map to my logo on Bengallery.net

What if your webpage is in another folder for example “user” and you need to access the picture in the "images" folder, (both within your website)? See the illustrated structure below


You add the picture to the webpage, by referencing the path using the directory or folder mapping “../” see the line of code below.   
<IMG SRC="../images/welcome.jpg" align="middle">

Likewise, the more subdirectory or subfolder we have the more mapping; for example if index.html, is in two subdirectory down, for example user/manager/index.html. As we have in the screenshot below.



Then we have to access the images from the user/manager/index.html using the line below.
<IMG SRC="../../images/welcome.jpg" align="middle">

For now I believe we have covered some reasonable amount of image attributes and access, so we will be looking at table next.

 

Next »


Creating webpage with HTML »

META Data »

Background colour »

HTML Versions »

Setting up a website »

Break Line, paragraph and alignment »

Special character, bold, italics, underline and marquee »

Text Formatting »

Listing items and Horizontal rule »

Images »

Tables »

Hyperlink »

Form »