Images increase the loading time for your webpages, and depending on who your visitors are, you might lose the impatient ones. Having said that, we must remember that images bring websites to life, and desirable if used sparingly and also optimized for the web. Take a look at the background on this page. I have used a background image at the edges. But believe it of not, here is the tiny image i used

Objectives - Having read through this tutorial you should be able to:

• optimize images for the web
  • crop
  • resize
  • use proper resolution
  • use online image optimizers
  • decide on gif or jpg
• insert images
• form hyperlinks using images
• align images properly
• wrap text around images
• create image maps

Image size is a very important factor when it comes to how quickly your webpage loads. So try to put any ideas into practice that help you cut down on the size of your image, while still giving you a decent image quality. To work on an image, you will need an image editing software. My favorite is Photoshop. Unfortunately, it is not cheap. Several free image editing programs exist however. I did a search on the net and below are some of the free programs I found.

Free Image Editing Programs
Name	Description
A Square Image 1.0	Reduce, crop, edit, and create images. OS: Windows 95/98/NT
ImageForge (Basic Edition)	Powerful image editing with paint, scan, AVI animator, image Library album-maker, etc.
Photo Studio	Customizable tools let you edit, retouch and enhance your photos. Works with many file types.
Photo wizard	Crop and size your pictures. Enhance the colors, the brightness, remove "red eye", and more.
Paint Shop Pro	Paint Shop Pro 3 is a graphics program for image creation, viewing and manipulation. It features tools for image editing and color adjustment. This fully functional trial version expires in 30 days.
Adobe Photoshop (demo version)	Graphic designers, Webmasters, and photographers can create original artwork, correct color, retouch and composite scanned images, and prepare professional-quality separations and electronic output with more flexibility than ever before. This demo version will not save or print files.
LView Pro	LView Pro enables you to create images from scratch or edit existing image files.

Download and install one of the programs and let's go...

We will be using Photoshop in this tutorial, but based on what you learn here, you should have no problem figuring out your own program, especially since we only need the programs for basic image editing.

Cropping

Before cropping		After cropping

• Open your image editing program, then use it to open the butterfly image you saved earlier (File/Open).
• Click on the Marquee Tool (see the image below). If you don't see the Tool Bar, from the menu click on Window, then Show Tools.
  
