computer tutorials free

BaddTeddy
Computer Tutorials

computer tutorials



computer tutorials free

BaddTeddy
Computer Tutorials

Abuse

Knights Of Kindness  

Addictions

Consumer Help Family Matters Medical
Seniors
Adoption
Disabled Travel Government Medications Special Education
Birth Parent Resources
Disability Homeless Missing Children Stalkers
Car Buying
Education Humor Pregnancy and Children Stories Of Heart
Change The World
Emotional Support Law Resources Public Assistance Travel
Computer Tutorials
Entertainment Maps Save Money Viruses - Worms
Visit Our Main Site   Suggestions

computer repairs and computer tutorials


Finally, a place to put all your computer disks, cd's and dvd's

computer repair tutorials

BaddTeddy

Computer Tutorials

computer tutorials
Tired of your computer disks being scattered all over the place?

GRAPHICS

Understanding Graphics

And Reducing Picture File Sizes

Created by BaddTeddy
Edited by BaddFroggy - Frog With An Attitude

HOW TO MAKE PICTURES LOAD FASTER

Do you hate going to websites that take forever to load?
Well, so do visitors to "your" website.

Do you hate getting an email that takes forever to load because it has a ton of graphics? 
Well, so do the people you send emails to...

So, with this in mind, you are probably asking yourself: Is there any way to make my websites and emails load faster without losing the (clarity) quality of my images.

YES......

LOAD TIME

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

RELATED SUBJECTS

TUTORIAL INDEX COMPUTER BASICS VIRUSES SPAM RUMORS MAIN INDEX

This site was created by hundreds of good and caring people

Contact                                                                                                                                                  Privacy
 

I want to place or give up my baby for adoption