How to use src.sencha.io

Sencha.io Src helps you dynamically resize images for the ever increasing number of mobile screen sizes. We’ve previously done a lot of work in Sencha Touch to make your UI resolution independent, and Src expands this to include your image assets. It’s easy to use, and in this guide, we run through the main API options for the service.

Sencha.io Src is essentially a proxy that lies between image assets (hosted either on your own server or by a third party) and the browser or application requesting them via HTTP. The API is accessed entirely via placing a prefix before the original image URL. This prefix gives you declarative access to all of the different types of transformation that the service can perform. This approach makes the service very easy to add to existing web sites or apps without any programming knowledge.

Let's start with a quick example. Let's assume you are inserting a 640px × 480px image into your web app or site with markup something like this:

Sencha.io Src는 계속 늘어나는 다양한 모바일 스크린 사이즈에 대해 동적으로 이미지 크기를 조절하는데 도움을 줍니다. 우리는 이전에 UI 해상도를 독립적으로 만드는 다양한 작업을 Sencha Touch에서 하였으며, Src는 이 작업을 당신의 이미지를 가지고 처리하도록 하는 확장된 기능입니다. 이 가이드에서는 main API option 통해 서비스를 쉽게 사용할 수 있도록 합니다.

API는 본래의 image URL 앞에 접미사를 붙여서 접근할 수 있습니다. 이 접미사는 서비스가 수행할 수 있는 변환의 다양한 모든 형태를 선언적으로 접근할 수 있도록 합니다. 이러한 접근은 실존하는 웹사이트나 애플리케이션에 프로그래밍 지식없이 서비스를 쉽게 붙일 수 있도록 합니다.

간단한 예제를 시작합니다. 당신은 640px × 480px 이미지를 다음과 같은 마크업으로 된 당신의 웹앱 또는 사이트에 추가한고 가정합니다.

 <img
   src='http://sencha.com/files/u.jpg'
   alt='My large imag
 />

To use Sencha.io Src in its default mode, you simply prefix your absolute src attribute with http://src.sencha.io/

Sencha.io Src를 기본 모드로 사용하려면, 간단하게 절대 src 요소 앞에

Add that into the tag and your image will be magically resized for a smaller, mobile screen:

태그를 붙이면 이미지는 마법처럼 모바일 스크린에 맞도록 작게 리사이징 됩니다.

 <img
   src='http://src.sencha.io/http://sencha.com/files/u.jpg'
   alt='My smaller image'
 />

Unless you tell it otherwise, Sencha.io Src will resize the image to fit the physical screen of the mobile handset visiting your site, based on its user- agent string. For example, if an iPhone 3GS visits the site, the image will be constrained to its screen size of 320px × 480px.

In this particular case, the image is of landscape orientation, and so width becomes the constraining dimension. Aspect ratios are always preserved by Sencha.io Src, so our 640px × 400px image will emerge resized for an iPhone 3GS as 320px × 200px.

If you want to resize graphics to be constrained by something other than the full screen in width or height (and you probably will), there are plenty of other ways the API can be used. Let's take a look.

Defined sizing

If, instead of keying the size off the user-agent string, you want to resize your images to precise dimensions, Sencha.io Src takes optional parameters to let you define width and height, in that order. These need to appear prior to the image URL in your src attribute. So for example

 <img
   src='http://src.sencha.io/320/200/http://sencha.com/files/u.jpg'
   alt='My constrained image'
   width='320'
   height='200'
 />

Because we are being explicit about the resizing, we can also be reasonably confident about using the width and height attributes into the tag as well.

If you are only concerned about constraining the image's width, just provide a single numeric argument:

<img
  src='http://src.sencha.io/320/http://sencha.com/files/u.jpg'
  alt='My constrained image'
  width='320'
  height='200'
/>

...then the returned image would be the same as the original. This means that you should make sure the original graphics are large enough to fulfill your needs, especially for high-resolution smart-phone devices.

Client-side measurements

This is currently an experimental feature. Sencha.io Src provides a small JavaScript file which obtains the browser's screen dimensions and places them in a cookie scoped to the src.sencha.io domain. Subsequent requests to Sencha.io Src to have an image resized can then refer to these dimensions rather than explicit values.

To insert the JavaScript into an HTML page, use the following snippet:

 <script src='http://src.sencha.io/screen.js'></script>

Where you place this can matter. If you place it at the start of the document, it's slightly more likely that the cookie has been set before the images within the page are downloaded - increasing the chance that your newly- measured dimensions can be used within this load of the page itself. By placing the script after the closing