Динамический ресайз или src.sencha.io

Вот решил немного поделиться, то чего знаю. Недавно, месяца 3 назад, я начал изучать Senhca Touch (мобильные приложения), так вот, у Сенча есть такой сервис, как Ресайз картинок, Мы прекрасно понимаем, что мобильные устройства и планшеты — разных разрешений, и для каждого разрешения накладно складывать куча картинок. Sencha.io Src позволяет динамически изменять размер изображения для все большего количества размеров экрана мобильного устройства. Так-же можем просто воспользоваться ресайзом изображения не прибигая к расширениям.
Все изображения в этом топике проходят через src.sencha.io

Давайте начнем с небольшого примера. Предположим, что вы вставляете изображение 640px × 480px в веб-приложение или сайт с разметкой что-то вроде этого:

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

Для использования Sencha.io Src в режиме по умолчанию, вы просто к своему изображению добавляете префикс вашего абсолютного SRC атрибут с

http://src.sencha.io/

Добавим, это в тег img и ваше изображение будет изменятся в зависимости от экрана мобильного устройства:

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

Sencha.io Src будет изменять размеры изображения в соответствии с физическим экраном мобильного телефона при посещении вашего сайта. Например, если iPhone 3GS, изображение будет преобразовано к экрану с размером 320px × 480px.

В данном случае изображение имеет альбомную ориентацию. Пропорции всегда сохраняются Sencha.io Src, поэтому наше изображение 640px × 400px появятся изменённым в размер для iPhone 3GS, как 320px × 200px.

Если вы хотите изменить размер графики менее, чем на весь экран в ширину или высоту, есть много других способов API которые мы может использовать. Давайте смотреть.

Определение размеров (как раз, то что мы можем использовать в веб приложениях)
Если вы хотите изменить размер изображения на свои, Sencha.io Src принимает необязательные параметры позволяют определить ширину и высоту. Они должны указываться до изображения URL в вашем SRC атрибут. Так, например,

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

Если вы хотите придерживаться только ширины изображения, просто укажем один числовой аргумент:

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

И помните, Sencha.io Src всегда сохраняет пропорции, так что в этом примере, мы все еще ​​можем не выставлять высоту 200px в теге атрибута img.

Важное примечание: Sencha.io Src будет только сокращаться изображений. Но не будет увеличить их.

Пользовательские изменения
В настоящее время это экспериментальная функция. Sencha.io Src обеспечивает небольшой файл JavaScript, который получает размеры о экране браузера.

Чтобы вставить JavaScript в HTML-страницы, используйте следующий фрагмент:

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

более подробно на оф сайте. (я думаю здесь больше интересует веб)

Процентное изменение
Аналогично, если вы хотите масштабировать графику, используйте х префикс. Значение интерпретируется как целое число в процентах от 1 до 100.

Таким образом, чтобы уменьшить изображение не более третей части экрана, используйте x33, как в примере:

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

Для примера я продублирую три раза картинку, чтобы вы видели, что ровно третию часть окна заниает изображение.


Прочие корректировки
Вы можете задать шаг увеличения или уменьшения картинки,… это полезно, когда на сайте есть сетка…
Следующий пример будет округлить ширину изображения всегда кратно 20 пикселей:

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

Наконец, можно указать максимальное значение для размера изображения, так что вы можете быть уверены, что, независимо от любых других преобразований, она не превышает предел. Можно указать два максимума, зависит от того, браузер был идентифицирован как мобильные или не мобильный.

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

Форматы файлов
Вы можете указать файл формата полученного изображения, который возвращается из Sencha.io Src. Вы можете выбрать или PNG или JPG кодирование с помощью PNG или JPG маркера. Этот параметр идет до размеров (если есть) в URL-адресе. В следующем примере оригинального JPG превращается в обоих умолчанию, и явно измененным размером, PNG изображений:

<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'
/>

Обратите внимание, что JPG является «потерями» кодирования, поэтому качество изображения 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'
/>

Кэш
Sencha.io Src кэширует изображений на срок до одного дня. Кэш чувствительны к все параметры API выше, так что если вы запрашиваете или ожидать изображений с различных размеров, форм и степеней сжатия, кэш будет хранить каждую версию.

Тем не менее, Есть моменты, когда вы можете принудительно Sencha.io Src к refetch изображение с вашего сервера — например, когда вы обновили оригинальную без изменения его URL-адрес, например. Чтобы заставить кэшированную версию изображения, которое будет проигнорировано, добавить flush к началу URL следующим образом:

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

Некоторые браузеры не в состоянии сделать большое количество одновременных запросов к серверам в том же домене, а также хорошо известный метод для улучшения времени загрузки страницы является размещение изображения на разных доменах, чтобы больше запросов можно распараллелить. Sencha.io Src облегчает это, позволяя вам использовать src1 к src4 поддоменов в дополнение к только что SRC. Поэтому вполне возможно, чтобы повысить вероятность эффективного загрузки на велосипеде через эти четыре суб-доменов в разметке:

<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'
/>

Очевидно, что это будет очень полезно, когда у вас есть большое количество изображения на одной странице разных размеров, это делается легко в цикл над изображениями на стороне сервера в любом случае. В 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 "<img src='http://src$shard.sencha.io/$url' />";
}

API — детально на оф сайте…

Ещё много разных плюшек интересных для мобильных устройств я упустил.
Более детально и в полном объёме эту информацию можно прочитать на оф сайте
www.sencha.com/learn/how-to-use-src-sencha-io