• 5 минут чтения

• Кодирование, Инструменты, Адаптивные изображения

• Поделись Твиттер, Линкедин

Во многих проектах адаптивные изображения являются не технической проблемой, а стратегический интерес. Доставка разных изображений на разные экраны технически возможна с помощью srcset, размеров, элемента и полифилла 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.

(вф)