Archive for February, 2008

Saving Images For The Web

Monday, February 11th, 2008

There are a lot of people creating graphics for the web. A significant portion of those people have no understanding of how to optimize images. I’ll attempt to explain it.

Typically, I’d explain when to use each format by looking at the format and exposing the flaws and virtues. Most non-geeks would get lost, though. While I will discuss file formats out of necessity, my aim is to discuss styles of graphics and how to optimize them the best way.

All the instructions are given in Gimpshop, the GIMP with modifications to make it more Photoshop-like. Typically these are similar to Photoshop. I planned to do Photoshop, but I don’t have regular access to it. I tried to note differences where I could remember. I’ll try to update this eventually with Photoshop instructions.

A Quick Note About The Scope of This Article

There are two ways to display images: vector and raster. Vector images are stored as formulas that, when combined, represent an image. Raster images are stored colors and coordinates of dots (called pixels). The web-safe raster formats (the subject of this article) are JPEG, GIF, and PNG.

Vector graphics have a very strong place in the design industry. Any serious designer making logos will be making them as vector art, for example. Vector images are infinitely scalable without quality loss and are very powerful in the right hands. The web at this time, however, is raster.

While there are vector image formats for the web (SVG and Flash are two major ones), most web graphics are raster. Vector graphic support, at the time of this writing, requires plug-ins for viewing or has limited browser support. To boot, I’m not clear how much optimization can be done to vector graphics compared to the likes of raster web formats. So, I’ll be sticking to raster images.

Three Typical Scenarios

When creating art for the web, there are three typical scenarios where images are needed:

  1. Line art and Icons
  2. Photography
  3. Design Graphics

I’ll go over each scenario and explain what it is, how it is used, and the typical way to output an attractive looking, lightweight image file.

Line Art and Icons

Line art and icons are either very simple images of varying dimensions, or very complex images at a very small dimensions. The line art moniker includes graphics like clip art, comic style art, or any graphic that has very few colors with lots of solid colors. Icons, in this instance, can be things like logos, simple graphical representations of concepts (for example, a contact us link may be represented as an icon of an envelope), or very small thumbnails (say, 50 x 50) of larger images.

What line art and icons have in common is low color depth. This makes these images ripe for indexed colors. That is, by throwing out unneeded colors, the file can be reduced in size. Likewise, changing similar colors to the same value reduces the file size. Two file formats play well with indexed color: GIF and PNG. To boot, both of these formats allow for transparency.

Before you create the file, make sure your image is 72 DPI. You can do this by opening
Image > Image Size

in both Gimpshop and Photoshop. The resolution should be set to 72. If you are using Gimpshop, you get the odd choice of setting independent resolutions for X and Y. Make both
72

. You may have to adjust your width and height after you change the DPI.

In Gimpshop, select
Image > Mode > Indexed Color…

. In the
Indexed Color Conversion

dialog, select
Generate Optimum Pallet

. You will need to use trial and error to pick the maximum number of colors since GIMP provides on way to preview the image. The fewer the colors, the better, though. Once you’ve figured out the optimum number of colors, click
OK

. Gimpshop will then do the heavy lifting of removing extraneous colors. Then select
File > Save a Copy…

. In the save dialog, type in your file name with the .gif or .png extension. In either format, I suggest using interlacing (since it shows a visual progressive download). I usually disable all the other options, and set the compression level to 9 on PNG images. This will yield a similar file size for either format.

Photography

Photography is typically comprised of millions of colors and / or shades and is presented at larger dimensions than icons. Due to this, a format that can handle higher colors is needed. GIF is only good for up to 256 colors and full-color PNGs are often very large. This is where JPEG comes in. It allows you to present photography at full color while offering varying levels of compression / quality.

Determining the best quality setting is a per-photo trial-and-error process. Dark colors against light colors at lower quality settings tend to look particularly bad at the edges. So, it is important to always adjust the quality to various places to finesse the best file size / quality ratio (or bang for the buck, if you will). I’ve also found that Photoshop outputs better looking JPEGs at a given quality than Gimpshop. So, if you have the option, try Photoshop.

Before you create the file, make sure your image is 72 DPI. You can do this by opening
Image > Image Size

in both Gimpshop and Photoshop. The resolution should be set to 72. If you are using Gimpshop, you get the odd choice of setting independent resolutions for X and Y. Make both
72

. You may have to adjust your width and height after you change the DPI.

In Gimpshop,
File > Save a Copy…

and enter your filename with a .jpg extension. After you click
Save

, you will be presented with JPEG settings. Click the
Show Preview in image window

checkbox. Then adjust the slider until you get the best picture at the lowest file size (shown dynamically just below the slider). Under
Advanced Options

, turning on the
Optimize

checkbox will further shrink the file size. Turning off
Progressive

will make the file smaller, but will also make the image not appear progressively as it loads in the web browser. If the file size is already low, you may not need progressive. If it is larger, a few extra kilobytes may be worth it to pop the image content up sooner in an attempt to grab the viewers attention and keep them on your page. You’ll want to turn off the
Save Thumbnail

. The other options may yield subtle changes to your photo and may change the file size a little. You probably won’t need to change these from the default. Finally, click
OK

.

Design Graphics

The graphics that make up the design of the site are often sort of like photography and sort of like iconography. That is, they may have far more than 256 colors, but don’t show a photo. Also, these graphics tend to have drop shadows or transparency, which makes them a little more unique.

