gifs/jpgs/pngs, wrong file format

resolution, colors

jaggies, halos, scaling

Good graphics on the web are always a compromise between how good a picture looks and how long it takes your web visitor to download and view it. If you keep this in mind, you can create fast, good-looking graphics. Remember when designing a website, to think of it as a work of art.

Here are some things to consider when creating your website graphics:

Web browsers can only display graphics saved in special file types. The two main graphical formats used are gif and jpg. When saving a gif or jpg file for a webpage, always use the three-letter extension of either .jpg or .gif at the end of your file name. It is important to pay close attention to case. When writing code, tags in HTML are not case sensitive. But filenames refer to files on a Web server somewhere, and because most Web servers run on operating systems where filenames are case sensitive (such as UNIX or Windows NT), you should make sure the case of letters in filenames in your links is correct. (We suggest you always use lowercase to avoid this possible conflict.)

GIF: Graphic Information Format (pronounced "jiff") If a graphic has less colors, choose GIF.

GIF files are best for simple images with fewer, flatter colors. GIFS are best-suited for charts, graphs, large areas of flat color, or text set as graphics, and can contain up to 256 colors. They can be "interlaced" so they appear to fade in, from lower to higher quality, while loading. They can be transparent so your background is visible. GIFS are "lossless," which means the image quality is not degraded by the compression process. They can also be animated. GIFS are not good for photographs because they can only hold 256 colors. (We suggest you use JPGS for photos.)

JPG: Joint Photographic Experts Group JPEG, (pronounced "jay-peg" and often referred to as "JPG") If a graphic has a lot of colors (such as a photo), choose JPG.

JPGs are best for images with many colors, such as photographs, paintings, large areas of non-continuous colors and scanned artwork. JPGs allow up to 16 million colors; compression is variable. JPGs are a "lossey" system: the more compression you apply, the more quality you lose. While file sizes can be made quite small with compression, you often have to compromise between size and picture quality. Newer graphics software allows you to preview your JPG images, so you can see the difference. Different programs use different numbers for JPG compression, but generally, the higher the number, the higher the quality and the bigger the file size. JPGs are not good for graphics with only a few colors, such as text set as graphics or graphics with areas of flat colors; if you use JPGs for these graphics, they will be larger than necessary, and look "mottled."

PNG: Progressive Network Graphics

PNG files are compact, versatile and can combine the best features of GIF and JPG, such as the ability to have transparent backgrounds or the ability to contain images with millions of colors. PNG supports alpha channels, which, unlike transparent GIFS, offers 256 colors of masking instead of one color masking. Because PNG is the newest graphics file format for the Web, it is only supported by newer browsers. Some of your site visitors may be unable to view your graphics under this format. PNG is not widely used, because older browsers do not support it.

Flash is a state-of-the-art method for vector graphics on the web. Macromedia Flash provides everything you need to create and deploy rich content and powerful Internet applications. Flash is used to support dynamic sites, where text, images, and animations are moving around on the screen. Traditionally, these effects were achieved with animated GIF images or java applets. In Flash, you can control the animations. For example; you can make the animation stop and wait for the user to click a button. And when the animation starts again, it can be depended on which button was clicked. Flash movies load much faster than animated GIFS. They allow interactivity and they can use more than 256 colors.

Flash movies are in many ways similar to java applets, small programs that can be embedded into your HTML pages. But unlike java applets, it is fairly simple to create animations in Flash without programming skills.

Anyone that has the free Flash plug-in /Active-X installed with their browser can view flash movies. People that do not have the plug-in installed can download it for free from Macromedia's website (size 120 Kb).

The number of pixels that can be displayed on the screen is referred to as the screen resolution. The greater the resolution, the more pixels that can be displayed; this allows for more to be shown on a monitor at once.

As a rule, graphics for the Web should be no larger than approximately 800 pixels wide, as most people now view the Web at a screen resolution of 800x600. Graphics wider than 800 will not fully display without scrolling. Your graphics program should be able to tell you the number of pixels in the width and height of each image.

When designing for the Web, resolution greater than 72 dots per inch (dpi) is a waste. There is no benefit to higher resolutions because computer monitors are unable to display them well. Files will be larger and take longer to download, but the image quality on screen will not be better.

Each pixel of your on-screen image is displayed on a monitor using a combination of three color signals: red, green and blue. The intensity of these signals determines its appearance. On a black and white TV or monitor, pixels have only two possible colors: black or white. This is called "1-bit" because the pixel is either on or off. On color monitors, each pixel can display a wide range of colors, from 16 (4-bit) to 16 million (24-bit). Most computer monitors today can display 256 colors (8-bit) per pixel. Newer computers routinely display 65,000 (16-bit) to 16 million colors. Because most of your web visitors' systems display only 256 colors, that is the number of colors you should design for. This doesn't apply to photos, however, which should always be saved as 24-bit JPG files.

Because images are created using pixels, grided squares, images that aren't square, can appear jagged. The distinct division between pixels is called "alias," so many graphics programs use a technique called "anti-aliasing" to create the illusion of smoothness. This is usually done by inserting pixels, which blend at the boundaries between adjacent colors. 

When using the transparency feature on GIFS, it will only replace one flat color shade. If your GIF has a background that is much different from where it will appear, making the background transparent will leave what is known as a "halo effect" around the object after anti-aliasing: To eliminate this halo effect, create your GIFS on a background similar in color to where they will be used. Then, when you make the background transparent, the slight edge that will be left, will automatically blend into the background it is placed into.

It is important to use graphics at the same size they are created. When placing art in your webpage, graphics and photo art will look better and load quicker if used at the same size. Remember when creating art, scale it before placing it into your html code. Resizing it in code might make the graphic appear blurry or unclear; it may also hold an image that is much larger than necessary, and have it load slowly.

HTML - is the acronym for hypertext markup language, the common language for inter-change of hypertext between the World Wide Web client and server. HTML is ideal for creating static websites where text and images are placed at fixed positions.

Lossless Compression - a data compression technique that reduces the size of a file without compromising any of the original data. In lossless compression, the expanded or restored file is an exact replica of the original file before it was compressed.

Lossy Compression - a data compression technique in which some data is deliberately discarded in order to achieve a massive reduction in the size of the compressed file.

Animated GIFS - load into a webpage by the browser simply looping the images. This means, if you make an animation of a baby waving in 25 small movements, then the animated area of the image is saved 25 times. So it doesn't take a lot of animation to create a GIF image that's remarkable bigger than a regular baby image. Therefore, even small animations take forever to load. While animated GIFs can be used for animations, they do not support inter-activity; they simply loop images in a predefined order.

Pixels - electronic images are made up of thousands of tiny colored dots called "pixels." The pixels are so small they cannot be seen by the human eye, so they create the illusion of a continuous image.

or call Luann at (973) 227-2000.