HTML cont'd - All About Images... R R




Most web users are in favor of fast-loading, easy-to-browse websites. The majority of people online today around the world are still on slow dial-up access, hence a website with few or no images is preferable. What is more, some browsers such as Lynx do not even support images. So if you must use images on your website, be considerate and provide a text alternative, either on the same page or elsewhere. For example, you could have two versions of your site... one with graphics, and another with nothing but text.

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:


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
NameDescription
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.


Return to top

Cropping

Cropping means trimming an image by cutting out parts you can do without, like the edges, or even removing parts you don't want. See the two images below

               
Before croppingAfter cropping


For this exercise, I want you to use the image above. So save the first image with the green borders. To save, right click on it, click on Save Image As.... That will be Save Picture As... if you're using Internet Explorer. Save it where you can find it later.
  • 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!

Return to top

Resizing

As opposed to cutting out part of our image, this time we are going to reduce the size (ie. physical dimensions) of the image. See my sample images below.
               
Before resizingAfter 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!
Of course, if you want to make the image larger instead, you would increase the width in steps.
Return to top

Resolution

Before you can understand the meaning of resolution, you must know what pixel is. A pixel is the smallest possible dot on an image. I think this will be better understood if illustrated visually. So let's carry out an exercise.
Let's zoom in on a small part of an image.

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...


Return to top

Online Image Optimizers

Still on the subject of image optimization, here is a useful website... http://www.gifwizard.com/. Just enter your webpage url and their image optimization engine will reduce the size of images on your page up to 90% of the original size!


Return to top

Gif or Jpg?

The format you choose for your images depends on the type of image. Most pictures (photos) are in jpg format. Jpg images tend to preserve color details. Most computer-generated graphics on the other hand (eg. banners, logos, buttons, etc.) are in gif format. Gif is sharper and shinnier than jpg, and the size is often alot smaller than jpg. In cases where you may want to create animated images, you have no choice than to settle for gif format. Animated gifs cannot be created with jpg format. By the way, if you're interested in learning how to make animated gifs, download this program and play with it. Ulead GIF Animator. Animated gifs are not difficult to make, and fun to look at on webpages. Animated images bring an otherwise static webpage to life. They take quick a few steps to make, but quite astonishing when completed. See the spectrum analyzer I made.


Return to top

How To Add Images To Your Page

Now that you know how to optimize your images for the web, how do you add them to your webpages? That's what we're going to talk about now.

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

When you include the width and height in your image tag, it makes you webpage load faster. Width and height are added as shown below

<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

Alt is necessary in your image tags. If your users are on a slow connection, the images on your page will not load immediately. So whatever you put under Alt is what they'll see first. You can use alt to indicate the image size, eg. 17K. Also, some people turn off images while surfing the web. They can then view each image that interest them by telling the browser to show it. The only way your users will know if an image is worth waiting for is if you include the Alt statement. For instace, you have five pictures on your page, and only one of them is a picture of you... you get the idea. Alt statements are added this way

<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 />.


Return to top

Links

Let's move right along now and talk about links...
Links are easy to create.
  • 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.

Return to top

Wrapping Text Around Images

Take a look at the illustrations below:

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.


The first image has only one line of text next to it, while the second image has text wrapped all around it. The wrap-around effect is very easy to create. Here are the html codes for the two images above.

><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.


Return to top

Image Maps

That brings us to the interesting topic of image maps. This topic is a bit more involving than anything we've talked about so far. But believe me, it looks like a monster at first sight, but its bark is worse than its bite. If you've spent some time reading this tutorial just before you got to image maps, I suggest you take a 30 minute to an hour break. You need to begin learning about image maps with a fresh brain.

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 :)


Ok now let's go through the three easy steps for adding image maps.
  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

So far the hotspots on our image maps have been rectangular in shape. Other shapes you can use are: circle, polygon, dot (point). The coordinates for a circle are the easiest to define, while those of a polygon are more involving.

Wait for image to load

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">.


We've come to the end of this tutorial. What else would you like to know about images that we did not cover here? Send me a feedback on this tutorial, so I can improve on it in future. Use the form below. Thanks.

Continue to Lists...


Send me a feedback on this tutorial, so I can improve on it. Thanks.


Home|Comments, suggestions?





Copyright © 2000 Richie's Tutorials All rights reserved.