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:

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! :-)

Posted in CSS,Developing,Technology,Web browsers |

16 Comments

  • +1.

    Another part of this is to kill the pixel perfect myth by education and conversation with both designers and clients.

    I use CSS as long as I can, and have a set of SASS mixins to ease the pain with filters, vendor-prefixes and the syntax differences. I always have a dialog where I show how it will look without all the fun and ask if it is enough.

    It works well on my current day job since we are a small firm where there is much flexibility between all parts.

  • NICCAI says:

    Just wondering if you actually stopped using images for gradients in production? That’s one thing I haven’t switched from yet.

  • Robert Nyman says:

    Robin,

    Yes! :-)

    Anders,

    Absolutely. Education, discussion, openness and weighing the options against each other.

    NigerianDude,

    Internet Explorer supports these filters all the way back to IE 5.5, which was released in 2000, so you you are all good there.

    Only thing that isn’t supported/have an alternative way to do it is rounded corners.

    NICCAI,

    No, not completely. But for small gradient areas, I have started to use it more. I did a blind test with an Art Director recently, where I let him guess which looked best: his image cropped or gradients via CSS. He said the CSS gradient looked better. :-)

  • NigerianDude says:

    But what about if u want to target older browers obviously I.E6 dosen't support the webkit and moz specific css codes.so i think designers might use a Conditional Css if I.E adopt the use of image and if higher Css codes.imho

  • Robert Nyman says:

    Siderite,

    You’re welcome. :-)
    In regards to diagonal gradients, there are some options to play around with that too.

    Stretching background images via CSS will become available (and is in Firefox nightly builds), through the background-size property.

  • Siderite says:

    Great Scott Robert! I had no idea I could use CSS for gradients. I used a relatively positioned image with a lot of javascript for that. Thanks!

    However, it still leaves the issue of the times you actually want an image as the background, but the element is resizable. Or when the gradient is diagonal… Is there a way to stretch the background image on the element size via CSS? or at least something easier than a whole lot of dynamic element positioning ?

  • Andreas says:

    Images for design in web is a hack in the same way we did layout with tables. But up until now we haven't really had any alternatives. I expect that we as soon as possible start use css for design instead of images, in the same way we use semantic html for layout instead of tables.

    Designers need to change their mind about their work. It doesnt have to look the same in all browsers. It should look ok in older browsers and better in newer.

  • Robert Nyman says:

    Andreas,

    Definitely. I think it's just the next natural step in web development.

  • Andreas L says:

    Just wanted to say that I completely agree. I've been going crazy with shadows, rounded corners and gradients lately (not too crazy though – it can easily look a bit unprofessional if you overdo it I think, just a few pixels shadow/border-radius is enough I reckon).

  • Robert Nyman says:

    Andreas,

    Yes, it's absolutely about finding a good balance.

  • Matthew says:

    Regarding rounded corners – there is actually an HTC available that makes IEs<9 display rounded corners: <a href="http://code.google.com/p/curved-corner/&quot; rel="nofollow"&gt <a href="http://;http://code.google.com/p/curved-corner/” target=”_blank”>;http://code.google.com/p/curved-corner/. It seems to work fairly well as HTCs go, although I've never yet used it in a production site. The usual issues with performance etc still apply of course.

    (Rounded corners are something I usually treat as 'graceful degradation in IE' – but it's in the toolbox for the day a client insists.) ;)

  • Robert Nyman says:

    Matthew,

    Thanks for the tip! For me too, as far as possible I, try to refrain from JavaScript for pure presentational purposes – but sometimes it has to be used.

  • Agreed on all of this, with a caveat: if your site/app has a lot of animation, opacity, or you are targeting things like mobiles or set top boxes, large dynamic gradients can perform far more slowly than the same gradient in a pre-rendered image. Best to build with css and then try swapping for an image if the performance is bad.

  • Robert Nyman says:

    Emmett,

    Yes, I agree.

  • […] Instead of making static image gradients and patterns as in Photoshop or Illustrator, create them in CSS3. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>