Створення сайтів - студія веб-дизайну WebStudio2U Контактні дані веб-студії WebStudio2U RSS стрічка веб-студії WebStudio2U Мапа сайту Авторизація

Адаптивний веб-дизайн і генерація адаптивних зображень

Адаптивний веб-дизайн і генерація адаптивних зображень Адаптивний веб-дизайнтренд кількох останніх років, що з урахуванням значного зростання відвідуваності сайтів з мобільних пристроїв, звичайно ж, не дивує. Але навіть при настільки високій популярності такого веб-дизайну багато власників сайтів все ж не поспішають використовувати в дії його переваги. У чому ж справа? У числі можливих причин тут можна назвати певні складнощі у використанні адаптивних зображень.

У веб-дизайні, що отримав назву «адаптивний», принцип побудови сторінок сайтів такий, що всі елементи на сторінках при зміні розміру екрана плавно зменшуються або збільшуються, а також при необхідності змінюють своє розташування. Реалізується цей принцип на практиці за допомогою «гумового» макета, запитів media queries і спеціальних адаптивних зображень.

З гумовою версткою, а також використанням media queries труднощів зазвичай не виникає, а от адаптивні зображення можуть доставляти веб-розробникам чимало проблем. Причина криється в тій величезній на сьогоднішній день кількості пристроїв, з яких сучасні користувачі здійснюють відвідування сайтів: комп'ютери, ноутбуки, планшети, смартфони, смарт-годинники, електронні книги, телевізори та інші пристрої мають десятки варіантів роздільної здатності екрана, і під кожен з них доводиться підбирати оптимальний розмір зображення.

Звичайно, можна піти досить простим шляхом і для кожного конкретного зображення створити копії з різною роздільною здатністю і розміром – за кількістю пристроїв, для яких адаптується сайт. Однак якщо адаптивних зображень потрібно багато, а перелік необхідних роздільних здатностей екрану налічує десять і більше варіантів, подібний підхід внесе плутанину і потребує великої кількості часу на підготовку зображень. Щоб уникнути такої ситуації, адаптивний веб-дизайн пропонує ефективне рішення — генерацію адаптивних зображень за контрольними точками.

Контрольні точки (breakpoints, брейкпоінти) в адаптивному веб-дизайні — це певні фіксовані значення роздільної здатності екрану пристрою, при яких потрібно змінити поведінку шаблону сайту. Наприклад, коли екран пристрою настільки малий, що не вміщує всі елементи сторінки в один рядок, за допомогою контрольної точки, що дорівнює його ширині, можна зробити так, щоб елементи розмістилися один під одним.

Завдяки тому, що в адаптивному веб-дизайні використовується «гумова» верстка з відносними (у відсотках) розмірами елементів, кількість необхідних контрольних точок може бути порівняно невеликою: нова точка створюється лише тоді, коли при певній роздільній здатності екрану вміст сторінки перестає зручно сприйматися. Контрольні точки застосовуються як для управління поведінкою текстових елементів сторінок сайту, так і для управління завантаженням адаптивних зображень.

Генерація адаптивних зображень за контрольними точками дозволяє знизити кількість використовуваних для «реагування» на різні варіанти роздільної здатності екрана файлів з зображеннями. Але скільки ж саме слід створювати зображень і якими будуть оптимальні контрольні точки в кожному конкретному випадку? Відповідь на ці питання взялися запропонувати розробники веб-сервісу Responsive Image Breakpoints Generator (www.responsivebreakpoints.com).

Responsive Image Breakpoints Generator – open source проект для автоматичної генерації адаптивних зображень за брейкпоінтами. Інструментарій цього сервісу дозволяє задати бажаний діапазон зміни роздільної здатности згенерованих зображень, вказати максимальну кількість зображень, а також змінити оригінальне співвідношення сторін при необхідності. Щоб скористатися сервісом, досить виконати налаштування параметрів за допомогою «повзунків», завантажити зображення, що треба оптимізувати, та+ натиснути кнопку Generate.

Результатом роботи сервісу (всі обчислення, до речі, відбуваються в хмарі Cloudinary) стає генерація необхідної кількості зображень у відповідності з оптимальними контрольними точками, при цьому готові зображення доступні для завантаження у вигляді архіву. Додатково Responsive Image Breakpoints Generator створює зразок HTML 5 коду для вставки створених зображень на сайт.

Код генерується для тега img зі спеціальними атрибутами sizes і srcset. Дані атрибути дозволяють вказати відразу кілька варіантів зображень для різних контрольних точок в одному елементі img. Наведемо приклад коду, що генерується в Responsive Image Breakpoints Generator:

<img sizes="(max-width: 1000px) 100vw, 1000px" srcset="image_c_scale,w_200.jpg 200w, image_c_scale,w_488.jpg 488w, image_c_scale,w_1000.jpg 1000w" src="/image_c_scale,w_1000.jpg" alt="">

У цьому прикладі сервісом згенеровано 3 зображення для трьох контрольних точок — 200 пікселів, 488 пікселів і 1000 пікселів. Максимальна роздільна здатність у даному випадку дорівнює 1000 пікселів, ширина зображення дорівнює 100% ширини екрану пристрою. При цьому для браузерів, які не підтримують HTML 5, буде використано зображення, зазначене в атрибуті src — те, що максимальною шириною.

Використання сервісу Responsive Image Breakpoints Generator дозволяє значно спростити завдання веб-розробників з підготовки зображень для адаптивного веб-дизайну. При цьому слід додатково зазначити, що цей сервіс дає можливість не тільки статичної вставки згенерованих зображень, але також і динамічної генерації через Cloudinary's API, наприклад, для тих випадків, коли потрібна обробка зображень, які завантажують користувачі сайту.

Теги:
адаптивний веб-дизайн, адаптивні зображення, генерація адаптивних зображень, responsive image generator breakpoints