The Right Image Format

The image optimization series does an excellent job detailing which file format to use, and I suggest reading it (especially for the lossy, non-lossy comments), but here’s their summary:

• JPEG is the format for photos.
• GIF is the format for animations.
• PNG8 is the format for everything else — icons, buttons, backgrounds, graphs…you name it.

After implementing these strategies for a bunch of builds, here’s my take:

• JPEGs for photos or images with tons of colors
• PNG24 when you really need consistent alpha transparency
• PNG8 for everything else

The only difference here is that PNG24 definitely still has a place (oh, and really how often do you use animated GIFs?). The case they mention in which you have to use PNG24 (“When most of the image is semi-transparent”) is actually more common than they would leave you to believe. So how do you handle those cases?

Transparency and PNG Fixes

To handle transparent PNGs, do not use a JavaScript PNG fix. Instead, realize what those fixes do, and then actually apply the fix when and where you need it. The problem with PNG fixes in general is that they typically offer a blanket solution that affects every PNG on the site. You don’t want to be applying a alpha filter to a PNG8 that doesn’t have transparency, so there’s a lot of wasted effort. Not to mention the fact that these filters can be extremely taxing on the browser. There’s a simple CSS solution that can be added to an IE6-only stylesheet (assume #some-element already has a background applied):

#some-element {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}

That’s it! There’s also a VML fix, although the extra markup typically isn’t worth the better performance. Either way, the take-away is to apply the fix on a case by case basis, not with a blanket JavaScript add-on.

Compression

There’s a number of add-ons and/or tools online that will reduce the size of your images quickly and efficiently. The aforementioned YSlow and Google Page Speed are extremely easy to use if you have those add-ons. A new entrant is punypng, which touts its better performance over the Yahoo and Google offerings. Regardless, all tools offer bulk uploads, so after a site build, there’s no reason not to run your pages through these tools and update images that can be compressed.

If nothing else, I hope developers everywhere can remember a couple of things:

• Think about the optimal file format when saving an image
• Don’t use GIFs (unless they are animated… but c’mon)
• Don’t use a blanket PNG fix

(Advanced) Attribute Selectors

input[type="text"] { }
a[href$=".pdf"] { }
div[id*="foo"] { }

How many times have you added a class to text input elements just so you could style them? How about to external, or document links so you could have a hook there as well? Well with attribute selectors you don’t need that extra HTML cruft. Just make sure you aren’t using them for function-critical layout, because they won’t be recognized by IE6. In general, they are very useful for selecting:

• Inputs by type (text, checkbox, radio, etc.)
• Links by href (external links, document types, etc.)
• IDs or classes that contain a specific value

Pseudo-classes

ul li:hover { }
input:focus { }
ul li:first-child { }

Some pseudo-classes (namely hover, active, link, and visited) have been in use for quite some time. Focus is often overlooked (it gets removed by some CSS resets), but should be declared because of its benefit to accessibility for those that employ keyboard navigation. Before and after have marginal uses, especially with clearing hacks. First-child is definitely useful, and should probably be used more than it is currently (you don’t have to add “last” or “first” classes to your HTML). To summarize, use:

• Link, hover, visited, active for links
• Hover and active for other elements, for non-function critical styling (issues with IE compatibility)
• Focus, especially if you overwrote focus styles in a CSS reset
• First-child

Child Selectors & Combinators

In my opinion, child selectors and combinators only offer marginal benefit. For the most part you can accomplish the same thing with carefully crafted specificity rules. Regardless, since the only browser that doesn’t support them is IE6, feel free to use them in most cases.

That’s it! To save yourself the headache, don’t worry about memorizing other added selectors in CSS3 just yet. General IE support is extremely lacking, and there’s not a whole lot of value in a selector that isn’t recognized by the majority of your potential audience.

Page Load Speed

The first immediately noticeable benefit of CSS Sprite usage is the faster loading time of your page. It may seem counterintuitive, because you would think that the alternative (having many smaller images vs. sometimes extra images for Sprites) would be smaller in total size, but that’s not true. There’s a small amount of extra information in each individual image you use on your site, so depending on the number of images you may end up actually loading less when all is said and done.

Also, one of Yahoo’s best practices for reducing page load time is to minimize HTTP requests. Using the Sprites technique does just that, reduces HTTP requests by combining images in a single file. CSS Sprites are specifically mentioned in the same Yahoo article as a method to reduce image requests.

Accessibility

Depending on your alternative technique, using CSS Sprites could greatly increase the accessibility of your pages. Let’s assume we have the following navigation:

…and we want each element to light up on hover:

You could use individual images for each navigation element, and then switch them out with the latter treatment using JavaScript on hover. Your HTML would look something like this:

...
<img src="nav2.jpg" onmouseover="changeMe(this);" />
<img src="nav3.jpg" onmouseover="changeMe(this);" />
<img src="nav4.jpg" onmouseover="changeMe(this);" />
...

But what happens if a user’s browser doesn’t support JavaScript? Or CSS? Or images? Using CSS Sprites, your HTML code could look like this:

<ul id="navigation">
	<li id="nav1"><a href="nav1.html">Nav 1</a></li>
	<li id="nav2"><a href="nav2.html">Nav 2</a></li>
	<li id="nav3"><a href="nav3.html">Nav 3</a></li>
	...

…which would degrade much better in older or alternate browsers.

Time

CSS Sprites are easier than the alternative. Slicing up and dealing with multiple images is time-consuming, as is any necessary JavaScript image manipulation. Plus, there are even several tools that will generate Sprites for you:

• Website Performance CSS Sprite Generator
• CSS Sprites Generator
• SmartSprites

And these are just some of the benefits of this technique. If you haven’t at least tried working with CSS Sprites I highly recommend it.

Implementation

Download and store the JavaScript and CSS:

Simple Color Selector (.zip)
Simple Color Selector (.tar.gz)

Then add the following references to your page:

<link rel="stylesheet" href="/lib/styles/colorPicker.css" type="text/css" media="screen" />
<script type="text/javascript" src="/lib/js/colorPicker.js"></script>

Usage

The script creates the color table and assigns click events dynamically, so all you have to do is include the word “color” in text input classes like so:

<input type="text" class="color" />

By default, the script displays the following colors: White (blank), black, grey, red, yellow, and blue. You can easily replace the default colors by adding the following after you reference the main JavaScript file:

<script type="text/javascript">
	colorPicker.colors = new Array('', 'black', 'gray', 'red', 'yellow', 'blue', 'teal');
</script>

And that’s it! The user’s selection will be hidden within the text inputs, so upon submission you’ll be able to work with the resulting data. Feel free to modify functionality within the JavaScript file, or style within the CSS file.

I wanted to accomplish the look strictly with CSS and standards-based XHTML, which initially proved difficult because the lack of CSS2 support for multiple background images. If more browsers supported CSS3 and it’s support for multiple background images (only Safari does now), then I could have just used a quote background image for the top left and the bottom right. I also couldn’t use one wide background image that contained both quotations because the width and the height of the box would always be unknown.

Then I found an interesting tutorial that uses the CSS2 pseudo element :after to add additional background images after content. With a similar method, I was able to apply quotation marks before and after the <blockquote> content via CSS:

blockquote {
	background: url(quote-open.gif) no-repeat;
	color: #666;
	margin: 0 0 1em 0;
	padding: 0 50px 0 45px;
}
blockquote:after {
	background: url(quote-close.gif) no-repeat right;
	content: '';
	display: block;
	height: 25px;
	margin: -2.25em -40px 0 0;
}

Works like a charm in browsers that support CSS2, but in IE the :after content isn’t rendered. For those browsers, I’m OK with the second quote not showing up, so I just added some IE-only style to remove the extra padding on the right:

blockquote {
	padding-right: 0;
}

That’s it! No fancy JavaScript or extraneous HTML tags needed. The result:

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. –That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, –That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed.