Resizing Images for Each Mobile User
It is not a trivial manner to properly size images for mobile devices. It has gotten more difficult now that this mobile devices now includes tablets, phablets, smartphones, and even good old feature phones. How can you possibly design every image on your site for every possible screen orientation? Many developers have given up on resizing mobile images and instead use a “one size fits all” approach. Unfortunately, this often means that tablet sized images are sent to devices with much smaller screens. This adds latency to page loads (leading to customer abandonment) and also impacts the data bucket of your users.
Believe it or not, this is an easy issue to resolve! Resizing images is NOT hard. Let’s walk through the steps as I build a webpage about my dogs.
Here is the first iteration of my dog site. It looks great, but the images weigh in at over 700 KB. That’s way too big for mobile. Large pages will load too slowly on 3G (or EDGE) networks.
I found a free image resizing PHP script online (http://ryanfait.com/resources/php-image-resize/). I used this script to take the same images above, and resize them to 200 pixels wide ( <img src=”rfresize.php?w=200&img=/kidphotos/watchdog.jpg”>) It is a trivial task to run every image through the resizer, and I don’t even have to create 30 distinct versions of every image I host.*
Using webpagetest.org ,this version loads 78% faster and uses 700KB less data than my first attempt! (test averaged 10 page loads in Chrome) Unfortuantely, the images are way too small, and the page does not look as nice as it did before.
Thinking about it, using a set pixel width of 200 is just another “one size fits all” approach (and as my one test shows, a pretty bad one). How can we properly size these images for ANY mobile device? The first version used 50% of the screen width for each image. This is where WURFL comes in.
There is a free API called WURFL (http://wurfl.sourceforge.net )(“Whirr Full”) that identifies every device, and you can request all sorts of cool information about the device. In this case, we only care about screen width. I set up an instance of WURFL on my server in under 20 minutes.
There is now some work to make PHP scripts run on the page, and in addition to the WURFL initialization code, I add:
$width = $requestingDevice->getCapability(‘resolution_width’);
$imagewidth = $width/2;
The first line grabs the screen width from the WURFL database, and then I cut it in half. The resulting page looks like:
Now the page renders nicely on all devices in the WURFL database. In Chrome, this page is now just 66KB, and it loads 66% faster than the original!
In conclusion, I went from a 700KB page with a 4 second page load (on all devices) to a 66 KB page with a 1.5s page load – that is responsive to any device in the market. You can look at the screenshots, and it took about an hour. That is a pretty good optimization!
*If you were really good at this, you could just resize once per screen size, and use a server side cache to then serve the already pre-processed image. BUt, alas, this is just a demo of the power of image resizing, and the way it will make your pages look their best without adding latency.