Checklist for Better Web Graphics

Graphics are critical in defining the ambiance, appeal, and professionalism of a site. While we try to deliver engaging graphics, we must also weigh the tradeoff of increasing the download times that heavy use of graphics can entail. Saving images in the proper format, minimizing image sizes, and using graphics appropriately can go a long way toward minimizing download times.

Use this navigation and jump directly to content :

{JPG} {GIF} {PNG} {Combination and Acquiring Images} {Creating and Editing Images with Effects and Filters} {Background Images} {General}

JPG—Did you:

  1. Save photographs and other continuous tone images as JPGs, unless the images need transparency or animation?

  2. Export JPGs at the lowest compression that still looks reasonably good on a web page?

  3. Minimize JPG file size by adding a small amount of blur?

  4. Avoid saving over the original (master) JPG?

GIF—Did you:

  1. Save line-based images with areas of solid color (such as cartoons, line art, and graphic text) as GIFs?

  2. Select an appropriate GIF palette, either a web-snap or a non-safe adaptive palette?

  3. Explore transparent image backgrounds so that images no longer appear to be rectangles?

  4. Turn on dithering if there are more than 256 colors in an image?

  5. Specify interlacing, when appropriate?

  6. Keep in mind the file size implications of excessive colors, vertical stripes, anti-aliasing, gradients, dithering, and textures?

  7. Store a photograph as a GIF only if it needs transparency or animation, and then use a 256-color adaptive palette with dithering turned on?

PNG Images—Did you:

  1. Use PNG format if you have a flat color image that needs more than 256 colors?

  2. Remember that alpha transparency increases fi le sizes and may not be supported by all browsers?

  3. Specify interlacing, when appropriate?

  4. Store a photograph as a PNG only if it needs transparency or animation, and then use an appropriate palette with dithering turned on?

  5. Use only compressed PNG files (not native Fireworks PNG files) on the web?

Combination and Acquiring Images—Did you:

  1. Avoid combining GIF-appropriate and JPG-appropriate art in a single image?

  2. Use stock photos and clip art when appropriate?

  3. Scrupulously obey copyright laws?

  4. Use screen capture software to acquire screen prints?

  5. Scan photos at the appropriate resolution?

  6. When possible, convert scanned images to vector format before resizing?

  7. Use a digital camera rather than a fi lm-based camera, as appropriate?

Creating and Editing Images with Effects and Filters—Did you:

  1. Use anti-aliasing correctly, to avoid halos?

  2. Match colors across software packages?

  3. Use dingbat typefaces for ornaments, bullets, and icons, and for smoother small shapes?

  4. Use effects and filters appropriately to embellish the page while avoiding effect overkill?

  5. Make sure that the light source for all 3-D elements on the page is at the same angle?

  6. Test your effects on a lower-end computer system?

  7. Contemplate using posterization, feathering, rounding, or putting an edge of some sort on a photo?

Background Images—Did you:

  1. Create background images that are subtle and of low contrast, so that foreground elements are the focus and are legible?

  2. Plan foreground elements so that they show up well, even with a high-contrast background, either by locking them on appropriate areas of the background or by outlining them?

  3. Create a background tile of appropriate dimensions so that seams don’t show?

  4. Use full-screen background images judiciously, and plan them to be relatively small files?

  5. Create a large background image so that it looks complete on small screens while, at the same time, avoids tiling on the larger ones?

  6. Specify the image as scrolling or fixed, depending upon which effect you want?

  7. Consider wrapping the “background” image in a table or <div> so that it is positioned where you want it on the page, without tiling?

  8. Consider using table cell background colors to mask the background image in content areas?

  9. Think about using table cell and <div> background colors to provide a colorblocked look without the use of background pattern at all?

General—Did you:

  1. Avoid gratuitous graphics?

  2. Use an appropriate format: GIF, JPG, or PNG?

  3. Reuse graphics throughout the site, whenever possible?

  4. Crop or downsize images so that they display at the smallest reasonable size on the screen?

  5. Use height and width attributes appropriately?

  6. Use an alt attribute on each image?

  7. Use visual echoes by repeating shapes, colors, and mood?

  8. Avoid web clichés?

  9. Think about the alternatives for image borders?

  10. Name images by function, rather than by visual attributes?

  11. Avoid animation unless to draw attention to the area you want to be the focus for your visitors?

  12. Choose an appropriate animation format?

Don’t forget to look at if you already didn’t see “All In One Design Checklist” and “Checklist for Better Forms” after this article.

There have been 9 comments | Subscribe to Comments | Jump to Form »

Torbjoern Karlevid

Some new stuff for me. Just curios are you also using this points… as your header graphic is 162kb ;)

1

Mert TOL

@ Torbjoern Karlevid :

Just curios are you also using this points… as your header graphic is 162kb ;)

True, of course I’m using most of them but you know byte transfers and all other things like that are in some kind of system with balance… Header could be 20kb or 500kb, the real important thing is a good balance.

As you see, these checklists talking about the standards and some important usability points. For me personally, web designers must learn the standards at the first and than create their own standards while using core standards. Sometimes you can break the rules but always you should have another plan for the people who visiting your website.

2

Ted Goas

Avoid web clichés? What?? Is there something wrong with businessmen shaking hands or a smiling call center operator wearing a headset?

3

Mert TOL

@ Ted Goas :

Avoid web clichés? What?? Is there something wrong with businessmen shaking hands or a smiling call center operator wearing a headset?

Of course nothing wrong with businessman shaking hands. I mean, avoid web clichés for graphics such as page hit counters and excessive animated graphics like A small ball alternating colors and An envelop opening and closing.

Usages of stock photos are could be another discussion. Because some usages can make your page look amateur and casual. In my opinion, don’t use smiling call center operator graphics if you don’t have a call center.

Visitors are clever and they’re seeing like these images everywhere in internet. Web experts must think about the psychological effects and features against the visitors for real success.

4

Marius

I wonder how “Minimize JPG file size by adding a small amount of blur?” works… I usually even give some more sharpness to the pictures, why would I blur them?

Could you give an example or something?

However, nice article! These really are important basics (although I didn’t know that blur-thing ;-p)

5

Mert TOL

@ Marius :

I wonder how “Minimize JPG file size by adding a small amount of blur?” works… I usually even give some more sharpness to the pictures, why would I blur them?

You can minimize JPG file sizes by adding a small amount of blur in non-critical areas—crisp edges between adjacent colors— and by reducing the contrast between the lightest and darkest areas in a photo.

You can use this technique in the future for some kind of reason. For instance, in mobile applications for efficient file compression in the JPG format. However, not always necessarily but thanks for asking. :)

6

Jesse

I’ve been using those techniques for quite a while now, but it looks like I might want to look into it again, this tips reminded me to think more about it. And thanks for this wonderful reminder.

7

Chris

Thanks for the great list! It will hopefully come in useful shortly.

8

Zeynel Aslan

Thanks for the sharing great list with us!

9

Post Comment on This Article

Your e-mail address won't be published. If you simply add some value to the original post and stay on the topic, your comment will be approved.

You can use Textile parameters on your comments. For example: _italic_ *bold* bq. quated text "link text":URL — Get your own picture next to your comment with a Gravatar account.