Chapter 11. Pure CSS3 Images? Hmm, Maybe Later

Marcel Duran

Several designers while at Yahoo! requested that the original YSlow logo PSD be used in promotional materials such as t-shirts, posters, flyers, etc. in some events that occurred along this year, I had no idea where it was ever since I joined the Exceptional Performance Team ( to take care of YSlow ( amongst other performance tools. In order to solve this problem I decided to rebuild it from scratch because it didn't seem so complicated, the problem was I was a speed freak, not a designer so inspired by the famous pure CSS Twitter fail whale ( I put my CSS muscles to work out focusing obviously on performance to provide those designers a scalable YSlow logo ( for their delight as well as potentially having a smaller image payload to be used on the Web.

The Challenge

It was an interesting challenge from performance perspective since the less code I used, the smaller the final image would be and the faster it would perform (rendering time). My goal was to achieve a one-size-fits all solution to be used in the wild on the Web. Besides performance, as a front end engineer, I was also interested in how CSS3 could help solve this issue (cross-browser possibly) and the limitations imposed. I use Chrome for development, so my first goal was to make it happen for that browser first before ...

Get Web Performance Daybook Volume 2 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.