Home page basics
Hello again, fellow Netizens. Last week, we covered the basics for creating Web pages. However, the Web isn't just text. You have to have images; your site's visitors aren't going to come back just to read. The problem is, most people don't understand how images work on the Web, and a lot of beginners make some very basic mistakes when placing images on their site. This week, we'll delve into the subject of images and graphics for the Web, and what you can do to make you site attractive and yet still be fast and responsive.
First, there are some things everyone should know about how images are displayed on a monitor. Most folks seeing an image printed on a piece of paper are viewing that image exactly as the designer wanted, due to the fact that the designer had almost total control over the entire printing process. On the Web, that control, for the most part, has been placed into the hands of the individual viewer. What this means is that your images might look fantastic on your computer screen, but they might appear as a dark and muddy mess on everyone else's systems. What can you do about this? Plenty.
There are some things that are constants on all Web platforms, be they Windows PC, Macintosh, Linux, or some other operating system. All systems that can display color share a set of 216 colors. This is known as the Web-safe 216. If you can use any one of these colors for your graphics, you can be assured that the green you chose for your background will display correctly on all screens.
Also, there are two basic formats that all browsers can read. These are the GIF and JPEG format. There are basic rules of thumb when you should use these. If you are doing illustrations or simple color schemes, like navigational elements or banners, the GIF format should be used. All photos and high-color images should be in the JPEG format. The reasons for this are that while the JPEG format is great for photos, its compression scheme isn't the best in the world for making small files. The GIF standard allows you to set a specific target, or color palette, that will allow you to make the file size as small as possible while keeping your image quality the best that it can.
Speaking of file size, this is the absolute No. 1 thing that I stress in building a Web site. While high-speed Internet options are becoming more prevalent elsewhere, most of Montana is still locked into the old way of doing things. It is better to design your Web page to be able to download fairly fast for a majority of all Web visitors. The more images and graphics you place on a single page, the longer it's going to take someone accessing that page on the Web to see everything on your site. And trust me, a 5-year old on a massive sugar binge has nothing on the impatience of Web visitors if they have to wait for your navigation to load so that they can visit your site. Your Web domain can become a cyber-ghost town if you fail to keep download times to a minimum. My general rule is that no single page should be over 40 kilobytes to view the entire page. This allows even those individuals with slower connections to be able to view your site and get around without a lot of waiting.
How do you get images onto your site? Well, as we covered last week, there are a great many inexpensive Web editors out there that allow you to design your page and add images to your design. But to create those images, you'll need an image-editing program.
If you have a scanner or digital camera, you probably have the necessary software. If you have neither, a great low-cost alternative to the higher-end programs like Adobe's Photoshop or Macromedia's Fireworks is JASC's Paint Shop Pro, available for a free trial download at www.jasc.com/psp.html. This great little tool has most of what the big boys have, and anything that's missing you probably don't need anyway. What's best, is it's under $100. Unfortunately, it's only available for PCs. However, for you Mac fans, might I recommend using Adobe's Photoshop Limited Edition, available at Adobe's Web site at www.adobe.com for $95. You can familiarize yourself with the limited edition, then upgrade to the full version of Photoshop for a few dollars more.
Next week, I'll give you some great sites for ready-made resources on the Web for site templates, free images and graphics, and even some cool online tools to help you create custom graphics that are now available online. Until then, happy surfing.
Ric Barrick used to have a problem with his JPEGs, but after seeing a doctor and some rehabilitative therapy, he's fine now. Thanks for asking. You can reach him at webmaster@