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/
Add that into the tag and your image will be magically resized for a smaller, mobile screen:
Sencha.io Src를 기본 모드로 사용하려면, 간단히 절대 src 속성에 http://src.sencha.io 를 붙이면 됩니다.
태그를 붙이면 이미지는 마법처럼 모바일 스크린에 맞도록 작게 리사이징 됩니다.
<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.
당신이 달리 언급하지 않는다면, Sencha.io Src는 user-agent 문자열 바탕으로 모바일 장치의 스크린에 맞도록 이미지를 리사이즈 할 것입니다. 예를 들어, iPhone 3GS로 사이트를 방문했을 때, 이미지는 해당 모바일 스크린 사이즈인 320px x 480px의 스크린 사이즈가 될 것입니다.
특히 이 경우는, 가로방향의 이미지에서 width의 크기는 제한되게 됩니다. Sencha.io Src에 의해 가로세로의 비는 항상 유지하게 되므로, 640px × 400px 이미지는 아이폰 3GS를 위해 320px × 200px 크기로 리사이즈 될 것입니다.
당신이 풀 스크린의 width 또는 height 외에 어떤 사이즈를 지정하여 그래픽을 리사이즈 하기를 원한다면, (당신은 아마도 그럴 것이다) 다른 다양한 방법으로 API를 사용할 수 있습니다. 다음을 보시기 바랍니다.
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
user-agent 문자열을 키로 하는 대신, 당신이 이미지를 정확한 크기로 리사이즈하길 원한다면, Sench-io Src는 당신이 width와 height를 정의할 수 있도록 옵션 매개변수들을 가져옵니다. 이미지의 src 속성 앞의 image URL 앞에 이 값을 필요로 합니다. 예를 들면,
<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:
왜냐하면 우리는 리사이징을 명시적으로 할 것이며, 태그에 width와 height 속성을 사용하여 충분히 알 수 있도록 하였습니다.
이미지의 width만 고려한다면, 숫자 인자 값 하나만 입력하면 됩니다.
<img
src='http://src.sencha.io/320/http://sencha.com/files/u.jpg'
alt='My constrained image'
width='320'
height='200'
/>
And remember, Sencha.io Src always preserves aspect ratio, so in this example, we can still leave the height attribute of 200px in the tag, even though it is not explicit in the src.
Important note: Sencha.io Src will only shrink images. It will not enlarge them. If you were to specify the following:
<img
src='http://src.sencha.io/1280/http://sencha.com/files/u.jpg'
alt='My huge image'
width='1280'
height='800'
/>
...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.
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