• Next, on the Options window (if you don't see the Options window, bring it up with Window/Show Options), choose Rectangular for Shape and Normal for Style.
  
• Place your cursor at the top left hand edge of the picture (from 90° angle), this will be at the border of the green and white colors. Press and hold your left mouse button, then scroll down and to the right until you get to the bottom right border. Release the mouse button. This can be tricky for a first-timer, so if you don't get it right the first time, don't worry, just keep trying till you master it.
• You should now see marching ants around your selection area, as the image below shows.

  

• Now from the menu, click on Image/Crop. Repeat the process if you did not get all the green borders the first time. When you're happy with the result, save the cropped image (File/Save).
• Done!

Resizing

Before resizing		After resizing

1. Open the image you cropped earlier.
2. Whenever you're resizing an image, always convert it to RGB mode first. Image/Mode/RGB Color...
3. Click on Image/Image Size...
4. On the new window that pops up, make sure there are check marks in Constrain Proportions and Resample Image. That ensures that the width and the height are resized proportionately.
5. Under Pixel Dimesions:, reduce the width by 5. You don't need to bother about the height, since it gets adjusted automatically. Repeat steps 2 to 4 and continue reducing in steps of 5 until you are happy with the result. You're probably wondering why we don't just reduce the image to the size we want in a single step. Well the reason is that you get a better looking image when you do it in little steps.
6. Convert the image back to Indexed Color (Image/Mode/Indexed Color...).
7. Save your final image.
8. Done!

Resolution

Each subsequent image from left to right is a cut from the previous image. As you can see, as we zoom in, little squares begin to appear. The last image on the right shows the squares well. Each square is what is called a pixel. A real life analogy will be that pixel is to images what cell is to living things. The number of those squares within an inch measures the image resolution. The images on this webpage are 72 pixels/inch.

When optimizing your images for the web, you must make sure that the resolution is not too high, because that increases the image size a whole lot. In general, a resolution of 72 pixels/inch is standard for web images. You can find out the resolution of an image by clicking on Image/Image Size...

Online Image Optimizers

Gif or Jpg?

Return to top

How To Add Images To Your Page

Everything is about tags in HTML. So to add images, you already know we need some kind of tag right? Right... The tag is

<img src="name_of_image">

You just need to replace name_of_image with the real name of your image, and the image will appear at the point within your body tag.

The image tag above will do the job fine, but there are certain additions you have to make to it to bring it up to standard.

Width and Height

<img src="name_of_image" width="xx" height="xx">
where xx is the image size. To find out the size of your image, use your image editing program. This is usually under Image/Image Size... Remember that image size is always in pixels, don't make the mistake of using inches, cm, etc.

Alt

<img src="name_of_image" width="xx" height="xx" Alt="Your statement goes here">

img means image, and src means source.

One last thing before we leave this topic... HTML is changing and new rules are emerging all the time. As you already know, html tags come in pairs, but not all the time. The image tag is of those that do not come in pairs. The new html rule says that when a tag does not have a closing tag, then you need to include a forward slash inside the tag. So far this is our image tag:
<img src="name_of_image" width="xx" height="xx" Alt="Your statement goes here">

but to make it complete and compliant with today's standards, you need to add a forward slash like so

<img src="name_of_image" width="xx" height="xx" Alt="Your statement goes here" />

The same goes for other single tags like <br>, <hr>, <meta>, etc. Their correct forms should be <br />, <hr />, <meta />.

Links

• First you take <a href="">
• Add the address you want the link to go to when someone clicks on it <a href="http://www.blackplanet.com/Members/">
• Add the title of the link, ie. what you want people to see on your website. This can be anything you want. So let's call this BlackPlanet Membership. So we get
  <a href="http://www.blackplanet.com/Members/">BlackPlanet Membership
• Now close the tag to obtain a complete link.
  <a href="http://www.blackplanet.com/Members/">BlackPlanet Membership</a>
• The link will appear on your webpage like this BlackPlanet Membership, and when clicked on, it goes to http://www.blackplanet.com/Members/. That's all there is to forming links.

  ---

  But what about if we want to make an image into a link? Well, that's easy too. From above, all we need to do is replace BlackPlanet Membership with the image we want to use. So let's use one of our earlier butterfly images above.

  • First we take the complete link, <a href="http://www.blackplanet.com/Members/">BlackPlanet Membership</a>
  • Then replace BlackPlanet Membership with our image
    <a href="http://www.blackplanet.com/Members/"><img src="image4.gif" /></a>
  • After doing this, you see an image on your webpage like this . Clicking on the imge will take you to http://www.blackplanet.com/Members/.

  If you notice, there is a blue border around the image. That is equivalent to underlined text for text links. However, this border is not a desirable feature for some people. If you're one of them, then you can take it off as follows:
  <a href="http://www.blackplanet.com/Members/"><img src="image4.gif" border="0" /></a>. This is what we get as a result:

  There are other things you could do to the border. For instance instead of removing it, you could make it bigger in size. See what
  <a href="http://www.blackplanet.com/Members/"><img src="image4.gif" border="10" /></a> produced

  ---

  Return to top

  Aligning Images

  The beauty of your webpage will depend on many factors, one of which is proper arrangement of images on the page. HTML Tables do wonders in the proper arrangement of webpage content. If you are not familiar with html tables, step on over to my table tutorial. Also check out this useful resource http://www.davesite.com.

  Besides learning about tables, there are other simple ways of aligning images on your webpage: by using center and paragraph tags. Lets take this image and align it.

  • <center><img src="image4.gif" /></center> will align the image to the center as shown below
  • <p align="right"><img src="image4.gif" /></p> will align the image to the right as shown below

    

    The <p></p> tags are used for creating paragraphs, and by simply adding align="right", align="center" or align="left", whatever you put between the tags is aligned accordingly. It can be used to align both image and text.

Wrapping Text Around Images

Butterfly This is a butterfly. A beauty to look at for its panoramic colors and gentle nature. They like to fly in the daytime and flaunt those colors. Moths on the other hand are nocturnal creatures and so less colorful. Butterfly This is a butterfly. A beauty to look at for its panoramic colors and gentle nature. They like to fly in the daytime and flaunt those colors. Moths on the other hand are nocturnal creatures and so less colorful.

><img src="image4.gif" />
><img src="image4.gif" align="left" />
So all you need to wrap text around an image is to add align="left". You can also use align="right" to align the image the right margin.

Even though align="left" wraps text around the image, it's not always desirable, since it will wrap all the text next to it around itself up to the limits of its height. What if you want just part of the text, and not all, to be wrapped? For example

Butterfly This is a butterfly. A beauty to look at for its panoramic colors and gentle nature. They like to fly in the daytime and flaunt those colors. Moths on the other hand are nocturnal creatures and so less colorful.

You can use <br clear="all" /> to move text you don't want wrapped to the bottom of the image. Just place the <br> tag at the beginning of such text.
You can also use <br clear="left" /> and <br clear="right" />, depending on your needs. The best way to see how these break the text, is to try them out yourself.

Image Maps

We won't dive right into making image maps, instead we'll first look at some terms you'll need to understand very well.

A map... A map describes the boundaries of something. For example, the map of the USA describes the boundaries of the USA on the world globe.

x, y coordinates... This is better explained visually

The graph above has two dimensions, an x-axis and a y-axis. Coordinates are x and y values that describe the position of a point on the graph. Why don't we find the coordinates of the colored squares then...

• The x, y coordinates of the red square are 1, 1
• The x, y coordinates of the green square are 3, 2
• Okay go ahead and find the coordinates of the blue square... If your answer was 2, 1, you're correct!

Okay with those terms under our belt, let's now tackle image maps.

An image map is an image with links mapped onto it. Once the links have been mapped, you can click on different areas of the image just like any other link on your page. There are several advantages to doing this. It promotes your webpage from the ordinary... gives that site a cool look, if you know what I mean. It also allows you to use a single small image for mapping all your links, instead of using a different image for each link. The points you can click on within the image are called "hot spots".

Examples of Image Maps AtlasMagazine | gfx STUDIO

http://www.blackplanet.com/
http://www.sabyo.com/
http://www.nevada.edu/~akindel/
http://homes.acmecity.com/music/fractal/149/ftpjazz1.html

Let's take our favorite butterfly and map links onto it.

We will map the four links above onto our image. The image on the left is not clickable (just a solid image like any other), but the one on the right has hotspots and clickable. Try it...

Creating image maps is very easy. The only aspect that may be problematic is determining the coordinates. But here is a solution for you.

Create a webpage with the html code below and replace map.gif with the name of your image.

<A HREF="#"><img src="map.gif" ISMAP /></A>

Then open the page in Netscape or Explorer. When you move the mouse over the image you will see the coordinates at the bottom of the screen. Unfortunately, some older browsers do not support this.

If you hit a brick wall while trying to figure this stuff out, don't just give up in frustration. Try it again a couple of times, and if you're still having problems, send me a message with as much detail as possible about the problem.

Remember, nobody is born with this stuff. You have to bust your butt to get it to sink in. So practice, practice, practice. In fact, make mistakes deliberately, and see what happens. You'll be surprised what new stuff you can discover that way :)

1. The tag for image maps is

   <MAP NAME="RichieMap">
   </MAP>

2. Define your coordinates within the MAP tag. For example, the coordinates for our image map above is:

   <MAP NAME="RichieMap">
   <AREA SHAPE="rect" HREF="http://www.blackplanet.com/" COORDS="7,4 90,14">
   <AREA SHAPE="rect" HREF="http://www.sabyo.com/" COORDS="40,26 92,40">
   <AREA SHAPE="rect" HREF="http://www.nevada.edu/~akindel/" COORDS="2,52 91,66">
   <AREA SHAPE="rect" HREF="http://homes.acmecity.com/music/fractal/149/ftpjazz1.html" COORDS="6,75 93,95">
   </MAP>

3. Finally, add the line

   <IMG USEMAP="#RichieMap" SRC="map1.gif" BORDER="0">

Now the whole thing together will be

<MAP NAME="RichieMap">
<AREA SHAPE="rect" HREF="http://www.blackplanet.com/" COORDS="7,4 90,14">
<AREA SHAPE="rect" HREF="http://www.sabyo.com/" COORDS="40,26 92,40">
<AREA SHAPE="rect" HREF="http://www.nevada.edu/~akindel/" COORDS="2,52 91,66">
<AREA SHAPE="rect" HREF="http://homes.acmecity.com/music/fractal/149/ftpjazz1.html" COORDS="6,75 93,95">
</MAP>
<IMG USEMAP="#RichieMap" SRC="map1.gif" BORDER="0">

So what do you need to change to make the map work for you?

• Change all the HREF url's to your own

• COORDS are the coordinates of your hotspots. We already talked about x,y coordinates, and I've told you how to determine them easily. So find your coordinates and use the proper values. Study the image below carefully and try to determine the coordinates for the four hotspots. I have shown two coordinates to get you started.

  

  Write out the coordinates for the four hotspots on your own, then compare your answers to mine below. The values you obtain should be within +/-4 of mine.

  Hotspot 1 COORDS are 35,16 130,43
  Hotspot 2 COORDS are 21,53 117,82
  Hotspot 3 COORDS are 140,28 236,55
  Hotspot 4 COORDS are 175,61 270,88

• Change the name of the image from map1.gif to yours.

Shapes on Image Maps

Here's how to define coordinates for the different shapes

Circle: <AREA SHAPE="circle" HREF="url" COORDS="x,y r">
where r is the radius of the circle, and of course url is where the hotspot will direct the user.

Rectangle: <AREA SHAPE="rect" HREF="url" COORDS="x1,y1 x2,y2">

Polygon: <AREA SHAPE="polygon" HREF="url" COORDS="x1,y1 x2,y2 x3,y3 x4,y4 x5,y5 x6,y6 xN,yN">
The number of coordinates you use will depend on the number of sides your polygon has. How many coordinates will you define for a triangle?

Point: <AREA SHAPE="point" HREF="url" COORDS="x1,y1">

default: <AREA SHAPE="default" HREF="url">
You don't need to specify coordinates here, because default space is everywhere outside the hotspots you have described.

In addition to AREA SHAPE, HREF, and COORDS, you can also use ALT="" and NOHREF. We've already talked about what alt does. As for NOHREF, it is used on any hotspot that you don't want to take your visitors anywhere. Here's an example: <Area Shape="Poly" Coords="300,0 300,100 400,100 400,0" NOHREF alt="Click on a link of your choice">.

Continue to Lists...