This is Lesson Seven of "AmeriYank's HTML Tutorial".
Last week, we learned how to make thumbnail images for our web pages. This week, we will learn how to compress our original graphic without having to make it physically smaller. We will use Paint Shop Pro to compress our images. These settings will work in both Paint Shop Pro 6 and 7.
There are 3 file types that will show on web pages: .gif, .jpg, and .png. The latter, .png, is relatively new to the web world and rarely used. So, we will concentrate our lesson on .gif, and .jpg. TRANSLATION: I have never used .png files so I don't know what I am doing there. (smile)
Because Paint Shop Pro tutorials are graphic intensive, this page will take a long time to load. The irony is, that in order to teach you how to create fast-loading graphic pages, I have to create slow-loading ones.
This week, we will explore .gif files, and next week, we will learn about .jpg files.
The FIRST rule of graphics creating is to SAVE YOUR ORIGINAL AS A PSP FILE BEFORE you save it as a .jpg or a .gif. Why? Because they change your original image slightly--most of the time it is unnoticable, UNTIL you want to change the graphic in some way. Sooooo, to prevent heartbreak, tears of frustration, lost hours of work, AND a trip to the confessional for all the bad words you have said...ALWAYS, ALWAYS, ALWAYS save your work as a PSP FILE.
OK. You have your nice image that you have spent hours to get just right. It's perfect. And, as an UNcompressed .gif file, at 6 kbs looks like this:
but, when compressed to it's fullest possibilities, it look like this:
YUCK! but less than 1 kb.
Obviously, you want to end up somewhere in between. I have compressed the screen shots for this tut as much as I dare, and still have them readable. So, as we are now to begin, please open your PSP program (6 or 7--doesn't matter which) .
Once you have done that, open the graphic you want to compress. NOW, RIGHT THIS SECOND, MAKE A COPY OF YOUR GRAPHIC. If you hit the "Shift" and the "D" keys at the same time, PSP will make you a brand-spanking new copy of your original.
|Now, go to "FILE", "EXPORT" and choose "Transparent GIF".|
|This is the
window that will open for you.
Making transparent GIFs is a whole diferent lesson, so, for our purposes here, on the TRANSPARENCY tab, click the first choice, which is "None"
|Next, click on the tab that says "Partial Transparency". You have 2 choices to make. Your existing image will show as the "Uncompressed" on the left, and how your new compressed image will appear with your choices on right. It also tells you how much the space the image will take up when compressed.|
on the COLORS tab. This is THE MOST IMPORTANT TAB. Here
you will determine how many colors your image will use.
PSP can create images with up to 16 million colors. The
most a GIF image will use is 256. Because of this, some
images cannot be used as GIFs because they just look like
On this tab, just play with the choices till you see something you think will work and not make your image look like poo-poo.
|I never touch the FORMAT tab. Mine is set to "NON-INTERLACED" and I leave it like that.|
|Click on the tab that says "DOWNLOAD TIMES". This will tell you how fast your image will load when someone visits your site. 56k modem is the fastest anyone without a DSL line or cable connection can get. Many people are still using modems that are 28.8K speed or lower. Be mindful of how many graphics you use on your site. Both the graphics and the HTML page itself must load for people to see your work And all of these files will take some time to load. Be sure to consider the ALL parts of your page added together and not just the individual graphic you want to compress now.|
When you are satisfied that your choices will make a good, clean looking, fast loading graphic, click the "OK" button and give your NEW graphic a name. It is good to name is something similar to the original. that way you do not go back months later and think, "What the HECK is THIS?" Plus, it also makes it easier to find it.
At the bottom of all the screen shot above, on the left, there is a button called "Use Wizard". By clicking that, PSP will take you you through a quick way to compress a graphic. But you lose a LOT of control. I have found that, in the end, it is faster, and you get better results, by using the above method.
There is ONE more way to compress a gif file in PSP. This one will also work with PSP 5.
After making a copy of your image, CLOSE THE ORIGINAL, click on "COLORS", then "Count colors used". This will give you an idea of the number of colors your image is using. Next, go to "COLORS", "DECREASE COLOR DEPTH".
Looking at your choices, start with the lowest number of colors you DARE, and choose it from the list.
On the window that pops-up next, choose "standard web-safe" and "nearest color". The go to "FILE", "SAVE", and in the pop-up window, where it says "save as type:", click on the arrow, scroll the choices till you see:
Compuserve Graphics Interchange (*.gif)
Choose it, and name your graphic and save. Many times I have better results with this metod than with either of the above ones.
That's it! If you like, add your new graphic to your page, as you would any other, just like we did in Lesson One.
Mary, Madonna and Blessed Virgin Mother and Jesus
Designs for Tsunami Relief.
Back to Lesson One Back to Lesson Two
Back to Lesson Three Back to Lesson Four
Back to Lesson Five On to Lesson Seven
On to Lesson Eight On to Lesson Nine On to Lesson Ten