Optimizing and Using Graphics for the Web
This page is dedicated to helping you create better graphics for your web pages. You will find links to dynamite tips on graphic creation and optimization as well as to the best commercial and free software available for creating HOT web graphics. Whether beginner or advanced, you’re sure to find all the tools you need here to create cool graphics for your next killer web site.
Watch that file size
Bigger is not always better – One of the most common mistakes I’ve noticed with graphics on the web is using the incorrect format or graphics that are too large. You must be careful to use only the resolution, size and color depth necessary. If you are preparing your own graphics, you must learn when to use .GIF and when to use .JPG.
Following are several tips for selecting your graphics and keeping them small.
- Use GIF, not JPEG, for most images, especially for line drawings and other simple images with fewer colors.
- GIF files can only represent 256 colors.
- Keep the color palette as small as possible on all .GIF files. Limit bit depth to 8, providing for a maximum of 256 colors, which is all that can be viewed on monitors for many small business and home computers.
- For best control across platforms, further restrict colors used on your pages to the 216 colors that are identical for both Mac and Windows.
- To avoid ugly borders, the GIF 89a format allows transparency.
- Interlace your .GIF files. They appear to load faster.
- Use JPEG for photos and other images with subtle color shifts that don’t work well as GIF’s, or when color is critical.
- The JPEG file can contain millions of colors.
- JPEG files lose data when you compress them.
- Restrict images to 72 dpi.
- Use anti-aliasing with care. Visible jaggies are poor form, but crude “halo” effects are no improvement.
Why is size such an issue and how do I optimize graphics to load faster?
Let’s face it, most web surfers are pretty impatient. If your page takes too long to load, it won’t matter what else you do to your site because any prospective visitors will have left already. Some home pages literally take minutes to load! Most people simply will not wait this long.
If your site is overloaded with large or animated graphics, Java and sound, not only will it lag on slower modems, but some visitors simply will not be able to view it, due to incompatible browsers. If your home page is too large because it contains too much information, simply break the information up into several pages. No single page should be larger than 64K, including all graphics. Avoid needless animations as they tend to slow everything down. If there is no compelling reason to do it – Don’t!
If you have a large detailed graphic such as a map that you want to present to visitors, rather than slowing down the loading of your entire page, you will be better off if you put a smaller (faster) graphic on your page with the option of clicking on it for a more detailed view. That way, you do not alienate those viewers with a slow loading page who do not necessarily need to see the detailed view. For those who want the more detailed view, they will be more patient as you load it as a separate page.
ClipArt and Graphics Libraries
- Cool Archive – Free fonts, graphics, icons, animated gifs, clip art, backgrounds, buttons, balls, photos.
- FreeGraphics.com – Featuring the Internet’s top 383 graphic links!
- ProDraw Free Graphic Gallery – Home Of The Hottest Free Graphics
Graphics Generation
- Bannersnack – Create Free Animated Banners and Buttons Instantly
- Cooltext Online Logo Generator – A free service that provides real-time generation of graphics customized exactly the way you want.