|
What is load time?
Load time (how long it
takes an email or a website to open) is based upon how big the files are.
It's essentially the amount of time it takes your computer to load the
email or website) from someone else's. You don't actually look at things
(emails and websites) on someone else's computer, instead your computer
loads a copy of their files (websites and emails) into your computer.
You are essentially looking at a high tech photo-copy.
Why do some emails and
websites have a short load time while others have a very long load time?
Because some emails and
websites use very small files (that have to be copied - loaded - into
your computer), and other ones use very big files (that have to be copied
- loaded - into your computer). Small files load fast. Big files load
slow.
Why are some files bigger
than others?
Text uses up only a little
tiny bit of space (small file size), and so it loads into your computer
very quickly. On the other hand, pictures use up a huge amount of space
(big file size) and can take forever to load. A lot of text only takes
a few seconds. A few pictures can take several minutes to open. The
more pictures and graphics, the longer it will take the email/website
to load into your computer.
Is shortening the amount
of text going to reduce the load time?
Reducing the amount of text
on your page, will only save a second or two in load time and the difference
will hardly be noticeable. The only real difference will be for the reader.
After years of writing long letters I have found that most people prefer
it if information is given in short little bites. In other words, a long
letter loads fast, but it still takes forever to read, lol.
Is there a way to keep
pictures looking good "and" reduce the amount of time it takes
to load them (in email and websites)?
Yes!!!!!!!!! There are several
things you can do, but the first step is learning(understanding) a little
bit about graphics and file sizes.
What are graphics?
Graphics are pictures that
have been copied (almost like a photocopy) into a digital format (file).
The file contains instructions that tell it how to generate a copy of
the original picture onto "your" computer.
What kind of instructions
are in the file?
The instructions in a graphics
file include the size of the picture, how many dots per inch (DPI), how
many colors you can use, etc...
What does DPI means?
DPI - Dots per inch can
be explained easily as follows. Imagine you are an artist working at a
big company. Your boss (Seymour Butt) has asked you to draw a black and
white picture of an elephant 5 inches tall and 6 inches wide. That sounds easy
until your boss tells you that you can only put ONE dot per inch. That
means that you have to make a picture of the elephant using squares
that are one inch tall and one inch wide. There are six squares across,
and five squares up and down. 30 total squares. Try drawing an elephant
with only 30 squares - it's impossible. You have enough space to draw
an elephant, but the squares are so big that they take up more space.
.
.
.
.
.
.
. .
.
THIS is not an elephant!!!!!!!!!!
Obviously, you either
need more space (A bigger picture?) or more dots per inch.
The obvious choice is?
A. A bigger picture (Five feet tall and six feet wide)
B. More dots per inc
hcni rep stod erom B. <-----
(read backwards)
The More Dots The Better,
Right?
Yes and No. The more dots
per inch, the more detail you can include in the picture, BUT the more
dots per inch also increase the file size (load time).
Can you explain this a little
better?
Sure. Lets go back to the
elephant. It was six inches across, five inches tall. Each inch was one
dot (One dot per inch). So if you multiply the number of inches across
(6), by the number of inches tall (five) you have a total of 30 square
inches. To find the number of dots you multiply the number of square inches
(30) times the number of dots per inch (1). The result is a total of 30
dots.
Or
6 (across) x 5 (tall) x 1 (DPI) = 30 pieces of information
6 x 5 x 1= 30
That means that "your"
computer would only have to send instructions to "my" computer
on where to place 30 dots, and what color they would be. The picture is big,
but since there is only one dot per inch. The AMOUNT OF INFORMATION that
needs to be sent is small. 30 pieces of information would take less than
a second to load.
BUT.........
If you increase the dots per inch to 10,000 (10,000 DPI), the picture
still remains the same size (6 inches across x 5 inches tall) but the
amount of pieces of information would now increase to 300,000
6 (across) x 5 (tall) x 10,000 (DPI) = 300,000 pieces of information
6 x 5 x 10,000= 300,000
THAT IS A HUGE AMOUNT
OF INFORMATION!!!!
So, you have a choice,
both pictures are the same size (6 inches tall and five inches wide),
the first one at one dot per inch (1 DPI) does not have enough detail and
no one even knows its an elephant, or the second one at 10,000 dots per
inch (10,000 DPI) that Michealangelo would have been proud of...
but takes five minutes to load...
If your boss says "it
has to be on his computer (desk) in two minutes or you are fired",
which do you send?
Obviously you need to compromise.
You need enough dots per inch so that the image of the elephant looks
good, but not so many dots per inch that the picture takes longer to load
than most people are willing to wait.
Okay, How Many Dots Per
Inch (DPI) Do You Recommend?
72
Why 72 DPI?
Anything over 72 DPI is a
waste of space, and it's going to take too long to load.
Anything
less will look fuzzy on peoples screens.
Okay, I'll bite.
I understand that it will take pictures saved at too many DPI's along
time to load, but why would pictures saved at "more" than 72
DPI's look fuzzy on other peoples computers?
When visiting websites,
your computer uses a software program called a BROWSER(Netscape, Internet
Explorer, etc) to view (download and interpret) files on that website.
The browser reads the instructions on the website, like how to download the
text, pictures, music, etc. And then, the browser decides whether to follow those
instructions or not. If you send a file that does not match the browsers guidelines
it will change the information that it receives and in doing so it maydistort
the information.
What do you mean and how
does this relate to pictures that are more than 72 DPI?
Browsers
make decisions on how they are going to display pictures and graphics
on your computer screen. What you are seeing on your screen may or
MAY NOT be what the instructions on the website said to show you.
For example, the standard
for
browsers is to NEVER SHOW GRAPHICS AT MORE THAN 72 DPI?
If the browser can't
show pictures at more than 72 DPI what does it do?
The browser has three options.
The first is to show the picture as instructed, it does this with pictures
that are 72 DPI or less. The second is not to display the graphics
(bad or missing graphic files), and it just puts a little white box with
an "X" to show you where there was 'supposed' to be a picture.
The third option is that when it sees a picture that is MORE THAN
72 DPI that it has to CHANGE THE IMAGE TO 72 DPI... And this third
choice is what makes the images fuzzy.
Can you explain this (resizing)
in a little more detail?
Sure. In the example of
the elephant above we created an image of an elephant that was 6 inches
(across) by 5 inches (tall) that was saved at 10,000 (DPI). The file size
was 300,000 (pieces of information). That's what the computer saved on
the website. A file containing information about 300,000 little tiny squares
of color that when displayed look like an elephant.
However, the browser that most of us use to go (view) to the website only
shows us an image that is 72 DPI. So basically, the browsers had to reduce
the size of the file.
The original file (as saved on the web) was:
6 (inches) by five (inches) by 1,000 (DPI)= 300,000 pieces of information
The browser changed it to:
6 inches by five inches by 72 DPI= pieces of information
6 (inches) X 5 (inches) X 72 (Dots Per Inch)= 2,150 pieces of information
The file on the website contains 300,000 pieces of information, but our
browser (Netscape or Internet explorer) only let's us see 2,160 of them.
There were 297,840 pieces of information that we (people visiting the
website) were not allowed to see. The browser will display the file
that was 1,000 DPI but it won't look any better than if it had been created
at 72 DPI.
Does this missing
information explain the fuzziness?
Yes, it's a little more
detailed than this, but I think now that you understand that by saving
images to the web at more than 72 DPI actually decreases the quality of
the image that people will see.
Is there a time when you
want to create pictures that are more than 72 DPI?
Yes. For regular
email (Pictures imbedded in email) and websites 72 DPI is fine. If you
are sending a picture to family or friend then you can use a higher DPI
and send it as an attachment. However, Higher DPI's are usually only
really necessary for things you want to print. Printing a good quality
image might take 200 or 300 DPI (with a good printer), but for normal
email purposes and websites 72 DPI is best.
Can I use lower
than 72 DPI for email and websites?
Absolutely, just look at
the image in the email and the website and that is exactly how most people
will see it (anything under 72 DPI usually remains unchanged by the browsers)
NOTE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Scanner software
is almost always preset at the factory for 150-300 DPI. They
do
this simply to make think you bought a higher quality product because
it is set at a high DPI. We recommend changing the DPI setting to
72 for anything being sent in email or placed on a website.
What kinds of Graphics
should I use for email and websites?
www.baddteddy.com/tutorials/filetype.htm
<--tutorial on
file types)
BMP's - NEVER................. BMP's WASTE WAY TO MUCH SPACE......
GIF's - Use these for computer generated graphics such as buttons
JPG's - Best choice for camera's, scanners, etc....
If BMP's are such a
waste of space, why does anyone use them?
Good question. BMP's are called Bit maps. Essentially you can change one
little bit (dot) at a time, in some programs, to draw and redraw the images
(comics, etc), but BMP's are absolutely horrible to use in email
and on websites (Most browsers won't even display BMP's - just a
box and a red X) because they take was too much space and take forever
to load. So, who uses them? Mainly people on AOL - without knowing
that they are doing it. For some strange reason, than none of us can
figure out, AOL for a couple of years now has set their standard email
photo type as .BMP. Images in AOL email, etc are often changed without
the user's knowledge to BMP's. We have never been able to figure
out why, but my best guess would simply be because other ISP's avoid
using BMP's and therefore it makes it harder for people on other
email servers to see graphics in AOL mail, thus encouraging those
people to drop their email service and switch to AOL. As a result of all
the BMP's, AOL email with pictures embedded is VERY SLOW.
Can you change a BMP
to a GIF or JPG on AOL?
Yes, lets say someone just
sent you a picture on AOL, but they sent it to you as a BMP and it took
forever to load. You want to change it to a .JPG before you send it to
your friends, what step should you take?
1. Open the email containing the picture
2. Highlight the picture
3. Put the cursor on the picture
4. Click the RIGHT MOUSE BUTTON
5. Click SAVE
6. TYPE: a name for the picture
7. At the bottom it says "Save File As .BMP"
This is the default setting for AOL, click the arrow on the right and
select .JPGor .GIF (Note: A few pictures for some reason cannot be changed
and .JPG and .GIF will not be given as options)
8. Click SAVE
That's it, you have saved
the .BMP file as a .JPG, you can now INSERT the picture into another email
as .JPG or website and it will now take 75% less time to load than the
BMP did. YIPPEE!!!!!
Someone told me that there
are some rules I should follow when I create a file name for my pictures,
but I forgot what they are, can you remind me? It's very important to
know the rules about file names, especially if you or your friends save
the pictures on your computer or want to use them on a website. For instance,
you should always keep your file names to "8 characters or less"
because programs like AOL only allow file names up to 8 characters.
If the file name is longer than 8 characters, AOL will change the
file name to something shorter. For instance, on AOL a picture called
"elephantsrunning.jpg" becomes "elephan~.jpg". Many
programs and browsers do not use the "~" symbol so basically
this picture would be replaced on a website, etc... by a little white
box with a red
x
.
Personally I would rather
see the picture.
What other suggestions
do you have regarding file names?
NEVER use "CAPITAL
LETTERS" in a file name. Capital letters can cause a lot of confusion
for your programs, and you could end up losing your pictures. Only use"lower
case".
Anything else?
Yep, never use "Spaces
or underscores". Some programs get confused by these, and your
picture disappears. And never use numbers in file names.
Can you sum up those rules
on file names for me?
1. Never use capital letters
2. 8 characters or less
3. No spaces or underscores
4. No numbers
Can you show me the difference?
See_The_Elephants_Running2.jpg
---- AOL changes this to: See_The~.jpg
or
elephant.jpg ---- AOL does not change: elephant.jpg
Is there anything else
I can do to reduce the file size?
Actually there is something
that you can do that may reduce your file sizes by up to 75% (that means
75% less load time) if you are a regular user of graphics programs
and like to build websites or send lots of graphics and pictures to your friends
you can make your websites and emails open up in one-fourth the time it currently
takes. Instead of a website taking two minutes to open, you can change
it to open up for your visitors in less than 30 seconds.
How do I reduce the file sizes?
The trick is understanding
the number of colors that are contained in your pictures. For instance
a Black and white picture contains (2) colors. Pictures that use black and
white and shades of gray are called grayscale pictures and contain (16)
colors. Most pictures and buttons use only the basic colors and contain
only 32 colors. Fancy pictures, with lots of little details, and fancy
customized colors, can have 256 colors or even more.
Okay, I understand, different
pictures have different amounts of colors, but how does that help me reduce
my file sizes?
Your pictures have different
amounts of colors, 2, 16, 32, 256, or more, however, the programs that
created the pictures don't pay any attention to the 'real" number
of colors contained in the pictures. They simply assume that you have
up to a million colors in the picture, and so they send instructions
on how to use all one million colors. These instructions take up
a huge amount of space and can actually be up to 75% of the file size
(and 75% of the load time).
So, let me guess, you
are going to suggest that I change the instructions?
Wow, I think you are catching
on......
Okay, how do I change
the instructions?
First look at the picture,
button, or graphic that you want to use. If it is black and white you
know it has (2) colors, if it has black white and gray it has (16) colors,
it uses only the basic colors it has (32) colors and it has a lot of fancy
colors it probably has 256 or more colors. You want to change the pictures
instructions from a million possible colors to either (2, 16, 32, 256,
or leave it at a million). You do this in the program that you created
it with, or for an existing graphic you do it with a graphics programs.
What kinds of programs
can you do this with?
Adobe Photoshop 5 or 6, ImageReady,
Corel Draw and PaintShop Pro and probably some of the freebie shareware
software (although the pictures may not look as good with some of them).
How do I do it with these
programs?
Save the picture on your computer.
Open the program you are going to use (List above),
then open the picture in that program. Change the number of colors (it's listed
in the image characteristics, along with DPI, etc...) to 2, 16, 32 or
256 based on how many actual colors are in the picture and choose
SAVE. What you will now have is a file that is up to 75 percent smaller
(file size) than the original, and look exactly like the original.
Remember, it's not how many crayons there are in the box, it's how many
of them you actually use.
Can I set the number of colors
on scanners and camera's?
It depends on the software,
but with most cameras and scanners you can set the number of colors. Try
a few at 32 colors and see what they look like, If the image looks okay,
leave it that way. If not, try 256 colors.
Is this how I change the DPI and the rest of it too?
Yep, you got it. When you open
the picture using one of the programs listed above (Photoshop,
etc), you simply go in and change the picture characteristics. You change
the number of colors (2,16,32, 256), you change the DIP to (72), you change
the file name (8 or less characters, no capital letters, no spaces or underscores),
you can even change BMP's to JPG's. The result is a much smaller file
size, a picture that will not be replaced by a little white box with a
red X, and a clearer image. And of course, now your friends and family
will actually visit your website and read your email rather than
simply deleting it because it took to Loooooooonnnnggggggggggggg to open..
Anything else you can suggest?
Yes, if the image is a JPG,
and you are using a program (one of the ones listed above, or a program
for creating websites such as FRONT PAGE) that allows you to change
the image quality setting, we recommend changing the quality setting to 66%.
This is generally the best setting for most pictures. It will reduce the
file size greatly.
Anything I should know
about any of these programs?
On the Adobe programs, there
is a special button, SAVE FOR WEB, we highly recommend using this button
(It creates a much better image with a much smaller file size)
Can you give me all the
rules, listed together?
1. DPI (72) <--Gif's
2. Colors (2, 16, 32, 256) (the less colors the smaller the file)
3. File names (8 characters or less, no capitals, no spaces, no underscoring)
4. Compression (66%) (if it is a .jpg)
That's it...
How do I tell if I made
the picture bigger or smaller?
If you want to look at file
sizes, to 'see' the difference in the file size you can do it in almost
any program (AOL, Windows Explorer, Photoshop, etc) by clicking FILE,
OPEN, finding the file on your computer, and changing the VIEW MENU (Generally a
little button on the top left) to show details... Compare the original
picture (BMP, GIF, JPG to the new picture GIF, JPG and simply see which
has the smaller file size).
Note: Some pictures will
look bad at less colors and it may not be possible to reduce their file
size without distorting the picture, but most pictures can be downsized
quite a bit without changing the way the picture looks)
Does it make a difference?
This website
www.knightsofkindness.com
took over three minutes
to load because there were so many pictures on it, but after redoing the
pictures as outlined above, it now takes approximately 40 seconds (75%
less time for every single visitor to open our site). So yes, it is worth
the extra time and effort to reduce the file sizes.
And believe me, when we
visit your website, we will know... by the load time, if you listened
or not, lol...
Huggs...
BaddTeddy,
BaddFroggy and the
KNIGHTS OF KINDNESS
|
