Wayne Pan

Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

Performance Best Practices at Yahoo!

Reducing the number of connections is critical for client side performance. Due to the nature of mobile and mobile networks the problem is only amplified. A low hanging fruit has always been moving to css sprites for all your graphical resources. A lot of developers haven’t moved to inline images because not all browsers support it. However, web app developers on the iPhone have it much easier. We only have one browser to worry about, and luckily for us, it’s a good one.

It means that we can safely inline images and reduce the number of requests an iPhone user has to make across EDGE/3G.

Let’s take a look at the newly launched iphone.cnet.com:

There are 26 requests total for this page. If we take all the img tags and replace the src with the base64 encoded inline image we can reduce the number of requests to 13.

<img src="http://i.i.com.com/cnwk.1d/i/wdgt/ipr/back-button-tip.png" border="0" align="left" />
to...
<img src="data:image/png;base64,iVBORw0KGgottA ... SuQmCC" border="0" align="left" />

If we do this for all C|NET owned assets (css and js files) then we can get it down to 6 requests!

<link rel="stylesheet" type="text/css" href="http://i.i.com.com/cnwk.1d/css/rb/wdgt/iphone/iphone-reviews.css" />
to...
<link rel="stylesheet" type="text/css" href="data:text/css;base64,Ym9keSB7CglvdmVyZmsb2F0OiBs...YmxvY2s7Cn0%3D" />

You can view these on your iPhone (or your browser) and see the performance difference:

• Original C|NET - 26 requests
• Inline Images C|NET - 13 requests
• Inline (almost) Everything C|NET - 6 requests

Any iPhone web app developer can do this right now in less than 30 mins. I used Grey Wyvern’s tool, but here’s some down and dirty php code I whipped together for local files that does the same thing:

< ?php
$options = getopt('f:');

if(empty($options['f']))
  die("\nUsage: php base64encode.php -f >filename<\n");

$ext_map = array(
  'png' => 'image/png',
  'gif' => 'image/gif',
  'jpg' => 'image/jpg',
  'css' => 'text/css',
  'js'  => 'text/javascript',
);
$file = $options['f'];
$ext = explode('.', $file);
$ext = $ext[count($ext) - 1];
if(empty($ext_map[$ext])) die("\nUnknown extension\n");

echo 'data:' . $ext_map[$ext] . ';base64,'
     . urlencode(base64_encode(file_get_contents($file))) . "\n";

So get out there, optimize, and save your users some valuable time!

Update: There have been some questions of busting the iPhone cache with this technique. As was documented on the YUI Blog the iPhone does not cache items over 25kb pre-gzip. If you’re going to use this technique just be aware that external resources linked are less than 25kb.

All the recent rumors circulating of Pandora’s demise, I started worry that my favorite iPhone app would soon be deactivated. Today, I do not care.

Why? Because I downloaded and set up SimplifyMedia. Now I can stream home iTunes library from anywhere! EDGE, 3G, WiFi, in my car, at the office, waiting in line… anywhere. My decision to save a $100 by going with the 8gb is going rather well.

Some tips for those with large iTunes libraries. Be patient and wait to Simplify to index all your music on your “server”. After that’s complete open up SimplifyMedia on your iPhone and keep it open. I was having trouble seeing all my songs on my iPhone but after I left the app open for 5 mins I was able to see my entire library.

Google released the closest look at their new Android software today through SDK 0.9. I’ve been playing around the the emulator (my second time with the platform mind you) and my overall feeling is that they’ve got all their bases covered and it’ll be a solid platform. The question is will it be something special?

Browser

The first app I dove into was the browser. I was mainly interested in the CSS animations that WebKit has been implementing. I visited the test page on Surfin’ Safari and 2/3 the demos worked. The spinning div does not work. Animations ala iPhone, which I covered here, are not supported however. That’s to be understood since those were more Mobile Safari specific.

Notifications

I noticed the notification system that appears if you swipe the title bar. Until Apple gets background apps working, this will be a huge competitive edge for Android. (Imagine all the chat applications that aren’t happening because you can’t background an App on the iPhone.)

Google Streetview

One feature that the iPhone Google Maps application is missing is Streetview. This is one feature where I can see Google telling Apple they are forbidden to implement thereby giving Android’s Google Maps a one up.

… and lastly

I’ll let the picture speak for itself.

I’ve been doing a lot of work with the iPhone lately and I’ve been holding back on blogging about my experiences because I’m unclear as to the damn NDA stipulations. NDA be damn, here’s a first in a series of posts!

If you aren’t familiar with the new animation framework that’s built into Mobile Safari you can read about the closest thing on WebKit, CSS transitions. Here is an example of a CSS transition:

<div style="-webkit-transition: opacity 2s ease-in"
  onclick="this.style.opacity='0'">
This div will do a fade when clicked only Safari 3.1 or on the iPhone!
</div>

Essentially you tie a timing function and duration when a css property is changed. CSS animations allow for more complex rule transitions. For example, if you want to have a card flipping effect show in this video, you will need to use CSS animations.

(more…)

Is it just me or is there a definite lack of a good notes application on the iPhone. The built in Notes App is almost there except it doesn’t sync with MobileMe nor can I draw freehand on it! If the Apple Notes App did that I won’t have to look for an alternative, however, I do, and I did.

I downloaded a promising looking app called EverNote. It stores everything up in the cloud and all notes are completely indexed and searchable. You can save notes by taking a picture and it will OCR them. You can even save audio notes. All this, a OS X client, and iPhone client, and it’s FREE. I’m sold so I fire up the AppStore, download EverNote, and try to enter my first note. This is what I get:

There seems to be a bug where the note you’re typing is covered which makes the primary function of the app completely useless. My bar for usability is definitely higher than the average joe, but considering this app is competing against an Apple pre-installed version EverNote’s bar should be just as high.

Meanwhile, I’ll just have to keep looking.