Використання тега HTML5 picture для адаптивних зображень

14

Від автора: Зображення давно відомі як найбільш трудомісткі аспекти адаптивного веб-дизайну. Сьогодні, ми побачимо як можна використовувати елемент picture в якості вирішення проблеми адаптивних зображень прямо зараз.

Використання тега HTML5 picture для адаптивних зображень

Переклад виконала: Валерія Заруцька

Мене звуть Валерія, я живу в Києві. Перекладач в минулому, зараз я фронт-енд розробник. Непогано володію HTML5 і CSS3, Twitter bootstrap, адаптивної версткою, працюю з jQuery, активно вивчаю чистий JavaScript, маю уявлення про MVC фреймворках, зокрема Ruby on Rails.

По-перше, сама проблема

Часи дизайну сайтів з фіксованою шириною і повним відповідністю макету давно позаду. В нинішній час широкоформатних моніторів, інтернет-телебачення, планшетів і смартфонів різних розмірів наш дизайн повинен брати до уваги будь дозволу – від 320 пікселів і до 7680.

Всі ці дозволи пред’являють вимоги до зображень – вони повинні розтягуватися і скорочуватися, щоб відповідати всьому різноманітності вимог. Це може виявитися проблемою, т. к. за винятком векторної графіки, більшість зображень має фіксовану ширину в пікселях, яка не змінюється.

Так що ж робити?

Нинішнє, найпоширеніше рішення

Як правило, ви знайдете наступне в коді CSS практично будь-якого адаптивного сайту:

img { max-width: 100%; height: auto;}

Цей код використовує налаштування max-width: 100%; для того, щоб переконатися в тому, що зображення не буде видаватися за межі батьківського контейнера. Якщо батьківський контейнер стане менше ширини зображення, зображення буде зменшуватися разом з ним. Налаштування height: auto; присутня для того, щоб при зменшенні зберігалися пропорції зображення.

Використання тега HTML5 picture для адаптивних зображень

Одне «гумове» зображення для всіх пристроїв

Це вирішує проблему в одному ключі, дозволяючи нам показувати одне зображення за різних обставин. Але, воно не дозволяє нам показувати різні зображення для різних обставин.

Нове рішення: тег picture

picture — це новий елемент, який повинен стати частиною HTML5. Він значно прискорить процес розміщення адаптивних зображень аналогічно принципам роботи елементів audio і video. Він дозволить задавати декілька елементів source, кожен з яких буде вказувати на різні файли зображень разом з умовами, при яких вони повинні завантажуватися.

Він дозволить вам завантажувати зображення в залежності від:

Результатів медіа-запиту, наприклад, висота вікна перегляду, ширина, орієнтація

Щільність пікселів

Що означає, що ви можете:

Завантажувати зображення відповідних розмірів, з максимальною віддачею використовуючи наявну ширину каналу.

Завантажувати зображення з різною обрізанням і пропорціями в відповідності з зміною розмітки для екранів різної ширини.

Завантажувати зображення з високою роздільною здатністю для екранів з високою щільністю пікселів.

Використання тега HTML5 picture для адаптивних зображень

Різні зображення завантажуються в залежності від обставин

Як працює елемент picture?

Основні кроки для роботи з елементом picture це:

Створення відкриваючих і закриваючих тегів picture.

Усередині цих тегів створіть елемент source для кожного запиту, який ви хочете зробити.

Додайте атрибут media вашим запитом для таких речей як висота вікна перегляду, ширина, орієнтація і т. д.

Додайте атрибут srcset з відповідним ім’ям файлу зображення для завантаження.

Додайте додаткові імена файлів вашого srcset атрибуту, якщо ви хочете підтримувати екрани з високою щільністю пікселів, наприклад Ретина.

Додайте елемент img в якості запасного варіанту.

Ось простий приклад, який перевіряє, якщо вікно перегляду менше 768 пікселів, і в разі відповідності завантажує зображення меншого розміру:

My default image

