Адаптивні зображення: автоматичне створення

15

Від автора: у багатьох проектах адаптивні зображення це не технічна проблема, а питання стратегії. Створити різні зображення під різні екрани технічно можна з допомогою атрибутів 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.