Sencha.io Src Walk Through
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:
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:
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:
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:
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.