Storm's a Brewin'

Finally!

The kit is here. Can't wait to try making my virgin brew!

Iconomize Me

Iconomize: to optimize web page load times by reducing or economizing the loading of icons used within the site(s)

coined by kelvin tay

The Skinny:

Today, with blazing internet speed and high quality web content, the average Internet user expects web pages to load fast. 0.2 milliseconds : wow, great 0.5 milliseconds: hmm, I noticed a bit of lag there. Perhaps it's my connection? 1 second: Slightly irritated now.... More than a second: unhappy customer. So how can web developers / designers improve this user experience then? One way could actually be to optimize the loading of small imageries (or icons) on the web site itself, reducing overall page load time!

The Main Course:

Alright, some of you might be thinking: These icons are but a few kilobytes at best. How much difference can it make, to be honest?

Well, you are right in that. However, picture when you have multiple icons on the page, where

<img src="http://www.example.com/icons/rss.png">

occurs very often. That's a lot of HTTP requests, and each request is only for icons of small file sizes. Not very economizing on the bandwidth, Einstein would reckon. Of course, with larger images like a high-quality poster image ( in megabytes), load times are going to be affected even more. How now, brow cow?

Thankfully, we can make use of data URI scheme to help us! *cue Hallelujah melody*

Instead of referencing an external url for our images (hereby to mean icons and main pictures), we can pass the full data URI value of these images into our HTML code itself! Wait, data URI scheme? Huh?

Using external url reference

Using data URI scheme(right-click to inspect element to see the difference!)

By converting images to the URI scheme, we actually reduce the total number of HTTP requests needed to display our page (saving such requests for more important parts like javascripts, and css stylesheets if hosted externally). The html syntax would look something like this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAIAAAAHjs1qAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHB" />

Now it looks frightfully gibberish doesn't it? But fret not, as our browsers actually recognise this and will render the images accordingly. A free (yes, free) and handy on-line converter is available over at WebSemantics.

You could also do this with CSS instead (but I would not recommend this since your CSS file might become 'bloated' and cause greater load time for the browser):

{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAIAAAAHjs1qAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHB) }

The great thing is that there appears to be no real disheartening limitations on this scheme itself, apart from IE8 placing a limit of 32kb on the data itself. However, I'm delighted to find out that modern browsers today can push with over 130kb worth of image data this way too. So, in my opinion, this is really great for icons especially since we may use plenty of icons on our web applications and that these icons are fairly small in data size. In fact, I have used them for the social media icons over at my about Kelvin page!

How about using dingbats for these icons instead then? Would it be better?

f B t

made with Rich Style Font by Anas Ramadan

Well, it could be. Since we are essentially making only one HTTP request for the font file, and subsequently calling on this dingbat font to produce these icons! If you are actively resuing the same few icons here and there, perhaps creating your font set of dingbats would be the better solution! The downside of course, is when you need to update these icon designs. Still, it is a good approach to learning how to develop and publish your own typography set too, in my opinion. Open Font Library provides a good guide to designing/ customizing fonts. I would write an article on this once I've gotten my hands dirty on this!

The Desserts:

Between the data URI scheme and the use of dingbat fonts, I would say that the data URI scheme would be a better bet since it allows more flexibility in the image design. Also, the former is applicable not just on icons themselves but for normal images too. Dingbats as iconographs can still be useful if you wish to achieve some sort of icon standardization across pages, web contents and products.

Some sites to pour over:

• Data URI tutorial by CSS Tricks
• Unicode Charts

So there you have it, 2 ways to creatively economize on the page load time for web pages through reducing the loading of image resources! Feel free to add in any inputs below :)

[EDIT] to test just how much faster the usage of data URI, i cleared my browser cache and did an inspection (using Chrome's built-in Page Inspector). The results?

Image 1 (using typical HTTP fetch): 649ms

Image 2 (using data URI scheme): 1ms

To see the screenshot of the results, click here. Of course, the situation improved for image 1 on subsequent pageloads (given caching). In fact it went down to 0ms, which surprisingly meant that caching is still our browser hero here :) but of course, as web designers or user experience engineers, we should always strive to reduce the page payload as best as possible, cache or no cache!

Funny Bones

After months of sporting underachievement and general sloth, I decided to dust off my shoes and head for a football (futsal, to be exact) session with my old friends. Unfortunately, my left foot decided to give way when I attempted a sluggish jump for a header and I found myself in the A & E of National University Hospital ten minutes later.

With an elephant ankle.

 Funnily, there were a series of 'first-time' for me in the 2-hour stay at the hospital itself.

1. I sat on a wheelchair legitimately for the first time (did you know that they installed seat belts even for wheelchairs?)
2. Besides my mother, this is the first time I showed my butt to a woman (don't worry, it was all consensual, as I needed a painkiller jab)
3. I tried using the crutches for the first time (and I'm still having problems doing turns with it).

And to top it all off, it was only two nights ago where I had a serious chat with a mate over Guinness and we discussed about the 'importance' of life insurance. I said I absolutely am against the insurance industry and would never consider life insurance as a necessity. "Oh, ye of little faith...."

Funny how things can turn out sometimes huh.

Anyways, I found it highly amusing when the radiographer instructed me not to move my leg at all while he was working on getting the X-ray scan out. Well, i'm on a wheelchair and I just sprained my ankle, so I think 'not moving' would be the easiest option wouldn't it?

So it's two weeks of stay-home action for me I guess. Not exactly that bad when you do get treated like a royalty with badass crutches.

oh, you thing of beauty.