This is Lesson Eight of "AmeriYank's HTML Tutorial".
Last week, we learned how to compress GIF images for our web pages. This week, we will learn how to compress JPG or JPEG files. We will use Paint Shop Pro to compress our images. These settings will work in both Paint Shop Pro 6 and 7.
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.
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 .jpg 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 "JPEG
Note: in PSP 7, it will say, "JPEG Optimizer".
|This is the
window that will open for you.
Click on the tab that says "Quality" and play with the number in the "set compression value to" box. The larger the number, the greater the compression. On the left, you see your original image. On the right, your image as it will be if you save it at that compression. You must decide what looks best.
|Next, click on the "format" tab and choose a format. Standard will just load. Progressive will load in stages, as the image loads in your visitor's computer. Personally, the progressive version drives me nuts, but many people feel it gives the impression that images are loading faster than they are. It's entirely your call.|
|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 to a JPG 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.
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 Back to Lesson Six
On to Lesson Eight On to Lesson Nine On to Lesson Ten