Graphic Design for the Web - What about JPEG's?
(Page 3 of 4 )
The photo above is one that Raul wanted placed on his web site as an example of his work.
Here's what we did with it...
It was originally a print that we scanned in to Photoshop and adjusted a little. After getting the tones to match the photo correctly, we saved it out using the JPEG format. As we mentioned above, JPEG's are good for photos. One thing to know about both GIF and JPEG formats is that they both use compression algorithms to reduce file size. In the case of JPEG's, this compression, if not watched closely, can really make a nice graphic look bad. To illustrate, we've included various versions of the same photo with various degrees of compression and file sizes...
In the first photo to the right, no compression was used and the quality is the highest. It looks great, but the size is high: almost 50k! This is unacceptable for the web since a whole page should usually never go over about 32k with all the text and graphics. The next example uses a 9:1 compression (about 20%) and although it still looks great, it has dropped to around 15k! This is the ideal size and quality and is used in the image above. The next two images use a 13:1 compression and a 17:1 compression respectively. Their sizes are also 10k and 5k respectively. Unfortunately, though they have small file sizes, the last two won't work for this image. Their compression has made them unusable visually.
No Compression
9:1 Compression
13:1 Compression
17:1 Compression
While on the subject of file sizes, I might add that the GIF logo above is only 8k and looks just like the original. The reason for this is because the GIF format is able to compress well. GIFs are best used with solid color images like text and logos Now you can see why GIF is preferred. So, you might be asking, "Why can't I use the GIF format for photos?" Well, you can, you just have to be selective. GIF format only allows for 256 colors to be left in an image after indexing. This means that you can get away with it for photos that are black and white or have a few colors in them. Also, in this case, when indexing the colors, you don't want to index the colors to the web palette, rather to an adaptive palette, meaning that Photoshop will make a 256 color palette out of the colors in the photo.
Overall, when it comes to finding which format will work best for a given file, it's best to get your hands dirty and do some experimentation.
A tip for Macintosh users: if you use Macintosh to create your graphics, you should keep something in mind... Graphics will always look a little darker in Windows than on the Mac. Make sure and preview all your work in both Mac and Windows and both Netscape and Internet Explorer before finishing something.
Next: RGB and HEX >>
More Graphic Design Articles
More By Rob Foster
