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
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.
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.