  |
Working With Graphics For The Web
Using web graphics is one of the most confusing tasks you will need to address if you create or use graphics for your website. Today I want to discuss some of the basics. The most common mistake even experienced webmasters make is using the wrong graphic type for the purpose. First I can tell you what a "file type" is. Graphic images are written is a specific format when saved. The file type determines how the code that is written on your hard drive. On the web we use .jpg, or .jpeg and .gif image formats. We choose these formats because we can compress the files to use less space on your server. The file format also determines how long it will take to load from the Internet to your Web Pages. The screen resolution determines how much detail that you can ram into a graphic. The higher the resolution the sharper the image. A high-end print graphic might be scanned at up to 3200 DPI+ (dots per inch) in order to capture all the detail. Our eyes can actually see the difference between 85-100 dots per inch in a newspaper and 200-300dpi which you might see in a printed brochure. The higher resolution the more detail you will see in high end printed material. It doesn't make sense to use anything higher than 300-dpi in printed photos because our eyes can't tell the difference. Also the printing process can't print ink on paper beyond 300dpi resolution. Web graphics are much different. The higher the resolution the better the detail but the amount of detail is limited to what your computer monitor can display. Final web graphics should be 72dpi (pixels per inch) to match your monitor resolution, anything higher is useless on the web and will just slow down loading time. However I scan images at 150 to 300 dpi on the scanner. I do this so that I can start out with as much detail as possible. I edit the image at 150dpi and reduce the resolution to 72 after I have optimized the graphic. Since the monitor displays at 72 pixels per inch, using a resolution of 150 for a final graphic would take up twice the space on the web page. Reducing it to 72dpi (roughly one half the resolution would display it at the exact size it would display on the web. Most editors will start out in RGB Mode (red, green, blue) displaying unlimited colors. In Photoshop the default type has a .PSD file type extention. The name would appear as "sample.psd", in Paint Shop Pro the default extention would appear as "sample.psp". It's best to create and edit your image in the default file format. This is because usually the default format will give you the highest quality image and offer the most flexibility in building and editing your graphic. I usually scan and work in 150 to 300dpi. I save the original in the default file type before I reduce the resolution to 72 for use on the web. The original remains the master graphic if I need to regenerate a new image with changes in the future. GIF Wizard reduces image size up to 90% without sacrificing quality. Unlike other file types your.gif images can also be saved with transparent areas. This is accomplished using an option in your image editor where you select one or more colors or a range of density to be invisible on your web pages. This is used most often for getting rid of backgrounds in your graphics or to allow other image layers to show through transparent layers. The final .gif image can only be one layer so you would need to reduce all layers before choosing transparent areas in your graphic image Non-safe web colors appear to have dots of a second or third color. This happens when your video card boils down all the possible colors the colors to 256 Windows standard colors. This effect is most noticeable in complex colors like orange and gold. Netscape developed a 256-color palate when most computers could only display 256 colors. It actually contains only 216 unique colors. This is the most common standard used on the web. The actual colors you see may be slightly different because Windows displays all colors to the nearest standard Windows color. The Color Cube link below will explain it in more detail. You can't control how people set up their computers, but you can control what they see when they view your site. Most image editors now offer the option to save your image in "web Safe Colors" If not you can use plug-ins to save them in web safe colors. Remember that this is not as big an issue now as it was 2 or three years ago as 80% of all computers will display in at least 65,000 colors. However Internationally there are a higher percentage of computers that can only display 256 colors. A rough guideline is to consider your load time for the slowest user. That would be roughly one second for each 1K-file size. Under this rule the longest a 7K file would require about seven seconds to load. With a 28.8bps modem it would load in 3.1/2 seconds 56K modem in less than two seconds and so on. It's a good Idea to use the same graphic over and over. For example use the same logo graphic, button or bullet graphic on each page when possible because the server only has to download the image once. Your browser can load the duplicates from your hard drive which is hundreds of times faster. It will display it as many times as called for. Use as few unique graphics as possible per page. Shoot for a total page loading size of 70K. Hopefully is can be much less even including all the HTML code and all the unique image files that are linked to your page. Here is an example. You may also see an option to save the image as *interlaced*. This will display a rough image sooner and gradually fill in the details, it's actually a bit slower but it appears to load faster. FILTERS Most Image editors can use graphic filters and plug-ins they allow you to make many kinds of specific changes to your images like sharpness, texture, graduations, 3d effects and more. Some examples include eye candy, filter factory and KPT filters, these are after market software add-ons, which are compatible with well-known image editors like Photoshop and Paint Shop Pro. SOFTWARE & LINKS I am only going to mention a few of my favorites here. Get Photoshop is Here Paint shop pro is about as good and a lot less expensive, you
can download a fully functional demo at the following URL: More Image & Web Site Tools Banner Generator Tools See Your Website In Different Browsers Internet Web Site Reviews Downloadable Graphics And Other Design Resources Best Wishes Bob ROBERT SMITH
helps thousands successfully market their Internet based home business. You can reach him by phone at: (541) 689-1847 PST, and by email at: The Best Programable Follow-up System Available Today
|
 |
 |
|
|
Click Here to Email Bob Smith
