От автора: во многих проектах адаптивные изображения это не техническая проблема, а вопрос стратегии. Создать разные изображения под различные экраны технически можно с помощью атрибутов srcset и sizes, а также тега picture и полифила Picturefill (или чего-то похожего). Но все эти изображения должны создаваться и настраиваться логикой самой CMS. А это уже сложно.
Кроме этого, необходимо сгенерировать разметку адаптивных изображений и добавить ее в HTML. Если на каком-либо этапе подключается новый вариант изображения, разметку необходимо обновить (формат файлов WebP или большой экран портретного или альбомного вида). Такое количество работы часто вызывает проблемы – если у вас есть идеальное фото товара, то вам нужно или вручную создать все варианты под мобильные экраны, портретную и альбомную ориентации, большие экраны или же создать плагин или расширение для автоматизации данного процесса.
Иногда работают и различные хитрости. Одна из них это сжатые изображения, умная техника, в основе которой лежит мысль, что уровень сжатия сильнее влияет на изображение, чем его физический размер. Со слов Скотта Джелла «На экране одного размера отображаются два одинаковых изображения. Одно из них может намного меньше весить, чем другое, если его сильно сжать и увеличить в размерах. Но на экране изображения будут одинаковых размеров.»
Т.е. мы можем увеличить наше изображение в размере, сохранить его в самом худшем качестве через фотошоп и отображать в браузере с нужным нам размером. В среднем изображения, передаваемые по сети, будут большего разрешения, но приблизительно меньше в размере на 50-65%. Разница существенная. И данный метод работает в реальных проектах.
Недостаток: мы избавляем клиента от лишней работы. Но если он захочет сохранить изображение, то получит не самое лучшее качество. И данный способ не решает проблему умного обрезания изображений. Не совсем то решение, которое мы ищем.
Дьявол кроется на стороне Back-End’а!
Общий сценарий это добавление какой-либо логики на стороне сервера в CMS, которая позволит контент менеджерам загружать изображения, выбирать подходящие точки на каждом изображении и на основе одного генерировать все обрезанные версии налету.
Метод с обрезкой изображений немного хитрый. Но если у вас все нормально с изменением размеров изображений, а браузер может выбрать самое подходящее из них, для вас это не будет такой проблемой – для изменения размера можно использовать ImageMagick или любой другой графический редактор, или CMS плагин: Mobify.js API, Responsive Images in WordPress core. Также есть способ для Drupal.
Однако если вам крайне важна умная обрезка изображений, к примеру, вы хотите отображать сильно различающиеся фотографии товара для разных экранов, то вам придется воспользоваться чем-то более продвинутым.
Широкоформатное фото, уменьшенное на узком экране, будет смотреться не самым лучшим образом. То же самое с узкими изображениями, растянутыми на всю область просмотра широкоформатного экрана. Тут нам понадобится что-то поумнее.
Какие варианты у нас есть?
Можно запустить пакетную обработку через заливку с учетом содержимого в фотошопе или использовать инструмент Smartcrop.js, в котором очень просто реализована заливка с учетом содержимого с помощью JS. В теории можно было бы интегрировать smartcrop-cli (вместе с ImageOptim-CLI) в таск раннер Grunt или Gulp и обрезать изображения налету. Также imgix можно использовать для автоматической обрезки изображений по точкам. Уже совсем другое дело, но нам понадобится прописать разметку для всех вариантов вручную.
Есть хорошая новость: появился новый способ. Пару дней назад мы уже писали о генераторе адаптивных изображений под определенный размер экрана – небольшой open source инструмент, с помощью которого можно интерактивно вычислять разрешения изображения. От вас требуется загрузить изображение, а инструмент сам определит подходящие разрешения экранов, изменит размер изображений и сгенерирует разметку, которую потом можно скопировать и вставить в HTML документ. Можно пойти еще дальше и автоматически умно обрезать адаптивные изображения с помощью API данного инструмента.
Как Эрик Портис объясняет в своей статье, когда вы используете Cloudinary API, то можно задать режим crop_mode, с помощью которого можно имитировать CSS свойство background-size: cover. Кроме высоты и ширины вы можете также задавать точки для обрезания с помощью параметра gravity, масштабировать изображение и задавать соотношение сторон, что немного облегчит адресную строку. API поддерживает метод обнаружения лица. Если на ваших изображения есть люди, данная функция позволит вам более точно обрезать нужные части картинки.
Если вы хотите точно задавать точки для обрезки, советую взглянуть на Sizzlepig (платный) – браузерный инструмент по пакетной обработке изображений, который можно совместить с Google Drive и Dropbox. С его помощью можно изменять области обрезания и масштабировать каждое изображение в отдельности.
Заключение
В идеале было бы хорошо иметь один инструмент, который будет очень умно обрезать изображения и вставлять нужную разметку в HTML код страницы автоматически, или же в нем будет интерфейс для визуальной настройки точек обрезки изображений и готовой разметкой на выходе. Пока что такого решения не придумали, но, быть может, в скором времени что-то появится.
В то же время перечисленные выше инструменты очень даже неплохие, если мы говорим о решении весьма сложной задачи по умной обрезке изображений – вручную или с помощью самописного плагина в CMS.
Автор: Vitaly Friedman
Источник: //www.smashingmagazine.com/
Редакция: Команда webformyself.
