Focal Ppoint: интеллектуальная обрезка адаптивных изображений

Практика реализации процесса адаптации изображений все еще находится в стадии развития. Существует большое количество идей и предложений как следует обрабатывать картинки.

В данном уроке мы рассмотрим небольшую очаровательную библиотеку, которая позволяет не только автоматически изменять размер изображений при изменении параметров окна просмотра, но также обрезать картинки, принимая во внимание заданную точку фокуса. К тому же, все действия осуществляются на чистом CSS.

Встречайте Focal Point

Focal Point - проект на GitHub и библиотека CSS? созданная Адамом Бредлеем (Adam Bradley). В соответствии с концепцией адаптивности изображения должны изменять размер и положение для достижения оптимальных пропорций для текущего окна просмотра. Focal Point продвигает данную идею дальше и не только изменяет размер изображений, но и обрезает их.

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

Focal Point позволяет задать целевую область изображения, которая должна оставаться целой  (точка фокуса). Таким образом, когда библиотека будет выполнять обрезку, само изображений будет сохранять отличный вид.

Как это работает?

Реализация Focal Point достаточно уникальный, но в то же время простой процесс. Сначала обсудим, как выбирать точку фокуса, а затем погрузимся в код реализации.

Когда вы вставляете изображение в веб страницу с помощью Focal Point, оно автоматически разделяется на невидимую сетку с 12×12 ячеек. Нет разницы, какого размера картинка, сетка адаптируется под него.

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

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

Код

Теперь мы можем указать точку фокуса и пришло время разобраться в коде реализации. Для начала загрузите проект с GitHub и привяжите CSS файл к вашему документу HTML.

После предварительных операций нужно добавить два элемента div и тег img. Да, разметка получается избыточной для одного изображения, и сей факт является минусом библиотеки. Вот типовая разметка:

<div class="focal-point">
  <div><img src="/guy.jpg" alt="guy"></div>
</div>

Как вы можете заметить, внешний элемент div имеет класс “focal-point”, а во внутреннем размещено наше изображение без каких либо классов.

Переводим единицы сетки в классы

Теперь надо указать Focal Point на место, где находится фокус изображения. Наша точка фокуса смещена на три единицы вправо и три единицы вверх. Поэтому указываем для внешнего элемента div классы  “right-3″ и “up-3″.

<div class="focal-point right-3 up-3">
  <div><img src="/guy.jpg" alt=""></div>
</div>

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

Обратите внимание, что изображение справа не только меньше, но и обрезано вокруг важной части. Все выполняется с помощью CSS!

Структура страницы

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

Определим элемент div с классом  “column”:

<div class="column">
</div>

Добавим заголовок и параграф для имитации содержания страницы:

<div class="column">
  <h1>Focal Point</h1>
  <p>Lorem ipsum.... </p>
</div>

Затем вставим изображение, как было показано в предыдущем примере (с двумя элементами div и классами для точки фокуса):

<div class="column">
  <h1>Focal Point</h1>
  <p>Lorem ipsum.... </p>
 
  <div class="focal-point right-3 up-3">
    <div><img src="/guy.jpg" alt="guy"></div>
  </div>
</div>

И для завершения примера скопируем код с использованием другого изображения и другой точки фокуса.

<div class="column">
  <h1>Focal Point</h1>
  <p>Lorem ipsum...</p>
 
  <div class="focal-point right-3 up-3">
    <div><img src="/guy.jpg" alt="guy"></div>
  </div>
</div>
 
<div class="column">
  <h1>Focal Point</h1>
  <p>Lorem ipsum...</p>
 
  <div class="focal-point right-2 up-2">
    <div><img src="/couple.jpg" alt="couple"></div>
  </div>
</div>

Для второго изображения точка фокуса находится в другом месте:

CSS

Определим стили для нашей страницы. Адаптация изображений и работа с точкой фокуса находятся вне зоны нашей деятельности. Все что нужно сделать - определить внешний вид элементов. Для примера страница делится на две колонки и задаются стили для текста.

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
 
.column {
  float: left;
  overflow: auto;
  padding: 20px;
  width: 50%;
}
 
h1  {
  text-transform: uppercase;
  font: bold 45px/1.5 Helvetica, Verdana, sans-serif;
}
 
p {
  margin-bottom: 20px;
  color: #888;
  font: 14px/1.5 Helvetica, Verdana, sans-serif;
}
 
@media all and (max-width: 767px) {
  p {
    font-size: 12px;
  }
 
  h1 {
    font-size: 35px;
  }
}
 
@media all and (max-width: 550px) {
  h1 {
    font-size: 23px;
  }
}

Смотрим в действии

Теперь можно посмотреть как работает демонстрация. Если страницы выводится в большом окне просмотра (например, на экрана монитора настольного компьютера), то изображения будут выводиться в полном объеме:

Теперь, если уменьшить размер окна просмотра или смотреть демонстрационную страницу с мобильного устройства, то можно увидеть, как адаптируются изображения. По мере уменьшения окна изображения не только уменьшаются, но и обрезаются.

С точки зрения дизайна насколько эффективна такая техника!? Чем меньше изображение становится, тем сильнее выделяется точка фокуса. С помощью данной библиотеки можно быть уверенным, что даже на маленьких экранах пользователи будут важную информацию.

Совместимость с браузерами

Библиотека работает во всех новых браузерах. В IE8 изображения изменяют размер, но не обрезаются. Но на текущий момент 99.99% сайтов не имеют пдобного механизма адаптации изображения с автоматической обрезкой, так что реакция IE8 не является критичной.

Что находится внутри?

Теперыь рассмотрим, как работает библиотека.

Первая часть кода является базовым решением CSS для адаптивных изображений.

.focal-point {
    width: 100%;
    height: auto;
    overflow: hidden;
}
 
.focal-point img {
    width: 100%;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
}
 
.focal-point div {
    position: relative; 
    max-width: none; 
    height: auto;
}

Следующий код немного сложнее. Сначала медиа запрос реализуется в точке  767px. Затем, для обрезки изображения используются отрицательные значения полей для каждого из доступных классов. В тексте урока мы приводим только классы “up-3″ и “right-3″, которые использовались в демонстрации.

@media all and (max-width: 767px) {
 
    /* 4x3 Landscape Shape (Default) */
    .focal-point div {
        margin: -3em -4em;
    }
 
    /* Landscape up (Total 6em) */
    .up-3 div {
        margin-top:    -1.5em;
        margin-bottom: -4.5em;
    }
     
    .right-3 div {
        margin-left:  -6em;
        margin-right: -2em;
    }
}

Здесь не так много кода, но он достаточно элегантен. Отрицательные поля используются с единицами  em для обрезки изображений относительно заданной точки.

• Комментарии