The key to creating graphical images for the World Wide Web and software applications is keeping the image file size relatively low and creating images that are optimized and display correctly in the browser window. By obtaining the knowledge of when to apply the proper image format to a given situation and how to properly optimization images to decrease download times, developers can assure themselves that graphics used in their projects will be optimized for success.
Image optimization is the process of fine tuning and adjusting an image’s file size so it displays the best it can in the intended production medium. For this article, our intended output medium would be the web and/or web based software applications.
The two main types of images for use on the web are the GIF and the JPG, both are bitmaps. You may ask, “Which one should I use?” and the answer is “both”. Both the JPG and GIF should 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 user’s download times. To understand which format to use, let’s take a step back and see how each image format treats color, file compression, continuous tones (the use of continuous color) and transparencies issues. But first, some background on the two different color modes: RGB and HEX.
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 from 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 now 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.paletteman.com/ and http://www.everythinglongdistance.com/tools/html-color-chart.htm#ColorChart.
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 lossy compression. The more compression applied to a JPG image 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 to 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 being is the GIF format can compressive these files into smaller files 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 the transparency in images therefore if you 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 upon saving the GIF file 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 playing 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.
A situation that calls for transparency would be a button that was going to be utilized on various background colors. The correct manner in which to use transparent GIFs is when an image will be placed upon more than one background color on a Web site
The GIF format is an excellent format for saving images with continuous tones because of its compression technique colors are eliminated not detail to 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.
Summary
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. Use GIF format for logos, line drawings and icons.
Mary Elges is the Web Designer at Pinnacle Decision Systems, a privately
held professional services and software Development Company in Middletown,
CT. Mary is certified as an Adobe Certified Expert with Adobe Photoshop,
Macromedia Flash Designer and CIW Professional Mary has worked on various projects designing intranet and Internet sites
for some of Connecticuts premier companies to include: CBS, Hartford Steam
Boiler, United Health Care, Connecticut Technology Council, and Evolution
Benefits to name a few. Marys expertise is concentrated in designing
original web graphics, designing web based software interfaces, Web site
design and multimedia presentation design. Pinnacle Decision Systems’ Web
site is located at http://www.pinndec.com. Mary can be reached at
melges@pinndec.com
