by Luca Passani, CTO @ScientiaMobile
“If you are out to describe the truth, leave elegance to the tailor.”
– Albert Einstein
“You cannot fashion a wit out of two half-wits.”
– Neil Kinnock
Resizing images is not a new concept by any stretch of the imagination. Those who, like me, have been involved with the mobile web since the WAP era, are very familiar with the problem of not sending 200kb pictures to phones that could only handle 10kb XHTML-MP pages.
This post on the WMLProgramming mailing list is a good example of the topic being discussed in 2004, but, trust me, the problem was being faced as early as 1999 (that’s one thousand years ago!).
Of course, being the happy gang of nerds that we are, the idea of creating a highly-available image resizer in the Cloud has never been considered by the WURFL team. After all, libraries such as GD, ImageMagick and JAI, just to name a few, have been around for ages, and any self respecting programmer would know how to concoct an image resampling strategy that would cut it for their own organization. Plus, creating the service and making it highly-available and solid comes necessarily with a cost that someone has to sustain.
In 2014, quite a few things have changed though. ScientiaMobile is now an established company in its field. Running free services in the Cloud is a luxury we can now afford (within measure, of course).
But there is another, even more important, aspect that have convinced us to create what I am going to describe now.
As you probably already know, Responsive Web Design (RWD) has become the mobile web development strategy of choice for many who find the “single HTML page” approach very attractive (economically and in other ways). One single bundle of HTML, CSS and Javascript can now deliver pages that work reasonably well on Desktops, Tablets, Smartphones and feature phones alike.
Of course, the Devil is in the details, and companies’ mileage on what is considered “reasonably good” may vary. The biggest suspect when a RWD page is slow on a mobile device are large pictures that may appear small on the mobile device, but still had to make their way through subpar bandwidth in the case of mobile users going through a carrier’s network. As a quick aside, those who follow RWD may have heard of RESS, i.e. Responsive Design + Server-Side Components, which is about leveraging the power of server-side optimization from within a Responsive development strategy. End of the aside.
In those cases where server-side optimization is required, many web engineers (particularly front-end programmers who may not be comfortable tinkering with server-side technologies) could happily take advantage of a highly-available, fast, reliable, easy to use image resizing service.
In theory, a company might have an editorial team resizing pictures in multiple versions and feeding them to its CMS. After all, large organization would rely on mobile publishing platforms that could multi-serve different images to different classes of mobile devices in the old days.
In practice, though, organizations are often missing such a dedicated editorial team. Too expensive. Particularly now that Responsive Web Design allows them to escape from the intricacies of an ad-hoc mobile publishing platform.
Three years after the launch of ScientiaMobile, the WURFL team has decided that the time to offer developers an image resizer has finally arrived. Since the service offers more features than simply resizing and rescaling, we called it WIT, the WURFL Image Tailor. We placed WIT under the WURFL.io umbrella, alongside its WURFL.js brother that we launched in February.
A Look at the Precious
In its simplest (and, arguably, its most powerful) form, you can simply pipe any picture you want through
http://wit.wurfl.io
For example, the following picture (available at: http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg) depicts the rear end of the car of a guy who really loves WURFL:
The original picture is 2.4 Mb (and 3264 x 2448 pixels), i.e. certainly not suitable for use in mobile as is (and, arguably, not suitable for the desktop web either).
Accessing the following URL instead will give you the same image on a desktop web browser and a resized image on a mobile device:
http://wit.wurfl.io/http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg
Here is what I get on My Galaxy S3:
A peek to the headers in the HTTP Response reveals that the picture sent to my phone is 74kb (i.e. a 96% or so reduction as compared to the original), while the dimension is a way more palatable 640x480px:
Length: 75264 (74K) [image/jpeg]
The magic is performed by WURFL of course. Devices are recognized automatically and a decision is made on behalf of the developer about what the right “resize target” should be.
Of course, that’s the case where no parameter is given, which makes it really simple to integrate WIT for anyone with a website. Developers who want more control are provided with a set of directives that dictate the final result of their adjusted images. The WURFL.io page has the list of parameters with the relative explanation.
For the purpose of this blog post, I’ll let the pictures here speak for themselves:
20% of whatever the device resolution width (or height, depending on which one is the largest) is (this is useful for thumbnails. Length: 4.7K):
http://wit.wurfl.io/pc_20/http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg
480 pixel wide please:
http://wit.wurfl.io/w_480/http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg
320 pixel high please
http://wit.wurfl.io/h_320/http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg
Letterbox 100px X 300px
http://wit.wurfl.io/w_300/h_100/m_letterbox/http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg
Cropbox 300×100
http://wit.wurfl.io/w_300/h_100/m_cropbox/http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg
This should do for most usages on the big web.
What about Domain Sharding?
If you know what it is and you are interested in adopting it, domain sharding is supported. The following aliases are your friends:
http://wit.wurfl.io
http://wit1.wurfl.io
http://wit2.wurfl.io
http://wit3.wurfl.io
http://wit4.wurfl.io
Terms and Conditions for the Use of the Service
WIT community Edition is offered at no cost for users. It does come with some limitations that protect the service against abuse and adoption by high-traffic websites, but nothing that will prevent a public site with moderate to medium traffic from using WIT free of charge. Please refer to the WURFL.io license (http://wurfl.io/license) for details.
Future Features?
We have a few ideas about what features future versions of WIT should support, but we would love to hear from you, the web developer, constantly looking for ways to make your website more mobile-friendly.
Don’t be shy. Ask! (…and you will be promised).
