 |
 |
 |
|
|
| | | | Reuse your graphic images | |
|
Reusing your graphics images is a great way to speed up and brighten up your pages.
All you have to do is make several references to the same graphics file from different places on your page, or from different pages at your site.
When a Web browser accesses your site, it will get the graphics file only once, and then it will keep it in a cache on the browser's computer.
From then on, any other reference to the file will cause it to be retrieved very quickly from the cache, and it won't spend any time getting it over the Internet.
If you reuse your graphics images you don't have to compromise between fast pages and lots of graphics. You can have both!
|
| | | | Use transparent GIF images | |
|
Graphics are usually stored as rectangular images. If you want to present a graphic image with an irregular outline shape, consider using transparent GIF images.
Most graphics packages support transparent GIF images, and have an options dialog box for controlling the storage of the image.
When you use a transparent GIF image, you can specify a single color as the background color.
When a Web browser paints the image, it does not paint any of the pixels of this color.
The effect is that the Web page background shows through, and the image appears to float or be drawn on top of the page background.
This is a cool effect, and it adds interest to any Web graphic.
For more information on transparent GIF files, check out Transparent Images, Yahoo's index of resources on transparent GIF images.
Also, remember that you can sometimes get the same effect without using transparent GIF files.
Just use a background color for your Web page, and choose the same "background" color for your image.
When the browser paints the image, the "background" color of the image will be indistinguishable from the page background color, and you will get the same effect as the transparent GIF.
Of course, this only works if the page background is a solid color, but it is dead simple and it works with any graphics file format.
|
|
You've probably seen animated images dancing around on Web pages and wondered how they do it.
It's easy - they're just GIF image files with multiple frames stored in them.
To create animated GIF files, first create a separate GIF image for each frame of the animation.
Then combine the frames into a single "animated" GIF file.
The best PC-based tool for this is GIF Construction Set, but you can find other resources at GIF Animation on the WWW.
Put a little vitality back into your Cyber life - get animated!
|
| | | | Know the different between GIF and JPEG | |
|
Most browsers recognize graphics in GIF and JPEG formats.
Just use the .GIF, .JPG, or .JPEG file extension and the browser will know how to handle it.
So when should you use GIF and when should you use JPEG?
Both GIF and JPEG files are compressed.
GIF uses a lossless compression scheme which is optimized for images with regions of solid color.
JPEG uses a lossy compression scheme which is optimized for images with many mixed colors (like photographs).
GIF files only require additional size when the color of horizontally adjacent pixels changes.
In other words, a horizontal line of a single color takes the same amount of space no matter how long it is.
This makes GIF format ideal for solid color images like logos, cartoons, and text stored as graphics.
JPEG files use a lossy compression technique (slightly adjusting the colors) to give a visually similar image that takes less space.
You can choose how much compression (and color change) you want. For natural, photographic, or multi-color images, JPEG does a good job.
For lots of detailed information about JPEG, check out The JPEG FAQ.
Choose GIF file format when you have a solid color image, and choose JPEG when you have a photographic image.
When in doubt, try both formats and choose the one that gives the best image quality for the lowest file size.
|
| | | | Get free graphics from the web | |
|
Documents on the Web are in the public domain, so you can copy all the graphics that you want from the Web, right? Well no, not really. Just like any other written documents, Web documents may be protected by copyright, so you can retrieve them but not copy them for further distribution. Please don't go around stealing other peoples' stuff without their permission.
But don't hesitate to get the free graphics that are available on the Web. Check out Free GIFs and Animations, which offers free transparent GIF images for all kinds of lines (horizontal rules). Also, try Helen's Background Images for free background images.
|
| | | | Choose non-dithering colors | |
|
Dithering is a technique that graphics displays use to produce colors that are not in the display color palette. They mix colors in adjacent pixels to give a blend that approximates the desired color. For instance, to produce a darker gray, a graphics display might sprinkle a few black pixels onto a gray background. These sprinkled-in pixels catch the eye, and produce less pleasing results than solid colors.
Check out The 256 Colors of Netscape for an excellent discussion on the subject of dithering.
You can avoid the problem of dithering colors by selecting non-dithering colors for your images. Just use the non-dithering colors that Lynda Weinman has cataloged. Note that there is a difference in the ways Macs and PCs dither colors, but all of these colors are non-dithering on both machines.
Don't dither on this issue - choose the right colors
|
| | | | Change your background color | |
|
Changing the background color of your Web pages is an easy way to make a first impression. Pick a nice color that sets the mood you are trying to create. To specify your page's background color, just use the HTML tag:
<body bgcolor="#" text="#" link="#" vlink="#">
You need to specify the colors that you want by filling in the '#' signs with RGB (Red/Green/Blue) values in hexadecimal. bgcolor is the background color for the page, text is the color of the body text, link is the color of hyperlinks, vlink is the color of already-visited hyperlinks. As an example, this page uses:
<body bgcolor="ffffff" text="000000" link="000080"> ,
which creates a white background, black text, and 50% blue hyperlinks.
RGB colors in hexadecimal are specified as RRGGBB; the first and second characters are for red, the third and fourth characters are for green, and the fifth and sixth characters are for blue. Hexadecimal numbers were invented by a guy who has sixteen fingers, so the digits are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f. 00 means absence of the color, ff means full color intensity, and numbers in between like 1f, 44, 7e, b5, and e3 represent increasing intensity of color. Learn how hexadecimal corresponds to color at Colorama.
You can play around with background colors and hexadecimal numbers at HTML Background Color Selector, a site that will create a page with any colors that you like!
|
| | | | Change your background patterns | |
|
For live examples of how to change your background pattern, check out Show Me the HTML!. Cool!
Changing the background pattern of your Web pages is an easy way to make an impression. You can use any GIF or JPEG file, and the browser will tile the background with the graphic image (repeat the rectangular image in horizontal and vertical directions). To specify your page's background pattern, just use the HTML tag:
<body background="pattern.gif">
It can be a lot of fun creating background patterns. Although background patterns are tiled and therefore have a rectangular repetition, it is possible to create patterns that appear to have diagonal lines or no repetition at all.
|
| | | | Use smaller graphics files for quick response | |
|
Speed makes a difference on the Web - the faster your pages load, the more likely you are to keep the attention of your viewer.
There are two ways to significantly increase the speed of your pages: reduce the number of graphics images, and reduce the size of graphics images. Although reducing the number of graphics images can have a dramatic effect on speed, it also diminishes the content of your site and may not be acceptable to you. Reducing the size of your graphics images is often the preferable way to speed up the response of your pages.
Sometimes you can make the same impression with a smaller image. Try decreasing the physical dimensions (height and width) of your image. Since the number of bytes is typically related to the square of these dimensions, reducing height and width can be significant.
Try using solid-color GIF images (like logos, cartoons, and text as graphics). The GIF file format is very efficient with images that have horizontal regions of solid color, so design your images accordingly.
Check out the tips at The Bandwidth Conservation Society, where they tell you how to reduce image sizes by decreasing the number of colors in your graphics. The trick is that GIF and JPEG are indexed color formats, so the fewer colors you use, the less bits are required to store each color index.
As a general rule of thumb, I try to limit the total size of my Web pages to between 10K and 20K bytes (less than 10K if possible). This typically consists of about 2K of text and a couple of images which are less than 4K each. Most of my pages here at Great Website Design Tips take a total of less than 5K bytes, and I reuse my graphics (so that your browser only loads them once)!
|
| | | | Master your graphics tools | |
|
Whether you are a talented or an amateur artist, you need to master your graphics tools. If you're like most people, you probably don't want to spend a lot of time learning your software tools. Too bad, you have to take the time to master your graphics tools.
You'll find that many graphics techniques are easy if you learn a few tricks. Once you know the trick, you can crank out lots of cool stuff. Check out Photoshop Tips for information on Adobe Photoshop and Kai's Power Tips and Tricks for Adobe Photoshop for over 20 cool tips on creating graphics effects using Adobe Photoshop.
Best of all, spend time playing around with and learning your graphics tools. Your web sites will benefit from every minute you spent learning your tools!
|
|
For live examples of how to create the HTML for background colors and images, check out Show Me the HTML! Cool!
When choosing colors for the text and background of your pages, remember to use dark against light. In other words, use light text against a dark background or dark text against a light background.
This basic principle will guarantee that your text is readable (which is important!). It will also help guide you if you get in the mood for some wild colors.
Don't make the mistake of using a background pattern that has both dark and light colors - it is difficult to choose a text color that is readable against such a background.
All this talk about color makes me want to break out of this black and white phase I'm going through!
|
| | | | Background color is faster than background pattern | |
For live examples of the HTML for background colors and patterns, check out Show Me the HTML! Cool!
Background patterns are nice because they allow you to use any image that you want for your background. But background colors are a lot faster than background patterns.
A browser can paint a background color as soon as it reads the single-line HTML tag. With a background pattern, the browser has to wait until it reads the entire background pattern file before it can tile the background. The delay can be dramatic, and your poor viewer is stuck staring at a blank screen.
Another great way to get color is with table cell background colors. The following table is an example:
Teal Table Cell
Cyan Table Cell
The fast-loading HTML for the teal colored table cell is: <td bgcolor="#008080">.
You will have to decide for yourself whether you want the quick response and instant impression of a background color, or the superior graphic impact of a background pattern. If you choose a background pattern, remember to reduce the size of the graphic file as much as possible.
Time is of the essence!
|
|
|
|
|
|
