Using CSS instead of images when coding your web design

as an interface developer, it has always been a challenge to make the designers’ dreams come true, especially when it comes to shadows, gradients and various level of transparency. slicing images till no end, trying to make it look good. nowadays, though, a nice alternative is to do it with css.

the issues with images

first, there are a number of issues with using images in design that i’d like to bring up:

file size

the file size for images is very often the major part of the download size of a web site, and usually only one or a few images’ file size is more than the entire code for a page. this naturally affects download and rendering time negatively.

maintenance

usually in teams, most developers don’t have photoshop (or a similar tool) and/or not the necessary skills, and very often the designer has moved on to other things and don’t have the time to help out with changes. it also takes a lot more time to edit an image than changing a few characters in a css file.

performance

one of the biggest threats when it comes to the performance of a web site is the number of http request it has, and each extra request is lost rendering time. files have to be compared, header information about the files has to be checked, modified dates compared etc. imagine cutting down on all of this by just writing plain css code instead.

where css steps in

naturally, what you’d want to be able to do is offer the effects from the design with css code, and that it works in all major web browsers (internet explorer, firefox, google chrome, safari & opera). i have described the options to use css instead of images in a number of blog posts:

• drop shadow with css for all web browsers
• css gradients for all web browsers, without using images (note: no support for opera)
• css background transparency without affecting child elements, through rgba and filters

rounded corners with css

then we have other things like rounded corners, where progressive enhancement steps into place: capable web browsers get rounded corners where the others get square content (the progressive enhancement approach could also apply to shadows, gradients and transparency). the way to achieve rounded corners with css looks like this:

.rounded-corners {
	-moz-border-radius: 5px; /* firefox */
	-webkit-border-radius: 5px; /* safari, google chrome */
	border-radius: 5px; /* internet explorer 9, opera 10.5+, dev channel releases of google chrome */
}

possible downsides

potential issues with using css lie, “surprisingly”, with internet explorer when we bring in filters to achieve what we want. at times, filters work just fine, but there are situations where it could affect performance negatively. filters can also remove cleartype from fonts and they need block element or haslayout fixes to be rendered properly.

so, proceed with caution and test in your specific use cases.

evaluate your situation

of course i don’t believe css is the solution to every design on the web and that i think no images should ever be used again. but what i’m advocating is to consider css an option for the design of parts of your web site, because for file size, maintenance and performance reasons, things can get drastically better, and more fun to work with at the same time!