Build simple, retina-ready graphics with CSS

Over the last few years internet connections got faster and some web developers sloppy regarding the sizes of websites they build. With the advent of mobile page sizes matter again very much. (It actual never didn’t matter.) More and more people access your site over slow mobile connections. While this is happening retina screens pop up and demand higher resolution graphics which are by nature very large. At the moment there is no perfect way to counter that problem, but the RICG (Responsive Images Community Group) and WHATWG (Web Hypertext Application Technology Working Group) are working on it. In the meantime we have to do our best to reduce page sizes while serving good looking websites. There are several ways we can optimize our current sites. For example use different images for retina and non-retina screens instead of just shrinking the biggest one, embed graphics in typefaces, use svg graphics or build simple graphics with the powers of CSS. Today I want to talk about the latter.

The powers of CSS

By now CSS is very powerful and even gets better almost every day. Things like border-radius, box-shadow, text-shadow, gradients and soon filters and even blending modes are so powerful that they, while cleverly used, can create simple and sometimes actually really complex graphic elements.
This has some major advantages over traditional static graphics. CSS generated graphics are retina ready, faster to load and often easier to maintain since you don’t have to generate sprites over and over again when graphics are changing. Simple changes can be made very fast and easy. And you can even animate your graphics, either with CSS or JavaScript. That’s what I did at QUOTE.fm. It’s not online yet, but you’ll see it in action in the near future.

Example

To illustrate my words I put together just one simple example of a CSS graphic which I animate on click. See for yourself on jsfiddle.

So go ahead and try out building graphics with CSS and use it whenever it makes sense. Your users and their bandwidth will thank you. But always keep in mind that not all browsers support the latest, greatest CSS3 technologies.

Kommentare

  1. I would do that with pure CSS what you’ve done and use Javascript to add a class on click. You should make a difference between animations that are important for the functionality of a product (let’s say for example ‚games‘) and between animations for additional UX. And this kind of animation is just for the UX kind of thing. So it wouldn’t matter if it doesn’t show up in all browsers.

    But the most important thing to note is that CSS animations are graphic accelerated while Javascript animations depend on the processor. With the knowledge that most portable devices have better GPUs than CPUs this makes the big difference.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.