Using CSS to Generate Icons Instantaneously
Page load speed is becoming an increasingly important aspect of website functionality, responsiveness, and SEO. Google even sets the high standard that a website should load within one second, and while this is understandable for the sake of user experience in an increasingly mobile, 3G world, it’s a tall order for a website with any number of images.
So what if there were a way to render images on a website without having to load them?
With some relatively new features in CSS, namely the :before and :after selectors, it is possible to generate images using solely CSS code. Starting with a single
For example, the PAC-MAN and ghost below are generated 100% with CSS (from One-Div.com):
Images on websites, no matter how small, require a server request in order to transfer from the host server to your browser, which takes up precious load time. A small social media icon image often takes more time to load than the entirety of even a large website’s CSS file. (Test your website’s page load speed at tools.pingdom.com.) CSS can instruct the browser on how to generate those icons instantaneously with just a few lines of CSS code. The social media icons below (which link to Robertson & Markowitz’s accounts) are generated instantaneously with the power of CSS (again from One-Div.com):
So if page load speed is critical for your website down to the millisecond, CSS icons are a neat trick to explore.
Further reading:
http://www.smashingmagazine.com/2012/05/15/zocial-button-set-72-css3-buttons/