Ви помітите, що синтаксис, використаний в атрибуті media точно такий же, як і той, до якого ви звикли, складаючи медіа запити на CSS. Ви можете використовувати такі ж перевірки, отже, ви можете створити запити для max-width, min-width, max-height, min-height, orientationи так далі.

Ви можете використовувати ці перевірки для того, щоб завантажувати альбомну або книжкову версію зображення, залежно від орієнтації пристрою, і ви також можете додати запити розмірів. Наприклад:

My default image

Код вище завантажує зменшену, обрізану для альбомної орієнтації версію зображення для пристрою з відповідною орієнтацією. Він завантажує збільшену версію того ж зображення для пристроїв з великим екраном.

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

Якщо ви хочете надавати версії зображень з різною роздільною здатністю для екранів з більш високу щільність, ви можете це зробити за допомогою додавання додаткових імен файлів атрибуту srcset. Наприклад, давайте подивимося на перший приклад коду вище з додаванням підтримки дозволу екрану «Ретина 2х»:

My default image

Медіа запит обробляється в першу чергу, таким чином, ви можете контролювати розміри зображення на екрані. Потім, перевіряється щільність пікселів екрану і якщо висока щільність підтримується і дозволена налаштуваннями користувача, буде завантажена версія зображення з більш високою роздільною здатністю.

Використання picture сьогоднішній день

Зараз рідна імплементація picture знаходиться в розробці для браузерів Chrome, Firefox і Opera.В майбутньому, ми швидше за все побачимо більш широку підтримку і в інших браузерах. Але, на сьогоднішній день підтримка тільки очікується.

Поки що, вам не потрібно чекати, якщо ви хочете почати використовувати picture прямо зараз. Вам всього лише потрібно використовувати Picturefill 2.0 — полизаполнение надається розробниками з Filament Group.

Використання тега HTML5 picture для адаптивних зображень

Після того, як ви скачаєте файл picturefill.js у свій проект, він може застосовуватися лише завантаженням його в секцію head вашого сайту:

Також є можливість завантажувати скрипт асинхронно для більшої ефективності, про що ви можете прочитати в документації Picturefill. Разом з завантаженням цього скрипта, елемент picture буде працювати так, як я описав, з невеликими обмеженнями.

Обмеження Picturefill

IE9

Picturefill відмінно працює в інших версіях IE, проте IE9 не розпізнає елементи source, які загорнуті в теги picture. Щоб обійти це, умовно оберніть елементи source в теги video, що зробить їх видимими для IE9, наприклад:

My default image

Android 2.3

Також як IE9, Android 2.3 не бачить елементи source всередині тегів picture. Однак, він розпізнає атрибут srcset, коли той присвоюється звичайним тегу img. Переконайтеся, що ви включаєте запасний елемент img з дефолтними ім’ям файлу в атрибуті srcset для Android 2.3 або будь-якого іншого браузера зі схожою проблемою.

Потрібно JavaScript і рідна підтримка медіа запитів

Так як це рішення реалізовано на JavaScript, відповідно, воно потребує JavaScript для коректної роботи в браузері. Picturefill 2.0 не надає рішень для «no-js», тому що в іншому випадку, безліч зображень стало б з’являтися на сторінках, коли рідна підтримка буде реалізована. Однак, ви можете використовувати Picturefill 1.2 якщо можливість «no-js» важлива для вас.

Наступним вимогою Picturefill є рідна підтримка медіа запитів, для того щоб запити в атрибуті media працювали. Всі сучасні браузери підтримують медіа запити, в той час як IE8 і нижче є єдиним не підтримує браузером з невеликою залишкової базою користувачів.

Можливі додаткові HTTP запити

Для браузерів, що мають рідну підтримку srcset, але не підтримують picture, можливо задане ім’я файлу в запасному елементі img може бути запрошена до того, як більш підходяще зображення буде визначено в елементі img. Ця проблема тимчасова і вона вирішиться тоді, коли рідна підтримка picture буде реалізована.