WEB DESIGN GRAPHIC

The powers of graphics is most understood by looking at those website pages that can stand alone without any other content. Graphics are used to emphasize the name, quality, professionalism and image of your company.

The two main types of images for use on the web are the GIF and the JPG; both are bitmaps. Both the JPG and GIF can be utilized on development projects depending on the type of images used on the project. Proper optimization of these images will enhance the application performance and reduce the download times.

To get the best results from the graphics in your application, pick the appropriate format. Use JPG format for photographic images, modify the source file rather than a JPG, and save JPGs at the size needed rather than changing in the code. GIF format is used for logos, line drawings and icons.

The web design graphic will support the type of web site you want to create, for example:

• ENTERTAINMENT
• EDUCATIONAL
• CORPORATE
• ELEGANT
• INNOVATIVE
• POWERFUL
• RETRO
• YOUTHFUL
• UNUSUAL
• INFORMATIONAL
• GOVERNMENT / OFFICIAL

Graphical Image Optimization
The key to creating graphical images for the World Wide Web is keeping the image file size relatively low and creating images that are optimized and display correctly in the browser window. Image optimization is the process of fine tuning and adjusting an image's file size so it displays the best it can on the web page.

The JPG
The JPG is a 24 bit color image that utilizes 16.7 million colors. JPG image format is best used when saving photographs. This format will preserve a broad range of subtle variations in brightness and hue usually found in photographs and paintings and gradients (a gradual transition of one color to one or more colors).

JPGs compress file size by selectively discarding data. This type of compression is called lossycompression. The more compression applied to a JPG image, the more users will notice that colors are dropped from the image color palette resulting in splotch areas that are extremely noticeable in continuous tone areas of an image. Also keep in mind each time one saves a JPG image they are applying more lossy compression to the image. With every save, the image loses additional sharpness and detail. To prevent overly compressed JPGs from happening, designers/developers should keep the original source image (usually a PSD file) used to create the JPG and use the source file whenever recreating or revising the JPG.

Another good practice with any image is to save the JPG in the correct output dimensions rather than resizing the image's dimensions in code. This practice will aid in faster download times for the end user and a clean image on the site.

If a large size JPG is being utilized then the image can be saved as a Progressive JPG. This will create a JPG that will show a low-resolution version of the image while the high-resolution version downloads in the browser. To specify a JPG to download on the web page progressively you must have software, such as Adobe Photoshop, that allows user upon saving the option of saving the JPG in a progressive format.

The JPG format is usually not the best format to save, images with continuous tones (large areas of continuous color). These are usually logos and clip art. The reason is the GIF format can compress these files into smaller file size without the causing the lossy distortion of the image that shows up as blurred splotchy patches. This image distortion is caused by the JPGs lossy compression technique and is usually most noticeable in continuous tones areas on an image.

JPG file format does not support transparency in images; therefore, if the artwork that you are going to utilize on a web page required transparency you will have to optimize the images as a GIF.

The GIF
The GIF is an 8 bit color image that only utilizes 255 colors. A GIF image is best used when images are line art, logos, illustration with type or when transparency is needed.

GIFs compress file size by utilizing lossless compression. This type of compression does not discard information, like lossy compression does to the JPG. As a result, lossless compressed images can only be compressed so far. To help further reduce file size images saved as GIFS, users can specify the removal of unneeded colors. GIFs can also utilize dithering, which is ability for computers to approximate a color by combining the RGB values.

One of the biggest advantages to using GIF is that they can be saved to be transparent. I wish I could say that creating transparent images is as easy as it pressing the save button, but in a lot of cases other factors play into the creation of a transparent GIF in order for it to show up correctly.

Transparency should only be used when an image might be placed on various backgrounds colors through the site. If an image is going to be utilized on just one color throughout the site then no transparency is needed.

The GIF format is an excellent format for saving images with continuous tones. Because of its compression technique, colors are eliminated, not image information. So this compression technique preserves continuous tones better and with a smaller, more manageable files sizes than the JPG format would for the same image.

Also designers/developers must keep in mind when working with bitmap images that there will be a jagged transition between the image and the background unless a matting color (transitional color) is used to blend the image into the HTML background. The color utilized frequently is a light grey “#DCDCDC” because it will create the best blend between the GIF and most background colors. Often times when white is used to matt transparent GIFs one can see the visible white halo around the image creating an image that is not clean.

Color - Background
Both JPG and GIF images utilize the RGB color mode. This color mode is utilized by TVs and computer monitors. The RGB color mode assigns an intensity value to each pixel ranging from 0 (black HEX value = #000000) to 255 (white HEX value = #FFFFFF). The RGB stand for Red, Green, and Blue, which when mixed can form over 16 million colors.

The HTML HEX code values are used by developers to give color attributes to text and other page elements. These are directly based on the RGB format color mode. HEX code is short for Hexadecimal which refers to a base-16 number that allows larger numbers to be displayed by fewer characters than if the numbers were displayed in the regular based 10 system. Therefore in HEX code values for the number 10 is represented by the letter A for that level of color intensity, 11 by B, 12 by C, 13 by D, 14 by E, 15 by F and 16 by G. Keep in mind when translating HEX Code into RGB color values that the first and second letter/numbers of the HEX number is the intensity value of red, the third and fourth letter/number of the HEX number is the intensity value or green and the fifth and sixth letter/number of the HEX number is the intensity value for blue.

So from what you know about HEX code values based from the RGB color modes what color would the #FF0000 be? If you guessed red you would be correct. There are a number of on-line resources that will help you convert HEX code values into RGB colors including http://www.visibone.com/colorlab and http://www.everythinglongdistance.com/tools/html-color-chart.htm#ColorChart .

Graphics can be magnificent masterpieces done by superbly talented individuals when they put their wild imaginations to use. Web design graphics are the first thing that viewers will see. It allows a preliminary judgment of what more there is to expect.