1. Use CSS3 gradients: Use CSS3 gradients instead of gradients images for the backgrounds. CSS3 gradients let you display smooth transitions between two or more specified colours.
Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser. use the following link to generate CSS gradients.colorzilla and cssmatic.
2.Use font icons: Use font icons instead of image icons. Icon fonts are just fonts. However, instead of containing letters or numbers, they contain symbols and glyphs. You can style them with CSS in the same way you style regular text which has made them a popular choice on the web. Below are a few advantages of font icons.
- You can apply any CSS effects to them.
- Because they are vector graphics, they’re scalable. That means you can scale them up or down without losing their quality.
- You send one single or few HTTP request(s) to load them instead of multiple HTTP requests that bitmap images might require.
- They load fast because of their small size.
- They’re supported in all browsers (even back to IE6).
You can generate the Font icon trough the following resources: awsome font, glyphicons, fontello.
3.Use Sprites Images: An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
- web browsers only do a few HTTP requests in parallel
- doing an HTTP request means a round-trip to the server, which takes lots of time
- we have a “fast” internet connection, which means we download fast.
4.Use Inline SVG and data URL: SVG stands for “scalable vector graphics”, and the name itself is very suggestive. SVG gives us the power to scale a graphic from 100% to 1000% without losing any quality at all. An SVG file is all XML and is a declaration of various shapes and paths inside an SVG object. Inline SVG spits out all of our XML data directly in our document and allows us to access the various elements via CSS and JavaScript. This gives us great control over the manipulation of things like fill, stroke, position, opacity, and a host of other properties and attributes.
Data URI is a base64 encoded string that represents a file. Getting the contents of a file as a string means that you can directly embed the data within your HTML or CSS code.
Data URI converter:http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
5.Use Unicode instead of image shapes and icons: It is an international encoding standard for use with different languages and scripts, by which each letter, digit, or symbol is assigned a unique numeric value that applies across different platforms and programs.
to see the Unicode Symbols with Names and Descriptions please refer to the following URL – http://unicode-table.com/en/ and Image courtesy: http://unicode-table.com/
Thanks
Fazil
Leave a Reply