Автоматически управляемые изображения? Ну вот.

Во многих проектах адаптивные изображения являются не технической проблемой, а стратегическим вопросом . Доставка разных изображений на разные экраны технически возможна с помощью srcset, размеров, элемента <picture> и полифилла Picturefill (или подобного); но все эти варианты изображений должны быть созданы, скорректированы и встроены в логику существующей CMS. И это непросто.

Кроме того, разметка адаптивных изображений также должна быть сгенерирована и добавлена ​​в HTML, и если в какой-то момент в игру вступает новый вариант изображения (например, формат файла, такой как WebP, или большой альбомный/портретный вариант), разметка быть обновленным. Требуемый объем дополнительной работы часто вызывает проблемы — поэтому, если у вас есть идеальный снимок продукта, вам нужно либо вручную создать варианты для мобильных устройств, портретной и альбомной ориентации, либо создать плагины и расширения, чтобы каким-то образом автоматизировать процесс.

Иногда обходные пути тоже работают очень хорошо. Одним из них является сжатие изображений, умный метод, который предполагает, что уровень сжатия имеет большее значение, чем его физические размеры. Таким образом, по словам Скотта Йела, «имея два одинаковых изображения, которые отображаются на веб-сайте в одинаковом размере, одно может быть значительно меньше другого по размеру файла, если оно одновременно сильно сжато и значительно больше по размеру, чем отображается. ”

Дальнейшее чтение на SmashingMag:

• Простые адаптивные изображения с фоновыми изображениями CSS
• Автоматизируйте адаптивные изображения с помощью Mobify.js
• Как решить адаптивные изображения в адаптивном веб-дизайне
• Адаптивные изображения в WordPress с художественным оформлением
  

Таким образом, в основном мы могли бы увеличить данное изображение, сохранить его в самом худшем качестве в Photoshop и позволить браузеру выполнить масштабирование — в среднем фактическое изображение, отправленное по сети, будет больше по размеру, но примерно на 50–65% меньше по размеру. размер файла. Вот это уже совсем другое. И это работает в реальных проектах.

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

Дьявол в… задней части!

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

Бит «обрезки» является сложным, и если вы прекрасно можете изменить размер изображений без художественного оформления и позволить браузеру выбрать изображение, которое, по его мнению, подходит лучше всего, это не будет большой проблемой — вы можете используйте ImageMagick или любой другой инструмент для редактирования изображений для изменения масштаба, или плагины CMS могут позаботиться об этом за вас: например, API Mobify.js, адаптивные изображения в ядре WordPress, а также есть решение для Drupal.

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

Итак, какие есть варианты?

Ну, мы могли бы запустить пакетную обработку с помощью заливки с учетом содержимого в Photoshop или использовать такие инструменты, как Smartcrop.js, который представляет собой довольно простую реализацию обрезки изображения с учетом содержимого с помощью JavaScript. Потенциально мы могли бы даже интегрировать smartcrop-cli (вместе с ImageOptim-CLI) в наши процессы сборки Grunt и Gulp и обрезать изображения на лету. Вы также можете использовать imgix с его автоматической обрезкой точек интереса. Это уже отличное начало, но нам нужно будет написать разметку для всех этих вариантов вручную.

Хорошие новости: в квартале появился новый ребенок. Всего несколько дней назад мы писали о Генераторе контрольных точек адаптивного изображения, небольшом инструменте с открытым исходным кодом, который позволяет вам вычислять контрольные точки для ваших изображений в интерактивном режиме. По сути, вы можете загрузить изображение, и инструмент обнаружит соответствующие точки останова, масштабирует изображения и сгенерирует адаптивную разметку изображений , которую затем можно скопировать/вставить в HTML-код. Вы можете пойти еще дальше и автоматически создавать адаптивные изображения с помощью API инструмента.

Как объясняет Эрик Портис в своей статье, при использовании Cloudinary API вы можете указать режим crop_mode , который позволяет имитировать background-size: cover в CSS. Помимо указания высоты и ширины, вы также можете указать фокусную точку, используя параметр gravity , коэффициент масштабирования и соотношение сторон, что может сделать URL-адреса более удобными для чтения. Фактически, API поддерживает распознавание лиц, поэтому, если ваши изображения содержат человеческие лица, художественное направление может быть автоматизировано с более высокой вероятностью довольно приличного кадрирования.

Если вы хотите иметь возможность явно определять фокусные точки для изображений , вы можете заглянуть в Sizzlepig (не бесплатно), инструмент пакетной обработки изображений в браузере, который можно интегрировать с Google Диском и Dropbox и позволяет изменять обрезку. и масштабирование для каждого изображения.

Резюме

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

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