sample-1 background-image
sample-1 background-image with
background-attachment:scroll
sample-1 background-image with
background-attachment:fixed
sample-2 repeat-x
sample-3 repeat-y
This text will not show on the button. Good for helping screen readers with buttons that have image backgrounds, but usually ignored by search enginges.
sample-4 button sprite
sample-5 icon sprite
sample-6 icon sprite
sample-7 icon sprite
sample-8 sliding doors
short
something a bit longer
sample-9 notice the lock icon in the tab bar/title bar.
sample-10 PNG, JPG, GIF comparison
jpgs are good for photorealistic images
jpg is a lossy format, if you turn down the quality too far you can tell (but you get great file sizes!)
unindexed pngs are good for photorealistic images, but can get pretty large. They also allow for alpha channel transparency (need hacks to work in IE6)
indexed pngs are not lossy, but they reduce the number of possible colors.
indexed pngs are usually smaller files than gifs, and act basically the same. The only thing pngs can't do is cheesy animation
Back