Two of the biggest names in the Internet are Yahoo and Google. Its no longer surprising that competition will exist between these two giants. When Google has launched its AdSense campaign it started dominating the Internet but of course Yahoo will not just let this pass without creating one of their own. If Google has AdSense, Yahoo on its part has created the Yahoo Publisher. But comparing the overall design of the two programs we will see that they are somewhat similar in some respects.

To better understand the two programs it would be best that we discuss them separately.

Google’’s AdSense

Let us start with the infamous AdSense Program. This program is an automated ad service that allows small web owners to display advertisements on their own web pages in return they will receive a portion or a share of the pay-per-click revenue that Google will generate out from the AdSense. This is an additional income for web owners.

Google’’s AdSense in one view may seem to be a simple concept but behind it is a complicated technology that only the smartest and the brightest team of Google can effectively accomplished. The AdSense program is wholly automated and makes use of a crawler that assesses the contents found on a publisher’’s site. After the evaluation is complete Google will then provide the publisher with some Javascript code to embed in their pages.

If ever the Javascript is activated a call is made back to Google to pull some ads out from the AdSense program. The ads generated will be in accordance to the content found on the page. For example if the content of the page deals on wheelchairs then all ads regarding wheelchairs will appear. If you want to gain more from AdSense it would be best to customize the colors as well as the formats to match the theme of your site.

This will make the AdSense appear as if it is an original part of the page. This will lead your site visitors to think that it is a link to one of your site’’s pages and would therefore click on it for additional information that they may require.

Yahoo’’s Publisher

There are several features that set Yahoo’’s Publisher distinct from Google AdSense and these are as follows:

1. You will not see the Google’’s famous tagline?”Ads by Google”

2. The ad blocks used by Yahoo do not touch each other

3. Another obvious distinction is the text inside a block is cut off and ends in an ellipsis.

These are just some of the prominent features that differentiate Yahoo’’s Publisher from Google’’s AdSense. But unlike Yahoo, Google requires its advertisers to refrain from using incomplete phrases and to limit the phrases to a certain number of characters per line.

In using Yahoo’’s Publisher when you click on the ads you are transmitted to the advertiser’’s page but you have to pass through first an Overture server. This Overture Server by the way is Yahoo subsidiary or soon to become Yahoo Search. The main function of this server is to do ad serving.

Reciprocal linking is a process to establish mutual link between two websites to ensure mutual benefit i.e. traffic, search engine enclosure. It is an important and crucial part of the SEO process because Search engines uses link popularity algorithm (depend upon the number of links that point to a particular page of a website and the title of the link) to rank websites for relevancy.

While doing reciprocal linking you have to be very careful about few particular things. Here we are listing few tips for running a successful reciprocal link building service:

1. Find relevant websites: You will be getting more value from search engines for linking to and from other websites which are relevant to your website. Reciprocal linking from other irrelevant website will not greatly help your websites standing with search engines.

2. Make sure that each inbound links are good: Be sure to have quality inbound links only. It had been recognized that 100 high quality relevant links is better them 1000 irrelevant low quality links. So try to get links from quality relevant websites only.

3. Do not Link to questionable sites which CAN hurt your ranking: Be aware of such sites that use questionable search engine optimization processes because such sites can harm your ranking. Before accepting any link check whether the page where your link will be posted is cached or not. Also we prefer to not to have any link which is not cached by Google within last 90 days.

4. Few facts to be followed: This is not possible to have all links from same quality sites. But still you have to set up some criteria for accepting links and have to follow them strictly. Don’t go for links which are not indexed by SE, don’t accept any links with no-follow tag or text links in JavaScript or redirected. These link will not pass any value to your site so better avoid them.

5. Organize the procedure: Be sure to manage your reciprocal link building campaign well organized. Try to keep all records of the URLs where your link is posted along with their link partnership email. Try to track each link periodically and if any links get dropped then try to contact the person and ask him to reestablish the link else delete the corresponding link from your website.

These are few facts that will ensure your rank improvement obvious in search engines. Also while doing reciprocal campaign we recommend you to run a simultaneous one way link campaign as well.

A month back, I wanted to find out all processes running on my machine from java code for some stupid purpose. What d you do in such a scenario? I tried to write some code and was pretty successful. Java can’t play with system process and hence invoking a runtime is only solution to get all process and here it is:

import java.io.*;

class ListProcess {

public static void main(String[] args) throws IOException {

Runtime runtime = Runtime.getRuntime();

String cmds[] = {”cmd”, “/c”, “tasklist”};

Process proc = runtime.exec(cmds);

InputStream inputstream = proc.getInputStream();

InputStreamReader inputstreamreader = new InputStreamReader(inputstream);

BufferedReader bufferedreader = new BufferedReader(inputstreamreader);

String line;

while ((line = bufferedreader.readLine()) != null) {

System.out.println(line);

}

}
}

Mind you, the code is written exclusively for Windows Machine . And one line change in this code will list you only java running process.

String cmds[] = {”cmd”, “/c”, “jps”}; this is nothing but running jps.exe file in bin (jdk6 onwards).

Its not all done. Writing Runtime code is not the real solution as there is little of platform dependencies. So, I have decided to write the code for getting List of Java Process. Again, I have checked by OpenJDK code for jps(search on jps.java file ) and I got some hint how to do it and here it goes:

import java.util.*;

import sun.jvmstat.monitor.*;

public class ListJavaProcess {

public static void main(String[] args) throws Exception {

/* Checking for local Host, one can do for remote machine as well */

MonitoredHost local = MonitoredHost.getMonitoredHost(”localhost”);

/* Take all active VM’s on Host, LocalHost here */

Set vmlist = new HashSet(local.activeVms());

for (Object id : vmlist) {

/* 1234 - Specifies the Java Virtual Machine identified by lvmid 1234 on an unnamed host.

This string is transformed into the absolute form //1234, which must be resolved against

a HostIdentifier. */

MonitoredVm vm = local.getMonitoredVm(new VmIdentifier(”//” + id));

/* take care of class file and jar file both */

String processname = MonitoredVmUtil.mainClass(vm, true);

System.out.println(id + ” ——> ” + processname);

}

}
}

I have written good amount of comment as it is all together a sun import rather than java or javax import. This import resides in tools.jar, so even running simple javac and java will not work. So, running the program will go here:

E:Program FilesJavajdk1.6.0_10bin>javac -classpath “E:Program FilesJavajdk1.6.0_10libtools.jar” ListJavaProcess.java

E:Program FilesJavajdk1.6.0_10bin>java -classpath .;”E:Program FilesJavajdk1.6.0_10libtools.jar” ListJavaProcess 3700 ——> ListJavaProcess

Right now only one java process is running. Now in the second code, you can play with some of the java process, but with native process in the above code you can’t do anything except watching it

No idea how to do this in JDK 1.5 or backwards(runtime is off course one option). Would love to learn it some other time.

VKC

Sorting is always a tricky game in any programming language and it is responsible for 50-60 percent of the total CPU time for any application. We all have our native language like Hindi, Chinese, Japanese, French and so many. Most of the time world deals with sorting of Alphabets or English words but give a eye on other languages which is growing fast and off course today we are talking about internationalization.

I am showing you a typical sorting of French word and the blunder associated with it. These are some of the common French words:

String[] names = {”fácil”, “facil”, “fast”,”Où”, “êtes-vous”, “spécifique”, “specific”, “ou”};

and here is the typical sorting code:

String[] names = {”fácil”, “facil”, “fast”,”Où”, “êtes-vous”, “spécifique”, “specific”, “ou”};

List list = Arrays.asList(names);

Collections.sort(list);

Iterator itr = list.iterator();

while(itr.hasNext()) {

System.out.print(itr.next()+ ” “);

}

And the result:

Où facil fast fácil ou specific spécifique êtes-vous

which is completely wrong according to French Rules. Because sorting is simply going via UNICODE rules not by French rules.

Now remedy: Java gives us a class called Collator class in java.text Package which takes care of locale while sorting. Here goes the code:

import java.text.*;

import java.util.*;

class CollatorTest {

public static void main(String[] args) {

String[] names = {”fácil”, “facil”, “fast”, “Où”, “êtes-vous”, “spécifique”, “specific”, “ou”};

List list = Arrays.asList(names);

Collections.sort(list);

Iterator itr = list.iterator();

while (itr.hasNext()) {

System.out.print(itr.next() + ” “);

}

Locale[] loc = Collator.getAvailableLocales();

Collator myCollator = Collator.getInstance(new Locale(”fr”));

myCollator.setStrength(Collator.PRIMARY);

Collections.sort(list, myCollator);

itr = list.iterator();

System.out.println(”");

while (itr.hasNext()) {

System.out.print(itr.next() + ” “);

}

myCollator.setStrength(Collator.TERTIARY);

Collections.sort(list, myCollator);

itr = list.iterator();

System.out.println(”");

while (itr.hasNext()) {

System.out.print(itr.next() + ” “);

}

}
}

And here is the result:

Où  facil  fast  fácil  ou  specific  spécifique  êtes-vous

êtes-vous  facil  fácil  fast  Où  ou  specific  spécifique

êtes-vous  facil  fácil  fast  ou  Où  specific  spécifique

which is perfectly valid. There are lot of option in Collator class which we will discuss sometimes later here only. So from now on, sorting other languages is also easy.

We all know about forms. We see them all over the place. Forms are the method used to collect information. If you want people to, for example, subscribe to your newsletter then a form is what you need. This article does not cover CGI scripts. If you want information just Google ‘mail scripts’ and you’ll find lots of free ones with instructions.

We’re going to look at the [FORM] and [INPUT] tags with some of their attributes.

Further we’ll look at the [SELECT], [OPTION] and [TEXTAREA] tag with its ROWS attribute.

Here’s a simple form.

Please click the “Examples” link below to see the illustrations.

Here’s the HTML. You’ll notice that the form has been placed in a table to proportion and organize it neatly. But we’re going to pay attention to the form itself.

[TABLE]

[FORM ACTION=”http://www.your-domain.com/cgi-bin/formmail.cgi” METHOD=”post”]

[TABLE WIDTH=”300″ BORDER=”3″ CELLSPACING=”5″ BG BORDER]

[TR]

[TD WIDTH=”50%”]Your Name:[/TD]

[TD WIDTH=”50%”][INPUT TYPE=”text” NAME=”fullname” MAXLENGTH=”25″][/TD]

[/TR]

[TR]

[TD WIDTH=”50%”]Your E-Mail:[/td]

[TD WIDTH=”50%”][INPUT TYPE=”text” NAME=”email” MAXLENGTH=”25″][/TD]

[/TR]

[TR]
[TH WIDTH=”50%”]

[INPUT TYPE=”submit” VALUE=”Subscribe Now!”][/TD]

[TH WIDTH=”50%”]

[INPUT TYPE=”reset” VALUE=”Clear form”][/TD]

[/TR]

[INPUT TYPE=”hidden” NAME=”recipient” VALUE=”you@your-domain.com”]

[INPUT TYPE=”hidden” NAME=”subject” VALUE=”Newsletter”]

[INPUT TYPE=”hidden” NAME=”required” VALUE=”fullname,email”]

[INPUT TYPE=”hidden” NAME=”confirmation” VALUE=”thanks.html”]

[INPUT TYPE=”hidden” NAME=”ref” VALUE=”code”]

[/FORM ]

[/TABLE]

We start with the [FORM] tag which encloses our form. I’ll be handling the ACTION and METHOD attributes at the end.

Next the [INPUT] tag and its NAME and MAXLENGTH attributes.
[INPUT] is easy; here we input data in one form or other. The TYPE indicates what sort of input we’re dealing with, in this case plain text. The data of the NAME attribute is the title or description we give that data element; in the first line “fullname” and the second “email”. Both fields have been given a MAXLENGTH of “25″but different values for SIZE. MAXLENGTH is the maximum number of characters which may be entered; SIZE is the physical size of the field that you see. For the rest of the forms in this section I have just used the former attribute.
The TYPE sorts “submit” and “reset” generate our buttons at the bottom of the form allowing people to submit or clear the form if they change their minds. The VALUE attribute, which we see for the first time, lets us define the text we want on the buttons.

The TYPE “hidden” is an interesting one. It lets us define certain parameters for our form that won’t be visible to the reader but give parameters through to the web-side script.

Let’s look at the different VALUE’s we’ve used here as “hidden” elements.

NAME=”recipient” VALUE=”you@your-domain.com”
This informs your server-side script where the form information must be sent to. Don’t worry about scripts now, I’ll be touching on them later with the ACTION and METHOD attributes.

NAME=”subject” VALUE=”Newsletter”
When you receive the form information the email subject will be, in this case, “Newsletter”

NAME=”required” VALUE=”fullname,email”
This informs your system that the named fields are compulsory, if either isn’t filled in then the person is rerouted to “whoops.htm” (see below)

NAME=”confirmation” VALUE=”thanks.html”
This is where your visitor is taken after successfully submitting the form

NAME=”ref” VALUE=”code”
Lets you have the form send an extra piece of information for, for example, marketing purposes.

Last but not least, I included a CSS instruction in this form to color the two buttons. That’s the STYLE attribute. Let’s you freshen up your form.

Right, such a lot of information just for a simple form with only two fields but they’re the majority of things to be considered with a form. Let’s look at a couple of other sorts of [INPUT] possibilities now.

Please look at example 2.

Here’s the HTML. I’ve just shown the “checkbox” coding.

[TR]

[TH COLSPAN=”2″]Please check the newsletters you’d like.[/TD]

[/TR]

[TR]

[TH]Hayes’ Homilies[/TH]

[TH][INPUT TYPE=”checkbox” NAME=”choice” VALUE=”Hayes Homilies” CHECKED][/TH]

[/TR]

[TR]

[TH]Web Search[/TH]

[TH][INPUT TYPE=”checkbox” NAME=”choice” VALUE=”Web Search “][/TH]

[/TR]

[TR]

[TH]HTML Tips [/TH]

[TH][INPUT TYPE=”checkbox” NAME=”choice” VALUE=”HTML Tips “][/TH]

[/TR]

The form lets our subscribers choose more than one newsletter. Let’s take a closer look at this new element.

TYPE=”checkbox” NAME=”choice” VALUE=”Hayes Homilies” CHECKED

The TYPE is clear; it’s a “checkbox”, a box which one can check or not. The NAME is the same for all input elements as it is one choice element with multiple answers possible. What you would see in your email with the form information would be some thing like:

“choice=Hayes Homilies”

“choice=Websearch”

“choice=Elvis Monthly ”

Of course when the person had checked these three. A word about the attribute CHECKED. This allows you to pre-check one of the choices in the hope that the subscriber won’t uncheck it. A bit of hard selling.

What when you want to give them only one choice.

Please look at Example 3.

Here’s the HTML. Again I just show the “radio” coding.

[TR]

[TH COLSPAN=”2″]Please check the newsletter you’d like.[/TD]

[/TR]

[TR]

[TH]Hayes’ Homilies[/TH]

[TH][INPUT TYPE=”radio” NAME=”choice” VALUE=”Hayes Homilies” CHECKED][/TH]

[/TR]

[TR]

[TH]Web Search[/TH]

[TH][INPUT TYPE=”radio” NAME=”choice” VALUE=”Web Search “][/TH]

[/TR]

[TR]

[TH]HTML Tips [/TH]

[TH][INPUT TYPE=”radio” NAME=”choice” VALUE=”HTML Tips “][/TH]

[/TR]

This form lets our subscribers choose only one newsletter. The only difference between this coding and the “checkbox” form is that the TYPE data is now “radio” which only allows one choice.

The [SELECT] and [OPTION] tags.
These allow you to put your selection list in a mini-window, if needed, with a scroll bar.

Please look at Example 4.

Here’s the HTML.

[TR]

[TH COLSPAN=”2″]Please check the newsletter you’d like.[/TD]

[/TR]

[TR]

[TH COLSPAN=”2″][SELECT NAME=”choice”]

[OPTION SELECTED /]Hayes’ Homilies

[OPTION /]Web Search

[OPTION /]HTML Tips

[OPTION /]Hayes’ Hints

[OPTION /]Web Business

[OPTION /]HTML Advanced

[/SELECT][/TH]

[/TR]

It should be obvious that your selection list must be enclosed by the [SELECT] and [/SELECT] tags and that each selection possibility preceded by the [OPTION] tag. With this method your subscriber can only select one newsletter. And by using the SELECTED attribute, yet again, we’re trying to help them make up their mind.

You see that the SIZE attribute is set to “4″. This is to demonstrate the scroll bar. Had I defined “6″ then the scroll bar would not be present and you would see all choices in the window.

Last but not least.

Sometimes you’d like your subscribers to tell you what they thought of your website and that’s where the [TEXTAREA] tag comes in.

Please look at Example 5.

Here’s the HTML.

[TR]

[TH COLSPAN=”2″]Please comment on my website.[/TD]

[/TR]

[TR]

[TH COLSPAN=”2″] [TEXTAREA ROWS=”5″ NAME=”choice”]

[/TEXTAREA ][/TH]

[/TR]

It couldn’t be simpler. And the [ROWS] attribute indicates how many rows are visible, not the type-in limit. If your subscriber types in more that the scroll bar appears, try it.

Now we’re going to look at the [FORM] tag with its, ACTION and METHOD attributes. I’m going to start with the METHOD attribute. We usually use the “post” option, this results in the contents of the form being emailed to, in this case, me. The other option, “get” results in the form’s contents being added to a URL in order to, for example, do a search via a search engine. So for us it’s the “post” option.

We can fill METHOD in, in two ways; the first way sends the form’s contents to a script somewhere in order to be unravelled, the second just emails the raw data to our given email address.

Let’s look at that first one.

FORM ACTION=”http://www.your-domain.com/cgi-bin/formmail.cgi” METHOD=”post”

Via this definition the contents of our form will first be sent to the CGI script formmail.cgi in the [B]cgi-bin[/B] in our website www.your-domain.com where it will be ‘unravelled’ and sent to us in a readable form. See example 6.

FORM ACTION=”mailto:you@your-domain.com” METHOD=”post”

And this is what the email we receive looks like. See example 7.

The difference is quite clear. With this one it’s up to you to do the unravelling, as you can see, the fields are separated by the “&” character and characters, like “/” and “;”, are translated into hexadecimal codes.

Here we’re looking at the [IMG] tag and it’s attributes SRC, ALIGN, ALT, BORDER, HEIGHT, WIDTH and USEMAP, and then the [MAP] and [AREA] tags with the NAME, SHAPE and COORDS attributes. And we’ll be coming back to the [BODY] tag briefly.

If you intend to have a webpage you’ll find that images will be unavoidable. Whether they’re photos of your product or graphical images like banners and buttons, you will need them.

To make and manipulate graphics and to manipulate photos, you’ll need a system like Paint Shop Pro which I find quite excellent. There are more out there so you can shop around but for explanation purposes in this article my reference will be PSP. A word of advice; most systems can be bought on the web and downloaded, If possible don’t!. Go to your local PC shop and buy it, that way you get the user’s manual; that is vital.

I’m going to start with photos. You can digitize them in different ways. Scan them in, download them or use a digital camera. Make sure you’ve set up a separate directory for your images so you know where to find them.
Right, let’s look at photos.

First let’s have a look at some random photos. Please select “Random pictures” on your links page.

Lots of photos but presented in a rather messy, unstructured way. Simply programmed like this:
(<>’s have been replaced with [ ]’s in order to invalidate the HTML.)

[IMG xsrc=”photo04.jpg” HEIGHT=”312″ WIDTH=”200″][BR /]

[IMG xsrc=”photo05.jpg” HEIGHT=”200″ WIDTH=”300″][BR /]

[IMG xsrc=”photo06.jpg” HEIGHT=”225″ WIDTH=”300″][BR /]

[IMG xsrc=”photo07.jpg” HEIGHT=”300″ WIDTH=”202″][BR /]

[IMG xsrc=”photo08.jpg” HEIGHT=”200″ WIDTH=”300″][BR /]

[IMG xsrc=”photo09.jpg” HEIGHT=”230″ WIDTH=”300″][BR /]

No attempt at an ordered presentation. We could have done it like this. I’ve added three more snaps.

Please select “Gallery” on your links page.

Here the use of a TABLE has given some order.

[DIV ALIGN=”center”]

[TABLE BORDER=”5″ BORDERCOLORLIGHT=”beige” BORDERCOLORDARK=”brown” WIDTH=”50%”]

[TR][TH COLSPAN=”3″]The Mike Hayes Photo Gallery

[TR]

[TD][IMG xsrc=”photo01.jpg” WIDTH=”100″ HEIGHT=”100″][/TD]

[TD][IMG xsrc=”photo02.jpg” WIDTH=”100″ HEIGHT=”100″][/TD]

[TD][IMG xsrc=”photo03.jpg” WIDTH=”100″ HEIGHT=”100″][/TD]

[/TR]

[TR]

[TD][IMG xsrc=”photo04.jpg” WIDTH=”100″ HEIGHT=”100″][/TD]

[TD][IMG xsrc=”photo05.jpg” WIDTH=”100″ HEIGHT=”100″][/TD]

[TD][IMG xsrc=”photo06.jpg” WIDTH=”100″ HEIGHT=”100″][/TD]

[/TR]

[TR]

[TD][IMG xsrc=”photo07.jpg” WIDTH=”100″ HEIGHT=”100″][/TD]

[TD][IMG xsrc=”photo08.jpg” WIDTH=”100″ HEIGHT=”100″][/TD]

[TD][IMG xsrc=”photo09.jpg” WIDTH=”100″ HEIGHT=”100″][/TD]

[/TR]

[/TABLE]

[/DIV]

As you saw in the first show of photo’s they are not actually the same size so if we stuff them into this table and make them all the same size, a size which is not proportional for each particular photo, then some distortion does occur.

Let’s continue now with the positioning of one image on a page. This series of examples are of the vertical alignment of images in respect to the line of text it’s positioned in. The first example shows the ALIGN attribute with the “bottom” option, also the default option.

Please select “ALIGN=”bottom on your links page.

Let’s look at the coding

[IMG xsrc=”http://www.my-web-site.com/test/photo02.jpg” WIDTH=”64″ HEIGHT=”96″]

This is a photo of my Jack Russell terrier, her name is Daisy and she travels all over Europe with me.[BR /]
With this option, the bottom of the image is aligned with the bottom of the current line of text.[BR /]
If an [FONT][B]IMG[/B][/FONT] statement [I]follows[/I] the text then the alignment is with the bottom of the last line of text.

[IMG xsrc=”http://www.my-web-site.com/test/photo02.jpg” WIDTH=”64″ HEIGHT=”96″]

You can manipulate so that the alignment is different. With the “middle” option for example.

Please select ALIGN=”middle” on your links page.

Let’s look at the coding.

[IMG xsrc=”http://www.my-web-site.com/est/photo02.jpg” WIDTH=”64″ HEIGHT=”96″ ALIGN=”middle”]

This is a photo of my Jack Russell terrier, her name is Daisy and she travels all over Europe with me.[BR /]
(With this option, the middle of the image is aligned with the middle of the current line of text.)

[IMG xsrc=”http://www.my-web-site.com/test/photo02.jpg” WIDTH=”64″ HEIGHT=”96″ ALIGN=”middle”]

And last the “top” option.

Please select ALIGN=”top” on your links page.

Let’s look at the coding.

[IMG xsrc=”http://www.my-web-site.com/test/photo02.jpg” WIDTH=”64″ HEIGHT=”96″ ALIGN=”top”]

This is a photo of my Jack Russell terrier, her name is Daisy and she travels all over Europe with me. [BR /]
(With this option, the top of the image is aligned with the top of the current line of text.)

[IMG xsrc=”http://www.my-web-site.com/test/photo02.jpg” WIDTH=”64″ HEIGHT=”96″ ALIGN=”top”]

So we see that these methods place the image with regard to the text line that it’s embedded in. And that could be anywhere on the page, left, right, middle.

Do you want a BORDER around your image? Well, for images that are also links, the browser will usually put a 2 pixel border round it. You can, of course, manipulate the data for this attribute. But first, let’s experiment.

If you want a border round your picture you need the BORDER attribute

Please select ALIGN=”Border” on your links page.

Coded like this.

[IMG xsrc=”images/photo09.jpg” BORDER=”10″]

As you see from the example the default color for borders is black.

Flexible images.

Imagine you’re an art teacher who gives lessons on the internet and you want to talk about some different colors. A figure/painting like this could help me.

Please select “Abstract” on your links page.

The purpose could be that when someone clicks on one of the colors they would be sent to a page or site with information of that color.

For this we need the tag MAP with it’s NAME attribute and the AREA tag with it’s SHAPE and COORDS attributes. The coding of this example is beyond the scope of this article but can be found in book mentioned below. To be clear, the MAP doesn’t have to be a graphic, a drawing; it could be e.g. a photograph of a face with links from the eyes, nose, ears, etc.

There are different sorts of image files available but we’ll most probably only use two. For photo’s, where we want a reasonable level of quality, we’re going to use the “jpeg” format and for graphics, images like banners and buttons, we use “gif”. An aspect of images which you have to pay attention to is the size as this influences the download time and as we all know, we hate waiting for the images to appear. We can improve this in two ways.

We can make our images very small to speed up the download, but then they’ll either be too small to make any impression, or, if we adjust the size with the HEIGHT and WIDTH attributes, their quality will be abominable. Look at these examples.

Please select “First two” on your links page.

As you see the top image, (size 50 by 37), is unrecognizable when small but when enlarged its dreadful!
So let’s see the real image. The first one is the original image, it’s 1280 by 960 and is 77kb. I’ve reduced it’s display size with the HEIGHT and WIDTH attributes to 500 by 375. The one that follows has been physically reduced by my graphics program to 500 by 375 and takes up 11kb of disc space!

Please select “Second two” on your links page.

Notice the difference. The first of the two is of a slightly better quality but the second is good enough and it speeds up download time considerably.

With graphics, banners, the non-photgraphic pictures, etc., I use the “gif” option.

Another way to reduce the download time is as follows. At save time choose ‘options’ and then “progressive encoding” for “jpg” files and “89a/interlaced” for “gif”. The method of saving may be different for the different graphics programs so study your documentation.