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.
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
CroppingCropping 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
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.
Return to top ResizingAs 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.
Return to top ResolutionBefore 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.
Return to top
Online Image OptimizersStill 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.
|
How To Add Images To Your PageNow 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 HeightWhen 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">
AltAlt 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: 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 LinksLet's move right along now and talk about links...Links are easy to create.
|
Return to top Wrapping Text Around ImagesTake a look at the illustrations below:
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" /> 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
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.
Return to top Image MapsThat 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...
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/ 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.
Now the whole thing together will be
<MAP NAME="RichieMap"> So what do you need to change to make the map work for you?
Shapes on Image MapsSo 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.
Here's how to define coordinates for the different shapes
Circle: <AREA SHAPE="circle" HREF="url" COORDS="x,y r"> 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"> Point: <AREA SHAPE="point" HREF="url" COORDS="x1,y1">
default: <AREA SHAPE="default" HREF="url">
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. Send me a feedback on this tutorial, so I can improve on it. Thanks.
|