Resize Your Images with Sencha.io

Sencha.io is a project started by Sencha labs to provide quality photos resized automatically for mobile platforms. It works by calling the site in your CSS stylesheets with an image URI and it detects the client platform automatically. In other words, you could have an oversized image for your regular users. When a mobile user hits the site, you can automatically resize that image according to the mobile platform, with no extra coding from you!

Sencha.io Syntax:

.oh-hai {
            background: #000 url(https://src.sencha.io/http://www.skinet.com/skiing/files/imagecache/gallery_image/_images/201107/windells_hood.jpg) no-repeat;
            color: #fff;
            height: 100px;
            font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif;
        }

You can see in the image URL, there’s a call to “http://src.sencha.io/” and then you pass it the image you want to resize. This allows you to rapidly develop mobile versions of your site that work cross-platform.

There’s an older version of this that may be familiar to some, called tinysrc. This service was the earlier version of sencha.io and it’s now recommended that users switch to using the new API. The syntax for resizing images remains exactly the same and Sencha has no intention of removing tinysrc for the foreseeable future.

Tinysrc Syntax:

.oh-hai {
            background: #000 url(https://i.tinysrc.mobi/http://www.skinet.com/skiing/files/imagecache/gallery_image/_images/201107/windells_hood.jpg) no-repeat;
            color: #fff;
            height: 100px;
            font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif;
        }