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 통해 서비스를 쉽게 사용할 수 있도록 합니다.

Sencha.io Src는 기본적으로 브라우저 또는 애플리케이션에서 HTTP를 통한 요청시에 (당신이 소유한 서버나 제3자에 의해 호스팅 되는)이미지 자산들 사이에서의 프록시입니다. 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를 사용할 수 있습니다. 다음을 보시기 바랍니다.

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

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:

기억할 것은, Sencha.io Src에서 가로세로 비율이 항상 유지되므로, 이 예제에서 src가 정확히 명시되지 않았음에도 태그의 height 속성이 200px로 유지될 수 있습니다.

중요 사항 : Sencha.io Src는 이미지 축소만 됩니다. 확대는 되지 않습니다. 만약 다음과 같이 명시한다면,

<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.

반환된 이미지는 원본 이미지와 동일합니다. 이것은 고해상도 스마트폰같이 특별한 당신의 요구들도 처리할 수 있게 이미지가 충분히 커야함을 의미합니다.

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:

이것은 현재 실험 기능입니다. Sencha.io Src는 브라우저의 스크린 크기를 얻기 위해 작은 자바스크립트 파일을 제공하며, src.sencha.io 도메인을 스코프를 가지는 쿠키가 들어있습니다. 다음에서 Sencha.io Src에 이미지를 리사이즈 요청할 때 값을 명시하는 것 보다 이 방법을 사용할 수 있습니다.

다음의 코드를 사용하여 자바스크립트 HTML 페이지에 추가하십시오.

 <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 </body>, however, increases the chance that the page has laid itself out, and this can sometimes affect some of the measurements made.

To constrain an image to the width of the device returned by the screen.width measurement, insert it where you would have placed an explicit value:

이 측정문구의 위치는 문제가 됩니다. 만일 document의 앞에 위치해 둔다면, 페이지의 이미지가 다운로드 되기 전에 쿠키가 생성될 가능성이 큽니다. - 새롭게 될 기회의 증가 - 측정된 크기는 페이지를 로드할 때 사용될 수 있습니다. </body>태그로 닫힌 뒤에 스크립트를 위치하는 것은 페이지를 잘 정리 할 기회를 증가시키지만, 이것은 때때로 생성된 측정 문구에 영향을 줄 수 있습니다.

screen.width 측정법으로 반환된 device의 width를 이미지의 명시적인 값으로 삽입할 수 있습니다.

 <script src='http://src.sencha.io/screen.js'></script>
 <img
   src='http://src.sencha.io/screen.width/http://sencha.com/files/u.jpg'
   alt='My JS-measured image'
 />

You can also abbreviate the measurement names for brevity:

당신은 간결함을 위해 측정방법의 이름을 축약하여 사용할 수 있습니다.

 <script src='http://src.sencha.io/screen.js'></script>
 <img
   src='http://src.sencha.io/sw/http://sencha.com/files/u.jpg'
   alt='My JS-measured image'
 />

The full set of client measurements available, with abbreviations, is in the [API summary][13] at the end of this document.

For example, if you wanted to include an image that was constrained by 'available' height and width measurements, you could use the following:

이 문서의 끝에 나오는 [API summary][13] 나온는 축약어와 함께 클라이언트 측정방법 모두 사용 가능합니다.

예를들어 ‘사용가능한’ width 와 height 측정 방법을 지정하여 이미지 포함하려면 다음과 같이 사용할 수 있습니다

 <script src='http://src.sencha.io/screen.js'></script>
 <img
   src='http://src.sencha.io/saw/sah/http://sencha.com/files/u.jpg'
   alt='My JS-measured image'
 />

Note: The document.body.* properties are particularly affected by where you place the script snippet, although under certain conditions, window.outerHeight will also vary on mobile browsers during page load. Also note that the values returned from many of these properties will depend upon the DOCTYPE of the document and any viewport scale setting. Real-device testing is highly recommended when using this experimental technique.

참고: 당신이 추가한 스크립트 코드에 의해 document.body.* 프로퍼티는 특별히 영향을 받는다. 비록 특정 조건에서, 모바일 브라우저에서 페이지가 로드되는 동안 window.outerHeight는 서로 달라지게 됩니다.. viewport scale setting과 document의 DOCTYPE에 의존하는 많은 프로퍼티로부터 반환된 값들도 있습니다. 실제 기기 테스팅은 이 실험적인 기능을 사용하길 적극 추천합니다.

Orientation