With one exception, optimizing design graphics is a trial and error between GIF / PNG and JPEG. Sometimes indexed color works best, and sometimes JPEG’s lossy compression works best. The bonus for design graphics is that you don’t have to wrestle with bang-for-the-buck as much. Due to the way browsers work, the images are cached (stored on the user’s computer) and aren’t downloaded every time the page loads. So, you can typically have a little bit heavier file sizes to make the page look better. Just don’t forget: the user still has to download the image, and long downloads irritate people.

The one exception is transparency, and that comes in two flavors: translucency and transparency. Translucency is usually referred to as alpha transparency or just alpha.

If you need an area to be fully transparent, GIF or PNG will work in the indexed mode. Follow the directions above for line art (even if it isn’t technically line art by my definition).

Things like drop shadows or antialiased edges (rounded corners, for example), however, need to be full-color (or 24-bit) PNG in order to take advantage of alpha transparency. You’ll notice if you have antialiased edges and you use an indexed PNG or GIF, your edges will be jaggy and/or you’ll have to specify a matte color. Mattes are problematic if your background color isn’t solid, as the matte may not match the color of the background. In this case, you’ll want to use 24-bit PNG. 24-bit PNGs tend to be much bigger. You may want to manually index the image or use tools such as PNGCrush.

Saving alpha PNGs differs from saving indexed PNGs in that you simply don’t index the colors before exporting. Simply
File > Save a Copy…

with the .png extension. If you are using Photoshop, you must select the
PNG 24

option in the
Save For Web

dialog. Once it’s saved, drop it on PNGCrush to remove any unneeded data.

One final note about design graphics is that PNGs can store additional information about an image to specify a color space (called gamma) that can cause the colors in the image to be different than identical color values in a browser. If you are using Gimpshop, you should be able to uncheck the
Save gamma

option to prevent this problem. Also, if you use PNGCrush, these values should be removed automatically. Since the gamma debacle is a big topic by itself, you can see how other people remove them or read the number one article in Google at the time of this writing.

You’re Done

That is the short version of exporting graphics for the web. If you find that clarification is needed or that I missed something, please leave a comment below or e-mail me from my contact form and I’ll do my best to answer your questions.

Tags: , ,
Posted in Web Design | Comments Off

Element Swapping with Unobtrusive JavaScript

Monday, February 11th, 2008

There may come a time when you need to show different content on one page based on a user-selected option. Here’s a quick tutorial.

The first step is to set up your content properly. In this example, I’ll use a select to swap between two form elements, though the basic premise can be applied to other design patters such as module tabs. Here is how the form should look. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<form method="post" action="post.php">
 <div>
  <label>
   How Should I Reply To You?
   <select name="type" id="type">
    <option value="email">E-mail</option>
    <option value="phone">Phone</option>
   </select>
  </label>
 </div>
 <div id="byemail">
  <label>
   Enter Your Email:
   <input type="text" name="email">
  </label>
 </div>
 <div id="byphone">
  <label>
   Enter Your Phone Number:
   <input type="text" name="phone">
  </label>
 </div>
</form>

That is the basic setup you need. You have something for the user to select (that has an id to assign, in this case, an onchange event), and something to swap between that have ids. Now you need some JavaScript. Comments are inline to explain things. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

/* Assign the onload event to the function init. */
/* Test which way adding events is supported. */
if(window.addEventListener) {
	/* W3C method. */
	window.addEventListener('load', init, false);
} else if(window.attachEvent) {
	/* IE method. */
	window.attachEvent('onload', init);
} else {
	/* Old school method. */
	window.onload = init;
}
 
/* This is the function that runs after the page loads. */
function init() {
	/* Get the select element you want the onchange to be applied to. I use the j_ prefix because sometimes errors happen when variables are named the same thing as IDs in the HTML. */
	var j_type = document.getElementById('type');
	/* If the element exists, we can assign the onchange event to call the swap function using the same type test we used before. */
	if(j_type) {
		if(j_type.addEventListener) {
			j_type.addEventListener('change', swap, false);
		} else if(j_type.attachEvent) {
			j_type.attachEvent('onchange', swap);
		} else {
			j_type.onload = swap;
		}
		/* Now, we need to fire the event to get the default. */
		if(document.createEvent) {
			/* The W3C method. */
			var j_event = document.createEvent('HTMLEvents');
			j_event.initEvent("change", true, true);
			j_type.dispatchEvent(j_event);
		} else if(document.createEventObject) {
			/* The IE method. */
			j_type.fireEvent("onchange");
		}
	}
}
 
/* This is the function that does the work of swapping the elements. */
function swap(e) {
	/* Get both the elements you want to swap between. */
	var j_email = document.getElementById('byemail');
	var j_phone = document.getElementById('byphone');
	/* Grab the event from the W3C method or the IE method. */
	var e = e || window.srcEvent;
	/* Grab the event target from the W3C method or the IE method. */
	var target = e.target || e.srcElement;
	/* Grab the target's value */
	var t_value = target.value;
	/* If both swap elements exist... */
	if(j_email && j_phone) {
		/* Depending on which option, hide or show the form elements. */
		if(t_value == 'email') {
			j_email.style.display = 'block';
			j_phone.style.display = 'none';
		} else if(t_value == 'phone') {
			j_email.style.display = 'none';
			j_phone.style.display = 'block';
		} else {
			j_email.style.display = 'none';
			j_phone.style.display = 'none';
		}
	}
	return true;
}

Save the script above to a file and include it in the head of your document that the form is in. You’ll have the swapping capabilities you desire using unobtrusive JavaScript and modern DOM techniques.

This was tested in Safari 3, FireFox 2, Opera 9.25, and Internet Explorer 7.

Tags: , ,
Posted in Web Development | Comments Off