Сделайте ваши изображения отзывчивыми с библиотекой Filestack

К настоящему времени мы видели Filestack в действии во многих различных ситуациях, включая улучшение изображений, преобразование документов и аудиофайлов. Здесь, в Filestack, моя работа состоит в том, чтобы показать вам, ребята, как легко мы можем интегрировать и улучшать веб-приложения благодаря Filestack API. Загрузка изображений и манипулирование ими — большая тема, которую мы здесь рассмотрим. Это не первый пост об этом… И не последний!

В настоящее время доступ к Интернету осуществляется с множества различных устройств. Идея использования ПК в качестве единственного источника для серфинга в сети звучит как каменный век, не так ли? Очевидно, что разные устройства означают разные экраны, разные экраны — разные размеры и так далее. Проще говоря, одной из наших задач как разработчиков, безусловно, является отображение веб-страницы на множестве различных устройств без ущерба для пользовательского опыта и запоминающегося пользовательского интерфейса.

Так появился отзывчивый дизайн (RWD) и адаптивные изображения.

Это что? Поскольку экраны устройств могут уменьшаться, рендеринг изображения большого размера приводит к замедлению работы веб-сайта без каких-либо реальных преимуществ для пользователей:

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

Не волнуйтесь, мы не будем их рассматривать, потому что Filestack может позаботиться об адаптивных изображениях без усилий.

Приложение

Во-первых, давайте начнем с галереи изображений. Если у вас его еще нет, ознакомьтесь с нашим Учебным пособием по галерее изображений, в котором мы создаем приложение, в которое пользователи могут загружать изображения с подписями для публикации в Интернете.

Вот скриншот нашей домашней страницы:

Это приложение — хорошая возможность увидеть, как Filestack загружает изображения и контролирует весь процесс, начиная с разрешенных исходных хранилищ и заканчивая результатом в формате JSON.

Однако, несмотря на то, что за адаптивный дизайн отвечает Boostrap, мы не делали никаких предположений о производительности:

В конце концов, это галерея для обмена фотографиями, выступления имеют значение!

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

Примечание: обновленный код можно найти в том же репозитории приложения галереи изображений.

Адаптивные изображения стека файлов

Позволить Filestack позаботиться о наших изображениях очень просто:

Если вы заглянете в документацию, то заметите, что самый быстрый способ — это произвести некоторые манипуляции с тегом img, а именно добавить некоторые атрибуты:

<img data-fp-src="IMG_URL"/>

Вместо того, чтобы вводить канонический атрибут src, замените его на data-fp-src и все! Теперь у нас есть адаптивное изображение, размер которого будет изменяться в зависимости от экрана устройства.

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

<img alt="" data-fp-src="IMG_URL" data-fp-on-resize="all" data-fp-pixel-round="20" />

1. data-fp-on-resize по умолчанию установлено на все, и с его помощью мы можем управлять поведением при изменении размера: например, если установить его на меньшую величину, изменение размера разрешается только при уменьшении размера экрана устройства.

2. data-fp-pixel-round вместо этого измените размер изображения до ближайшего числа пикселей.

Очевидно, есть и другие атрибуты, которые вы можете добавить, так что не стесняйтесь ознакомиться с документацией.

И, кстати, не забудьте установить ширину изображений на 100%, чтобы разрешить изменение размера!

Обновление кода

Что ж, это почти все, что нам нужно, поэтому пришло время обновить наш код:

Если вы помните, мы создали компонент для обработки одного элемента, состоящего из изображения и подписи, поэтому в теге img мы добавляем атрибуты для Filestack следующим образом:

class Image extends React.Component {
 render() {
   return (
   <div className="col-md-4">
     <div className="thumbnail">
       <img data-fp-src={this.props.url} className="img-rounded"></img>
     </div>
     <p>{this.props.caption}</p>
     <div className="btn-group btn-group-sm pull-right" role="group" aria-label="media-stats">
       <button type="button" className="btn btn-default"><i className="glyphicon glyphicon-heart"></i> {this.props.like}</button>
       <button type="button" className="btn btn-default"><i className="glyphicon glyphicon-share"></i> Share</button>
     </div>
   </div>
   );
 }
}

Это на самом деле работает гладко, но вам не кажется, что становится все больше и больше многословия? Для каждой картинки мы должны повторять эти два атрибута данных… Я действительно думаю, что мы можем получить трудночитаемый код, особенно если у компонента есть и другие атрибуты.

Разработчики Filestack, должно быть, думали так же, потому что они придумали лучшее решение: почему вместо этого нельзя определить эти атрибуты глобально? С Javascript проще простого! Взгляните на этот код:

filepicker.setResponsiveOptions(
  {
    onResize: 'all',
    pixelRound: 20
  });

Библиотека предоставляет метод setResponsiveOptions, который принимает в качестве параметра объект опций. Эти параметры определяют адаптивное поведение во всем нашем приложении без необходимости повторяться внутри компонента. Таким образом, мы можем избавиться от data-fp-on-resize и data-fp-pixel-round, чтобы получить более чистый и элегантный код.

API в действии

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

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

<img class="img-rounded" src="https://process.filepicker.io/AfcnFThTU4ebKMjxRMngSz/resize=width:360/http://blog.esl.it/wp-content/uploads/2015/03/malta-sun-800x800.jpg" alt="" />

Filestack API прикрепил к тегу img реальный атрибут src, необходимый браузеру для отображения изображения, источник — не что иное, как результат обработки изображения, а текущий размер — 360px.

Вместо этого после точки останова:

<img class="img-rounded" src="https://process.filepicker.io/AfcnFThTU4ebKMjxRMngSz/resize=width:720/http://blog.esl.it/wp-content/uploads/2015/03/malta-sun-800x800.jpg" alt="" />

Изображение было изменено до 720px, и нам не пришлось об этом заботиться!

Выводы

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

Filestack поставляется с быстрым решением для обработки адаптивных изображений: он предоставляет несколько способов изменения размера на лету без необходимости разработчикам бороться с css и javascript.

Поздравляю с окончанием поста!