Runtime Performance with CSS3 vs Images

I’m pretty happy with the great stuff CSS3 (and HTML5) brings. However, some care should be taken in balancing how many images you load versus the load you put on the CSS engine. And there are a lot of articles on the web encouraging use of the new CSS features such as gradients and shadows in order to optimize for images in your page. But that’s only half the story.

Image Optimization

CSS3 allows you to add drop shadows to your elements, gradients as their backgrounds, and rounded corners on their… corners. Using these few capabilities (you might throw in a couple more like custom fonts and you can put together much of the web’s design with only a few icons needed for images. This allows for much smaller page download because the definition for a shadow or gradient is only a few bytes but an image of these same things are usually kilobytes larger. Pages download much more quickly.

CSS Optimization

While you can do lots of great things with CSS3, drawing shadows and gradients dynamically can affect responsiveness in your page. If you find your page is not scrolling smoothly or dynamic pieces don’t pop like you’d want them to, you might want to optimize your CSS and use more images. Your page may download slower, but once it’s there it will be more responsive.

Case-study on Page Performance

I had a page with a lot of these gradients and shadows (see the previous picture, the original version was 100% CSS, it had no images at all), however, scrolling the page left and right was very clunky and unresponsive. I thought perhaps I had too many HTML elements on the page, but I’ve seen much more work better. After playing around with code a bit it occurred to me that the dynamic calculations and drawing of the gradient’s and shadows was affecting performance. This should have been more apparent to me since it is a common optimization in Flash when you use too much drawing API. After removing the shadows and gradients from my stylesheet the scrolling was smooth again, just like I would expect it to be. Removing the shadow helped out a lot more than removing the gradients. I theorized that the browser may have a better time layering images than it does calculating shadows and gradients, so I tested it out.

After replacing all the gradients and shadows with images, I found my page still scrolled smoothly even though the same shadows and gradients caused it problems with CSS. For my particular case, I am creating a web application which users will come to and stay at for awhile. There is a lot of elements on the page, a lot of design parts to it, and in this particular developer-art incarnation of it, a lot of shadows.

On a side note, the process to replacing the CSS shadows etc. with images was much less painful with CSS3. I didn’t have to alter any HTML because you can layer backgrounds onto an element now so my elements had- background: url(topimage.png) no-repeat left top, url(bottomimage.png) left bottom, url(middleimage.png) repeat-y left; So even though I was forgoing CSS3 shadows it still made my life easier and my page simpler with the images.

The Right Balance

For many web pages out there adding a few shadows or gradients to the page will help make your page look that much nicer and doing it in CSS3 is easier to tweak when you don’t have to re-export images from your site-design-file. But if you have performance problems in your page, you might try using images for some of the heavily repeated elements or the shadows in your page.

4 Responses to “Runtime Performance with CSS3 vs Images”

  1. Chris Says:

    If your web app targets CSS3 you should use multiple backgrounds for the corners. Using sprites is pretty effective and avoids stupid DNS lookups and requests.

    You could also have a look at http://martens.ms/?q=playground/css3.html

    Greets, Chris

  2. Chris Says:

    I made a little demonstration how I’m using multiple backgrounds for e.g. web apps.

    Maybe that’s a way you’d like to use also =)

    http://martens.ms/?q=playground/css3/backgrounds-multiple-backgrounds.html

  3. David Says:

    I know this is an old post, but things are different now. Smashing magazine has a superb article with tons of benchmarks and reasoning to compare the two, CSS3 v. Images. Check it out http://coding.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/

  4. glizarraga Says:

    David I agree with you, but this article is talking about the browser performance while navigating and interacting throught the page, the article you menction talks about loading speed and performance, not the browser interaction performance, I still have the doubt about which to use when looking for a better user experience, .75 miliseconds while loading doesnt affect me as user (of course talking about the server with a lot of traffic it really matters), but when navigating on the page it feels slower it really bothers.

Leave a Reply