You may explicitly indicate the orientation of image constraints, by placing landscape or portrait in the URL, which will flip the width and height constraints if required. (Note that this will only have effect if the screen dimensions have been identified from the device's user-agent: if you have explicitly specified a width and height, the flip will not occur.)

On an iPhone, for example, the following code will constrain an image to be 480px wide (and 320px high), instead of the normal 320 pixels wide (and 480px high):

당신은 URL에 landscape나 portrait를 사용하여 명시적으로 이미지의 방향을 제한할 수 있으며, 필요하다면 width와 height의 제한을 뒤집을 것이다. (유의할 것은 기기들의 user-agent로부터 스크린 크기들이 구분되었다면 이것이 효과를 가져다 줄 것인가이다. 당신이 명백하게 width와 height를 지정했다면 플립 효과는 발생하지 않을 것이다.)

예를 들어 아이폰에서 다음의 코드는 기본적으로 너비 320px(높이 480px)가 되게 하는 대신 이미지를 너비 480px(높이 320px)가 되도록 합니다.

 <img
   src='http://src.sencha.io/landscape/http://sencha.com/files/u.jpg'
   alt='Constrained to WxH, W greater than H'
 />

As a further experimental feature, [client-side measurement][16] can be attempted to detect the current orientation of a device, using the window.orientation API. Specify detect for the orientation to try to use the value that may have been recently sent by the screen.js cookie:

실험적인 기능에 더하여, [client-side measurement][16] 은 window.orientation API를 이용하여 현재 장치의 방향을 감지할 수 있습니다. scree.js의 쿠키가 보낸 최근의 값을 이용하여 감지된 방향을 명시할 수 있습니다.

 <script src='http://src.sencha.io/screen.js'></script>
 <img
   src='http://src.sencha.io/detect/http://sencha.com/files/u.jpg'
   alt='Constrained according to orientation'
 />

Remember again that there is a very likely race condition whereby the cookie's value may not be set before the image starts to download, and so the immediate effect may not be apparent in the first rendering of the page.

The test page for this experimental feature uses DOM manipulation on the document's load event to ensure the cookie is set, before inserting the resized element. [Try it][18] on a modern mobile device: rotate the device and reload the page to see the feature in action.

명심할 것은 이미지 다운로드를 시작하기 전까지는 쿠키 값이 세팅되지 않아서 경합 조건에 놓일 것이며, 그래서 페이지를 처음 열었을 때 즉각적인 효과는 분명히 알 수 없습니다.

이 실험 기능을 위한 테스트 페이지는 리사이즈된 엘리먼트를 삽입하기 전에 document의 load 이벤트가 쿠키가 세팅됨을 보장할 때 DOM 조작을 사용합니다. 최신의 모바일 기기에서 [Try it][18] : 모바일 기기를 회전시키고 페이지를 다시 로드하면서 움직임의 특징을 보기 바랍니다.

Altering sizes

As we have seen, an explicit width or height before the URL will fix the image size. Sometimes, however, you want these dimensions to be based on physical screen size, but then altered slightly. For example you might notice in our example above that the 8 pixel white margin around the web page means that the 320-pixel-wide image actually truncates on the right hand side of the iPhone screen.

Instead of using absolute values, we can alter width and height parameters by prefixing operands with characters like -, a or x. Under these conditions, the numbers would represent subtraction, addition and percentage scaling of the dynamic screen size, respectively.

So for example, if you wanted your image to be, at most, 16 pixels narrower than the width of the screen, (whatever that actually is), you would use -16, as in the following:

이상과 같이 URL이 이미지 사이즈를 정하기 전에 width와 width와 height를 명시해야 합니다. 그러나 때때로 당신은 기기의 스크린 사이즈를 기반으로 크기를 정하기를 원할 수 있지만, 약간 다를 것입니다. 이 예제에서 웹페이지에 8픽셀의 흰색 여백이 있음을 알고 있을 것인데, 이것은 320픽셀의 와이드 이미지는 실제로 아이폰의 오른쪽에서 잘라내진 것을 의미합니다.

절대값을 사용하는 대신, -, a 또는 x 와 같은 부호를 width와 height 매개변수 앞에 위치하여 변경할 수 있습니다. 이러한 상황에서 숫자는 뺄셈, 덧셈, 동적인 스크린 사이즈에 맞는 비율 조정을 각각 표시할 수 있습니다.

예를 들면, 대부분 당신은 이미지가 -16이란 표시를 사용하여 스크린의 너비보다 16 픽셀이 좁기를 원할 것입니다. 다음과 같이

 <img
   src='http://src.sencha.io/-16/http://sencha.com/files/u.jpg'
   alt='My image, constrained to 16px less than the screen'
 />

This is useful if you wish to leave a border around your images or if you want to account for the scroll bar of the browser screen. On the iPhone example to the side, you should be able to see it now accounts for the default document margin effect.

이것은 당신의 이미지 주의에 border를 남겨두고 싶을 때나 브라우저 스크린에 스크롤 바를 처리하고 싶을 때 유용합니다. 아이폰에서 예를 들면, 당신은 기본적인 document의 margin 효과 처리가 가능합니다.

Percentage sizing

Similarly, if you want to scale the graphic to a proportion of the screen, use the x prefix. The value provided is interpreted as an integer percentage from 1 to 100.

So to ensure the image takes no more than half the screen, use x50, as in the following:

이와 유사하게, 당신은 스크린의비율에 맞는 그래픽의 크기를 원한다면 x 를 앞에 붙여 사용할 수 있습니다. 이 값은 1에서 100까지의 정수형의 퍼센트로 해석됩니다.

다음과 같이 x50을 사용하여 스크린의 반에만 이미지를 나타나게 할 수 있습니다.

 <img
   src='http://src.sencha.io/x50/http://sencha.com/files/u.jpg'
   alt='My image, constrained by half the width of the screen'
 />

It is possible to use either of these modifiers on both the width and the height simultaneously.

For example, the following would ensure the image fitted into a quadrant of the screen (although in this case it has no effect):

동시에 width와 height에 모두 수식어를 사용하는 것은 가능합니다.

예를 들어, 다음과 같이 하면 스크린의 1/4에 나타날 것이다.(하지만 이 경우에는 효과가 없다.)

 <img
   src='http://src.sencha.io/x50/x50/http://sencha.com/files/u.jpg'
   alt='My image, at most half width, half height'
 />

Different modifiers can be used for width and height. This example ensures the image will never run the width of the screen, but also that it doesn't take up more than 15% of its vertical height. This obviously suits wide, landscape images best, such as banner ads, for example.

width와 height에 다른 수식어를 사용할 수 있습니다. 이 예제는 이미지가 스크린의 너비로 동작하지 않을뿐만 아니라, 세로방향의 높이의 15%를 넘게 차지하지 않습니다. 이것은 광고 배너처럼 너비가 넓고 가로 방향의 이미지가 제일 적합합니다. 예를 들면

 <img
   src='http://src.sencha.io/-16/x15/http://sencha.com/files/u.jpg'
   alt='My image, constrained in banner-ad style'
 />

Other adjustments

For completeness, the addition operator allows you to increase the image size. a20 will expand the constraints of the image by 20 pixels, for example. Remember, Sencha.io Src will never grow an image beyond its original size - but it might occasionally be useful if you have knowingly reduced an image's size and then want to grow it slightly.

There is a rounding-down operator, r, which will round a size down to the nearest multiple of that value. This might be useful if you have a tile- or column-based layout. The following will round down the constraint to ensure that the half-width image's width is always a multiple of 20 pixels:

완성도를 위해, 이미지 사이즈를 증가시키기 위해 덧셈 연산자를 허용합니다. 예를들어, a20은 이미지를 20픽셀 확장합니다. 기억할 것은 Sencha.io는 결코 이미지의 원래 사이즈을 초과하여 커지게 할 수 없습니다. 그러나 때때로 이미지 사이즈를 줄이거나 이미지를 약간 키울 때 유용합니다.

잘라버림 연산자인 r은 가장 가까운 수로 잘라낼 것입니다. 이것은 유용합니다. tile- 또는 column- 방식의 레이아웃에 유용합니다. 다음의 예제는 너비를 반으로 줄인 이미지를 항상 20픽셀에 가깝게 잘라버립니다.

 <img
   src='http://src.sencha.io/x50r20/http://sencha.com/files/u.jpg'
   alt='Half the screen, rounded down to nearest 20 pixels'
 />

Finally, you can specify a maximum value for the image's size, so that you can be sure that, regardless of any other transformations, it does not exceed a limit. You can specify two maxima, to depend upon whether the browser has been identified as being mobile or non-mobile. For mobile browsers, the m operator is obeyed, and for desktop browsers, the n operator is used.

The code below will display an image no larger than 500 pixels on a desktop browser, and no larger than 100 pixels on a mobile browser:

마지막으로, 이미지 사이즈의 최대값을 명시하여, 다른 변경들에 구애받지 않게 할 수 있습니다. 그러나 제한 크기를 초과할 수는 습니다. 모바일이거나 모바일이 아닐 경우로 확인된 브라우저에 따라 당신은 두 가지의 최대값을 명시할 수 있습니다. 모바일 브라우저에서 m 연산자를 따르고, 데스크탑 브라우저는 n연산자가 사용됩니다.

아래의 코드는 데스크탑 브라우저에서는 500픽셀보다 크지 않고, 모바일 브라우저에서는 100픽셀보다 크지 않게 나타날 것입니다.

 <img
   src='http://src.sencha.io/n500m100/http://sencha.com/files/u.jpg'
   alt='Max 500 or 100, depending on browser'
 />

Complex formulaic operations

You can string together all of these formulaic operations. If you wanted to have two images side-by-side, with balanced margins, we can combine the -16 from the example above with x50 to halve the width.

The following approach might work well for a gallery app, for example:

당신은 모든 공식 연산을 연결시킬 수 있습니다. 균형 잡힌 margin을 가진 두 이미지를 나란히 하길 원한다면, 우리는 x50으로 width를 반으로 줄이고 예제 위에 -16 연산자를 결합할 수 있습니다.

예를들어 이 접근 방법은 갤러리 앱에서 잘 작동합니다.

 <img
   src='http://src.sencha.io/-16x50-2/http://sencha.com/files/u.jpg'
   alt='My image, in a gallery'
 />


 <img
   src='http://src.sencha.io/-16x50-2/http://sencha.com/files/u.jpg'
   alt='Another image, in a gallery'
 />

(Note we also deduct a further 2 pixels to account for the 4 pixel gap caused by whitespace between the tags in the markup.)

And finally, if the width (or height) does not start with -, a or x modifiers, it is interpreted as an absolute pixel number upon which further operations can be applied. In other words, it is possible to specify 320-8 to get the same effect as using 312 explicitly.

This is particularly useful when you use the (experimental) [client-side measurement][34] technique, allowing you to deduct values from those measurements. This will use a client-side measurement of screen.width and then deduct 16 pixels:

(우리가 2픽셀을 더 뺀 것은 마크업의 태그들 사이의 공백으로 인해 4픽셀의 차이때문입니다.)

마지막으로, width(또는 height)가 -, a, x의 변경자로 시작하지 않는다면, 다른 연산이 적용된 절대 픽셀 수로 해석됩니다. 다른 말로 하면, 320-8로 명시하였다면 312를 사용한 것과 동일한 결과를 가져옵니다.

(실험중인)[client-side measurement][34] 기법을 사용할 때, 측정법으로부터 값을 감산하는 것을 허용하므로 특히 유용합니다. 이 방법은 클라이언트측의 screen.width를 측정하고 16픽셀을 뺄 것입니다.

 <img
   src='http://src.sencha.io/sw-16/http://sencha.com/files/u.jpg'
   alt='Client-measurement, reduced'
 />

You can use different techniques in different dimensions of course. This example constrains the image by half the width of the screen and exactly 90 pixels in height. This technique might be useful if you want your gallery to handle both landscape and portrait images alongside each other.

당신은 다른 기법을 다양한 측정 코스에서 사용할 수 있습니다. 이 예제는 스크린 width의 반으로, height를 90픽셀로 이미지를 지정합니다. 이 기법은 당신의 갤러리에서 가로 방향, 세로 방향 이미지 나란히 처리할 때 유용합니다.

 <img
   src='http://src.sencha.io/-16x50/90/http://sencha.com/files/u.jpg'
   alt='My half-width image, not too tall'
 />

It is important to remember that in all these cases, however, the image retains its aspect ratio. Even if the resulting dimensions of the above examples are letterbox in shape, a portrait image will remain portrait.

이같은 모든 경우에서 중요한 점은, 이미지는 가로세로비율을 유지하는 것입니다. 위 예제의 결과 크기가 가로세로 크기를 레터박스 포맷의 형태라도, 세로 방향의 이미지는 세로 방향을 유지할 것입니다. *letterbox: 레터 박스 포맷의 ((와이드 스크린 영화를 가로 세로 비율 그대로 텔레비전에서 보는 방식))

File formats

You can specify the file format of the resulting image that's returned from Sencha.io Src. You can choose either PNG or JPG encoding by using the png or jpg token. This parameter goes before the dimensions (if present) in the URL. In the following example, an original JPG is converted to both default, and explicitly resized, PNG images:

sench.io src로 부터 반환될 결과 이미지의 파일포맷을 정할 수 있습니다. 당신은png나 jpg토큰을 이용하여 PNG나 JPG 인코딩을 선택할 수 있습니다. 이 parameter는 (현재의)URL의 크기 이전에 전달됩니다. 다음의 예에서, 원래의 JPG는 둘 다 PNG 이미지로 default로 변환되고, 분명히 리사이즈 되었습니다.

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

 <img
   src='http://src.sencha.io/png/-16x50/http://sencha.com/files/u.jpg'
   alt='My small PNG'
 />

If not specified, Sencha.io Src will decide on a suitable format based on the original image. PNGs and JPGs will remain in their original format, and GIF images will get converted to PNG. Sencha.io Src will never emit a GIF.

Note that JPG is a 'lossy' encoding, so the quality of a resized JPG image will not necessarily be as good as the original PNG (although it should be smaller in file size). You can also take control of the degree to which the JPG is compressed, by appending a number between 1 and 100 to the end of the jpg formatting token, like this:

포맷이 명시되지 않았다면, Sencha.io Src는 원래의 이미지를 기본으로 적합한 포맷을 결정합니다. PNG나 JPG는 원래의 포맷을 유지하지만, GIF 이미지는 PNG로 변경됩니다. Sencha.io Src는 절대 GIF를 허용하지 않습니다.

JPG는 ‘lossy(파일 정보가 손실되는)’ 인코딩이라고 언급하였는데 리사이즈된 JPG의 품질은 원래의 PNG만큼 좋을 필요가 없습니다(그렇긴 하지만 파일 사이즈는 작아야 합니다). 당신은 JPG의 압축률을 정할 수 있으며, 다음과 같이 1에서 100사이를 끝으로 jpg 포맷 토큰 값을 끝에 추가할 수 있습니다.

 <img
   src='http://src.sencha.io/jpg/-16/http://sencha.com/files/u.jpg'
   alt='My JPG'
 />

 <img
   src='http://src.sencha.io/jpg2/-16/http://sencha.com/files/u.jpg'
   alt='My highly compressed JPG'
 />

It's important to note that the compression will only change if the dimensions of the image have changed or if the original format was PNG and has been converted to JPG. If you have a small JPG image, smaller than the constraints you've specified for it, it will always remain with its original compression.

Also note that PNG images will lose their the alpha channel when converted to JPG, so you are advised to keep any PNG files with transparent regions in that format. Resizing PNG files while remaining in the same format, however, will preserve the alpha channel.

중요한 것은, 이미지의 크기를 변경하였거나 원래의 포맷이 PNG이며 JPG로 이미 변환된 경우에만 압축을 할 수 있다는 것입니다. 만약 작은 JPG 이미지을 가지고 당신이 명시한 크기로 더 작게 만들려 한다면, 이미지는 원래의 압축 상태를 항상 유지할 것입니다.

PNG 이미지는 JPG로 변환될 때 알파 채널이 소실되므로, 당신은 포맷의 투명한 부분을 유지할 것인지 결정해야 합니다. 그러나 같은 포맷을 유지하여 리사이징한 PNG 파일은 알파 채널을 보존할 수 있습니다.

Data URLs

In some circumstances, you might want to return your image in an encoded format. In particular, images can be encoded into data URLs.

어떤 환경에서 당신은 이미지를 인코딩된 형식으로 리턴 받기를 원할 것 입니다. 이런 경우에 이미지는 data URLs 로 인코딩 할 수 있습니다.

This is useful if you want to embed an image into the markup or stylesheet of a site or application, or if you want to cache an image resource offline in a textual form in a browser's local storage. Unlike performing the toDataURL method of a element, using Sencha.io Src allows you to encode images from other origin servers.

To have Sencha.io Src return the requested image in data URL format, simply place 'data' as the first segment of the request:

이 형식은 사이트 또는 어플리케이션의 마크업이나 스타일에 이미지를 넣을 때나, 브라우저의 local storage에 텍스트 형식으로 오프라인 이미지 리소스로 캐시할 때 유용합니다. 엘리먼트의 toDataURL 메서드와는 달리 작동하며, Sencha.io Src를 사용하여 다른 서버로부터 이미지를 인코딩할 수 있게 합니다.

요청의 첫 부분에 간단히 ‘data’를 위치하여, Sencha.io Src로 요청한 이미지를 data URL 포맷으로 이미지로 리턴 받을 수 있습니다.

 http://src.sencha.io/data/http://sencha.com/files/u.jpg

This returns, as a plain text response:

이 요청은 응답으로 평문 텍스트를 반환합니다.

 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...

You can use this on your server, or perhaps in a build environment, to create such URLs. But to be honest, you are more likely to prefer to use local base-64 encoding tools in those contexts. And in a browser environment, it is quite likely that this is also of little use, since browsers may not be able to make AJAX requests to src.sencha.io, a different origin server.

So the real power of this API comes from being able to use it in a JSON-P form. This allows you to specify the name of a local callback function, which, if present, will mean that Sencha.io Src returns a fragment of JavaScript that you can include in your document, and which calls that function.

The callback function is provided as a dotted-suffix to the 'data' segment. For example:

빌드 환경에서 이와같은 URL을 생성한다면 서버에서 사용할 수 있습니다. 하지만 솔직히 말해서, 이런 context에서는 base-64 인코딩 툴이 더 많이 사용되어집니다. 브라우저 환경에서는 … 다른 서버에서는 브라우저가 src.sencha.io에 AJAX 요청을 생성할 수 없기 때문에 이 방법이 조금 사용되기도 합니다.

이 API의 진정한 강력함은 JSON-P 형식을 사용할 때 나타납니다. local callback fucntion을 명시하는 것을 허용한다. Sencha.io Src는 자바스크립트의 fragment를 반환하여 당신의 document에 포함할 수 있도록 하며, 함수로 호출할 수 있습니다. 이 callback function은 ‘data’ segement에 점을 찍은 접미사로 제공합니다. 예를 들면,

콜백 함수는 점을 사용한 접미사 'data' 세그먼트를 제공합니다. 예를 들면

 http://src.sencha.io/data.myCallBack/http://sencha.com/files/u.jpg

This will return, as a JavaScript response:

이 요청은 응답으로 자바스크립트를 반환합니다.

 myCallBack('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...');

This now means that you can do something programmatically with the string - in the browser - such as set it as the source of an element or cache it to the browser's local storage.

Because it's possible you might want to run this callback multiple times with some sort of identifier to attach it to different elements throughout the document, the callback allows you to add additional initial arguments. If your callback name contains hyphens (-), these are used as separators, and subsequent portions get treated as successive string arguments. (Also, the callback name itself can contain dotted syntax so you can invoke a method within an object or a function within a specific namespace).

당신은 브라우저에서 이 문자열을 가지고 엘리먼트의 소스 또는 브라우저의 local storage의 캐시로 프로그래밍적인 작업을 할 수 있음을 의미합니다. 당신은 이 callback을 원하는대로 수차례 실행이 가능하기 때문에, document의 다른 엘리먼트들에 어떤 식별자로 붙일 수 있고, callback은 부가적인 초기화 인자를 추가하는 것을 허용합니다. 당신 callback 이름에 -(하이픈)을 포함한다면 이것은 구분자로 사용되며, 순차적인 문자열 인자로서 다음에 처리될 부분입니다. (또한 callback name 점이 찍힌 구문을 가질 수 있으며, 특정 namespace의 함수나 객체의 메소드를 invoke할 수 있습니다.)

So, for example:

 http://src.sencha.io/data.MyApp.myCallBack-img2/http://sencha.com/files/u.jpg

This will return, as a JavaScript response:

 MyApp.myCallBack('img2','data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...');

Typically, your callback would use that first argument as a way to reference an image within the document. This callback will be run asynchronously to the original JSON-P mechanism and scope, so otherwise you'd have no way to correlate responses with target elements.

Note that if you need to use hyphens in your arguments, you can use commas (,), the presence of which means that that will be used as the separator instead of hyphens. For example:

당신의 callback은 처음 인자는 document에서 이미지를 참조하는 용도로 사용됩니다. 이 callback은 원래의 JSON-P 머케니즘과 스코프를 가지고 비동기적으로 작동되므로, 그렇지 않다면 타겟 엘리먼트들을 상호 응답을 처리할 방법이 없습니다.

하이픈(-)을 당신의 인자로 사용하길 원한다면, 당신은 콤마(,)를 사용할 수 있으며 이 문자가 존재한다면 하이픈(-) 대신 구분자로 사용되었음을 의미합니다. 예를 들면,

 http://src.sencha.io/data.MyApp.myCallBack,img-2,123/http://sencha.com/files/u.jpg

This will return:

 MyApp.myCallBack('img-2','123','data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...');

The following is a full, working example, which replaces an hourglass image with the data URL for a tick:

다음은 실행가능한 풀 소스의 예제이며, data URL을 기다리를 기다릴 때 모래시계 이미지로 대체됩니다.

 <!DOCTYPE html>
 <html>
     <head>
        <title>Sencha.io Src stepping up a gear</title>
        <script type='text/javascript'>

           // run the JSON-P
           window.addEventListener("load", function () {
             var script = document.createElement("script");
             script.setAttribute("src",
                "http://src.sencha.io/data.setDataUrl-img1/" +
                "http://famfamfam.com/lab/icons/silk/icons/tick.png"
             );
             script.setAttribute("type","text/javascript");
             document.head.appendChild(script);
           }, false);

           // the JSON-P callback
           function setDataUrl(id, dataUrl) {
             document.getElementById(id).src = dataUrl;
           };

        </script>
     </head>
     <body>
        <img id='img1' src='http://famfamfam.com/lab/icons/silk/icons/hourglass.png' />
     </body>
 </html>

Cache flushing

Sencha.io Src caches images for up to one day. The cache is sensitive to all of the API settings above, so if you request or expect images with different sizes, formats or compression ratios, the cache will store each version.

Nevertheless, there are times when you might want to manually force Sencha.io Src to refetch an image from your server - such as when you have updated the original without changing its URL, for example. To force the cached version of an image to be ignored, add flush to the start of the URL thus:

Sencha.io Src 이미지를 하루 동안 캐시합니다. 이 캐시는 API 설정에 따라 변동되기 쉬우며, 당신이 사이즈, 포맷, 압축률이 다른 이미지를 요청하거나 기대한다면, 캐시는 각각의 버전에 따라 저장될 것입니다.

그럼에도 불구하고 Sencha.io Src는 수동으로 강제로 당신의 서버로부터 이미지를 다시 가져오길 원할 때가 있는데, 예를 들어 URL의 변경없이 원래의 이미지를 업데이트 하려 할 경우입니다. 다음와 같이, URL 시작 부분에 flush를 추가하여 강제로 캐시된 이미지의 버전을 무시합니다.

 http://src.sencha.io/flush/http://sencha.com/files/u.jpg

This will always cause a new request to be made to the server and the cache updated accordingly.

This API flag should ONLY be used manually or for very short periods of time when you know a set of images should be refreshed. Not only will you invoke a lot of additional traffic to the origin server, but it will increase the latency of the user's fetch of the images. If you have no need to urgently update images, you are strongly advised to wait 24 hours for the cache to expire naturally. Abuse of this flushing feature may result in it being removed.

이 API flag는 오직 수동으로 사용되거나, 짧은 시간동안 이미지 세트는 갱신이 되었음을 알고 있을 것이다. 기존 서버에 추가 트래픽뿐만 아니라 사용자들의 이미지를 가지고 오는 대기 시간의 증가를 불러옵니다. 이미지를 긴급히 업데이트 필요가 없다면, 자연스럽 캐시가 만료되는 것을 강제로 24시간을 지연시킬 수 있습니다. 이 기능을 남용하면 이미지가 삭제될 수도 이습니다.

Domain Sharding

Some browsers are not able to make large numbers of simultaneous requests to servers on the same domain, and a well-known technique for improving page load times is to host images on different domains so that more requests can be parallelized. Sencha.io Src facilitates this by allowing you to use the src1 to src4 subdomains in addition to just src. So it's possible to improve the likelyhood of efficient loading by cycling through these four sub-domains in the markup:

어떤 브라우저들은 같은 도메인에서 대량의 동시 요청을 받을 수 없으며, 페이지 로드의 성능을 향상시키는 방법으로 잘 알려진 여러 다른 도메인에서 이미지 호스트하여 요청을 병렬화 할 수 있습니다. Sencha.io Src는 src에 더하여 src1에서 src4의 서브도메인의 사용을 허용하여 이 기능이 가능합니다. 마크업의 4개의 서브도메인을 주기적으로 사용하여 로딩의 효율성을 개선할 수 있습니다.

 <img
   src='http://src1.sencha.io/-16x50-2/http://sencha.com/files/u1.jpg'
   alt='My first parallel JPG'
 />
 <img
   src='http://src2.sencha.io/-16x50-2/http://sencha.com/files/u2.jpg'
   alt='My second parallel JPG'
 />
 <img
   src='http://src3.sencha.io/-16x50-2/http://sencha.com/files/u3.jpg'
   alt='My third parallel JPG'
 />
 <img
   src='http://src4.sencha.io/-16x50-2/http://sencha.com/files/u4.jpg'
   alt='My fourth parallel JPG'
 />

Obviously this will be very useful when you have large numbers of resized images on a single page, and easy when you are looping over the images on the server-side anyway. In PHP, for example:

한 페이지에서 상당수의 리사이즈된 이미지를 가지고 있거나, 서버사이드에서 이미지를 반복처리 해야할 때 이 방법은 매우 우용하다고 할 수 있습니다. 예를 들어 PHP에서는

 $picture_urls = array(
     'http://sencha.com/files/u1.jpg',
     'http://sencha.com/files/u2.jpg',
     'http://sencha.com/files/u3.jpg',
     'http://sencha.com/files/u4.jpg'
 );

 foreach ($picture_urls as $index=>$url) {
     $shard = $index % 4 + 1;
     print "![][56]";
 }

Suffice to say, on mobile devices, where latency is often more of a concern than throughput, maximizing the amount of parallelization the browser can perform is A Good Thing.

모바일 장치에서 대기 시간은 처리량보다 자주 발생하므로, 병렬 처리량을 최대로 하는 것은 브라우저가 작동하기 좋게 만들기에 충분하다고 할 수 있다.

The API in Summary

The full syntax of the Sencha.io Src API is as follows (with linebreaks added for clarity only):

Sencha.io Src API의 문법은 아래와 같습니다. (줄나눔은 보기 좋게 하기 위해 추가하였습니다)

 http://src[shard].sencha.io
        [/flush]
        [/data]
        [/format[quality]]
        [/orientation]
        [/width[/height]]
        /url

Where:

shard (optional). A number between 1 and 4, to distribute loading across subdomains.

flush (optional). If flush then original image is refetched and its cached copy updated.

data (optional). If data then Sencha.io Src returns a data URL. Also takes a callback suffix and arguments for JSON-P use.

format (optional). This is either jpg or png. Defaults to the original image format.

quality (optional). When the format is jpg, a compression value from 1 to 100. Defaults to 85.

orientation (optional). If 'landscape' or 'portrait', this will swap X/Y constraints if required. Defaults to no effect. 'detect' is experimental to use window.orientation if present.

width (optional). A width in pixels (which overrides the adaptive- or family-sizing). Can also contain formulaic adjustment.

height (optional). A height in pixels, if width is also present. Can also contain formulaic adjustment.

url (required). The absolute path of the original image. It must start with http://

shard (optional) : 1에서 4 사이의 숫자로, 서브도메인간의 로딩을 분담합니다.

flush (optional) : flush가 실행되면 원래의 이미지는 다시 불려지고 캐시된 복사본은 업데이트 됩니다.

data (optioan) : data가 실행되면 Sencha.io Src는 data URL을 반환합니다. 또한 JSON-P를 사용하기 위해 callback suffix 와 argument를 가져옵니다.

format (option) : 이것은 jpg 또는 png입니다. 기본적으로 이미지 포맷입니다.

quality(option) : jpg 포맷일 경우, 압축 값은 1에서 100까지입니다. 기본은 85입니다.

orientation (option) : 만약 ‘가로 방향’이거나 ‘세로 방향’일 때, 요청이 있다면 X축과 Y축을 서로 바꿉니다.

width (option) : 픽셀(). 조정 표현식을 가질 수 있습니다.

height (option) : 조정 표현식을 가질 수 있습니다.

url (option) : 원래 이미지의 절대경로를 나타냅니다. 반드시 http://로 시작해야 합니다.

Formulaic adjustments use the following operators:

조정 표현식은 아래에 언급 된 연산자를 사용합니다.

• deduct value

x multiply by percentage

a add value

r round down to the nearest...

m maximum for mobile browser

n maximum for non-mobile browser

Apps using screen.js are also able to use the following client-side measurements (or their abbreviations) at the start of the width of height parameters:

애플리케이션이 사용하는 screen.js는 아래에 제시하는 클라이언트측의 measurements (또는 축약어) 앞의 width와 height 파라미터를 사용할 수 있습니다.

Measurement Abbreviation

screen.width sw

screen.height sh

screen.availWidth saw

screen.availHeight sah

window.outerWidth wow

window.outerHeight woh

window.innerWidth wiw

window.innerHeight wih

document.body.clientWidth bcw

document.body.clientHeight bch

document.body.offsetHeight boh

document.body.offsetWidth bow

It's worth re-iterating that each aspect of the API we've described in this document can normally be used alongside others. You can resize images, convert their format, and turn them into data URLs - all in one go - if you want. Simply ensure that you adhere to the order of the URL fragments above to ensure that the service performs the transformations you need.

이 문서에서 우리가 설명하면서 사용한 각 API의 특징은 보통 다른 API 옆에 나란히 사용되어 재반복될 때 가치가 있습니다. 당신은 이미지 크기의 조절, 포맷의 변환, data URLs로 바꿀 수 있으며, 또한 당신이 원한다면 모두 한번에 처리할 수 있습니다. 단순히 당신이 원하는 URL fragment 순서대로 처리하도록 하여 서비스가 필요한 변환을 수행하도록 합니다.

Have fun!

즐기십시오!