Home arrow Graphic Design arrow Page 3 - Graphic Design for the Web

Graphic Design for the Web

Aside from HTML, graphics are what make the web "look good." Many sites will turn a surfer away if they don't have pleasing graphics. We will cover some of the basic design tips and tricks to help your site stand out.

Author Info:
By: Rob Foster
Rating: 3 stars3 stars3 stars3 stars3 stars / 9
March 24, 1999
  1. · Graphic Design for the Web
  2. · Web Colors, GIFs and More
  3. · What about JPEG's?
  4. · RGB and HEX

print this article

Graphic Design for the Web - What about JPEG's?
(Page 3 of 4 )

Raul 2
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.

Raul 1
No Compression

Raul 3
9:1 Compression

Raul 4
13:1 Compression

Raul 5
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.

blog comments powered by Disqus

- Customizing Wordpress Favicons and Gravatars
- Building Corner Effects with Transparent Bac...
- 3D Graphics Technology: VRML Part I - Introd...
- Creating Visual Effects
- Web Page Design Overview
- Creating Artistic Photographs
- Working with Tools in Paint Shop Pro 8
- Using HTML Quickform for Form Processing
- Introduction to Adobe FrameMaker
- WebLogic Workshop, WebLogic Platform, and th...
- Planning the Site
- Working with Web Services
- WebLogic Workshop Application Development Ba...
- Scanning Images for Web Use
- Web Graphics Overview

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials