You should use JPG files whenever you need to keep fine detail and gradients. For example, the following should almost always be JPG files:
- color photographs of products and people,
- most black and white photographs ,
- 3-D models or graphics,
- logos with gradients and intricate rounded edges
Have you ever wondered why web page images appear pixilated when printed? A JPG file is wonderfully small, often 1/10 or less the size of raw TIF or other format files. JPG, unlike other formats, is “Lossy”. In many other formats, when an image file size is compressed, all original data is kept—meaning you could expand it back to the larger size. This is “Lossless” compression. JPG, however, are designed to have “losses with image quality” during compression—meaning you will see a picture of very similar quality on the screen, but the file size is much smaller and the original data is no longer available.
There are pros and cons to using JPG images. One good thing about JPG files is that they are incredibly small and fast loading, perfect for web an email. Beware of JPG files for printing as they are often compressed into small web files that will print pixilated (you will see squares or dots, the printed image will appear blotchy).
When saving a JPG, in most programs your File-Save As will ask you to choose the quality you would like to save the image as. This is the programs way of asking you for the JPG compression. Photoshop, Elements, Photodeluxe, and PhotoImpact call this setting JPG Quality. Paint hop Pro and Corel call it JPG compression. Whenever you save a JPG file there will be some degree of compression. Beware of modifying and saving the same file many times as it can significantly reduce the quality of the JPG, instead keep original art as lossless TIF files. Usually Lower compression settings (smaller file size, lower image quality) will be the best choice for web images. Try saving your file both ways, you will most likely notice little difference.
You should use GIF files whenever you have large areas of solid color and relatively simple images, such as logos or cartoons. The following should almost always be:
- test and text art ,
- art with solid areas of color ,
- simple logos or cartoons,
- any art that requires a transparent background
GIF images are a fabulous thing, particularly considering that they have the ability to have a transparent background. What you need to keep in mind is that GIF is a smaller file type than JPG and generally hold less fine detail. Photos or images with many gradients and colors may come out pixilated when saved as a GIF, and not look good on screen or in print. A finished GIF should be set at no more than 72 dpi (pixels or “dots” per inch), making a small file that loads extremely fast.
The standard GIF is an 8-bit, or 256 color GIF file. For very simple images, such as monochromatic logos or lettering, file size can be even further reduced by lower. For instance, the next step lower contains 128 colors and is referred to as a 7-bit GIF. Other standard GIFs are as follows:
- 8-bit: 256 colors
- 7-bit: 128 colors
- 6-bit: 64 colors
- 5-bit: 32 colors
- 4-bit: 16 colors
- 3-bit: 8 colors
- 2-bit: 4 colors
Since there are obviously more than 256 colors that can be displayed by you average modern monitor, a process called “Dithering” is used. When a GIF image is displayed, such as in the browser that you are using to look at this page, dots of the available colors are mixed together to simulate the actual color. This is dithering at work. When viewed closely, dithering can appear unattractive and pixilated. This problem is compounded by the fact that browsers use separate color palettes, which may skew the true color. To avoid this, web designers are able to choose form a palette of 216 browser-safe colors.
GIF images are handy because they can have transparent backgrounds. In your graphic editor, you may select one or more colors within the GIF file. Every pixel of this color will then appear as transparent. This can allow you to make designs that show through on e another, or areas where text underneath an image shows through. Be careful with using transparent GIFs on rounded images. Advanced graphics programs such as Adobe Photoshop automatically add pixels to your curves so that they appear smooth, even when every pixel selected turns transparent. In less advanced graphic editors, be cautious of creating poor quality images with pixilated curves.
GIF images may also be used in animations, in which a number of sequential gif images are looped to created an animated picture. The down side is that no compression is applied between frames in GIF images, meaning that if you combine 3 30kb images into one animation that animation will be 90kb. This is aided by the fact that the GIF animation streams to the user, meaning that while the animation is playing, the other images may continue to download in a large file. GIF animations are suitable for small animations and icons. For larger animated pieces, explore other technologies, such as Adobe Flash.
To recap what we have already said, if you are to be taking images for your website or online store, remember to design for people first, machines second. You want appealing images that interest your viewer in your products, but you also want to make sure that those images are not taking excessive time to download, thus driving visitors away from your site before they've ever begun.
Photos and other high-resolution images should be in JPG format, saved at low or medium quality in most cases. Logos and other simple graphics, such as comic strips and cartoons, should be saved as GIF files. GIF files will also allow you to animate and create transparent backgrounds.
Technorati Profile
Game Design Center offers graphics design services. We can rebuild the graphics of your current page in whole or in part.
