Sencha Inc. | HTML5 Apps

Blog

Sencha.io Src Walk Through

August 08, 2011 | Aditya Bansod

Sencha.io Src is one of the cloud services offered as a part of Sencha.io. Src solves a common problem that mobile developers face: how to design for multiple screen resolutions. Let's start with an example. Imagine you're building a mobile website. You have a background image that your designer has provided, 'background.png'. It's been sized for the highest resolution device - an iPhone 4 with Retina Display, so it’s resolution is 960×640. But serving up a high resolution image to a lower resolution iPad is a waste of bandwidth and footprint, so you also want a lower resolution image for an iPad. You create a 'background_ipad.png' sized at 1024×768. Then, you remember that all older iPhones have a 480×320 resolution, so you ask your designer to make an even lower resolution 'background_iphoneold.png'. Then when you launch your web app you find that Android is visiting in its huge variety of screen sizes and resolution. And serving up a high resolution image to all of them is probably wasting an optimization opportunity.

Obviously, creating optimally sized images becomes intractable as the number of devices, operating systems and platforms increases over time. And here is where Sencha.io Src comes in. Instead of pre-building specific assets sized for each device, a developer can provide Sencha.io Src with a single master asset and rely on the service to deliver the correctly sized image for each device that requests it.

Getting started with Src is incredibly easy. All you have to do is prepend http://src.sencha.io/ in your img src attribute. For example, take here's how we would convert this image element:

<img src="http://src.sencha.io/http://farm2.static.flickr.com/1106/1490189339_bbf2dd7995_b.jpg">
Beautiful photo of Sencha and Blooming Jasmine Tea
Photo of Sencha and Blooming Jasmine Tea by Flickr user Mr Wabu. Some rights reserved.

In this example, the browser first connects to Sencha.io Src to retrieve the image. Then, Src identifies the User-Agent string of the mobile browser and queries a device database to find its screen size. Next, it fetches the image that was requested from flickr. If the image has a higher resolution than the device supports, Src dynamically downscales the image to fit the device screen size. It then caches the original image and the rescaled image for that screen format, and serves it to the mobile browser. There are two benefits here - first, you've offloaded image delivery from your web server, and second, your customer’s web browser has downloaded an image with no extra bit. This saves download wait time without sacrificing image quality. In addition there is no CPU-intensive browser-based rescaling which speeds up your app.

Src becomes even more powerful when you use its URL API. By specifying modifiers in a URL, you can control how Src resizes the adapted image. For example, if you want the image to be 16 pixels smaller than the size of the screen (if you have padding or a matte around the image), you can tell Src to reduce the image size by a set amount from the automatically resized amount. In this example, Src will make the image whatever the device's maximum resolution is, minus 16 pixels. This is perfect for inline images:

http://src.sencha.io/-16/http://farm2.static.flickr.com/1106/1490189339_bbf2dd7995_b.jpg

In addition to the resizing features in Src, the service also features a set of APIs that control how an image is resized and delivered to your device. For a full list, check out the Sencha.io Src API documentation.

In the simplest example, Src can do image constrained resizing. This is perfect when you want to take images from one source and use them in thumbnails or similar fixed-size slots. If you want to take the same Flickr image, and constrain one dimension to 100px, you simply tell Src in the URL:

http://src.sencha.io/100/http://farm2.static.flickr.com/1106/1490189339_bbf2dd7995_b.jpg

Finally, one of new features that we’ve added to Src is the ability to transform the image to a base64 data URL. This is ideal when you want Src to process an image and then store it in the browser’s localStorage or perhaps call Src from your own server and use Src in a server-to-server manner:

http://src.sencha.io/data/http://farm2.static.flickr.com/1106/1490189339_bbf2dd7995_b.jpg

Sencha.io Src is a versatile service that lets you take the hassle out of building the right image for each device as well as being a general purpose image resizing service in the cloud. Src not only saves time when producing assets, it also ensures that each device gets the exact image it needs without local image resizing, and never gets more image data than is required, making sure your customers get the ideal user experience.

See "How to Use src.sencha.io" in the Learn section for a full API review.

There are 14 responses. Add yours.

Mitchell Simoens

3 years ago

This service could potentially save companies lots of money in multiple areas!

iMoshi

3 years ago

Keep blogging smile really helpful

Jacco

3 years ago

I love this service. But given Extjs’s track record I’m very afraid of the inevitable price tag that is sure to follow.

interfaSys

3 years ago

This is such a handy service for mobile apps dealing with user generated content smile.

Harry

3 years ago

@ Jacco There is no such thing as a free lunch.

This is a great service Team Sencha, keep up the good work.

Eskimo

3 years ago

I’m getting 500 errors. What is the SLA?

Jacco

3 years ago

@harry I would like to know beforehand roughly what a lunch is going to cost me before I invite my whole Italian family over. Can’t have the restaurant owner saying “well.. lunch is free for now but that might change any time, most likely towards the end of your meal”...

interfaSys

3 years ago

Since the service is using Google AppEngine (http://code.google.com/appengine/docs/python/images/usingimages.html), the costs are pretty predictable, but based on the slide pack introducing sencha.io, the basic service is supposed to stay free while freemium features will make sure the company can generate some revenue.

Eskimo

3 years ago

As you’ve probably seen HTTPS is not (yet) supported by sencha.io. I’m guessing this could be one of those freemium features.

Michael Mullany

3 years ago

@jacco - we’ve been pretty consistent about saying that the current feature set will remain free for “reasonable” usage. But perhaps we can be more explicit about what “reasonable” means to put your mind at ease. We plan to charge for more advanced features that we’re building.

Stuart

3 years ago

How can I use this in email design by displaying hi-res images on a retina display and standard res on other devices including desktop?  I set the widths of my images for the design but using the size setting in the url it’s only delivering standard res on retina :-(

Collin D-O

3 years ago

Sounds like a gem, not a service.

Hannah

3 years ago

I’m not quite sure how to say this; you made it extrmeley easy for me!

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.