Вибір рішення для адаптивних зображень

17

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

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

Основи

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

img {
max-width: 100%;
}

У більшості випадків це крихітне правило стилів створює потрібний результат! Коли воно стоїть на місці, то якщо контейнер навколо зображення стає вже його ширини, зображення масштабується так, щоб збігтися з шириною свого контейнера. Установка max-width на 100% гарантує, що зображення не стане більше свого справжнього розміру, що значно знизило б його якість. Якщо ви загрузли в спробі забезпечити підтримку для IE 6 або 7, вам знадобиться додати правило стилю width: 100%, що призначається тільки для цих браузерів, тому що вони не розуміють max-width.

Зображення у високій роздільній здатності «Retina» можуть ускладнити цю просту реалізацію. Скажімо, вам потрібно, щоб логотип розміром 150 × 150px відображався в подвійній піксельної концентрації по відношенню до його звичайної, а зображення досить маленьке, так що отримання двох окремих варіантів не стане проблемою. Отже, ви створюєте версію логотипу 300 × 300 px, включаєте її — і тепер вона величезна! Вашим першим спонуканням, можливо, стане спробувати в CSS щось на зразок цього:

img.sitelogo {
max-width: 150px;
}

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

Щоб обмежити максимальну ширину адаптивного зображення, вам довелося б обмежити максимальну ширину контейнера з зображенням, а не самого зображення! Скажімо, ви обернули зображення-логотип у модуль з класом branding. Ось стиль, який видасть правильний результат:

.branding {
max-width: 150px;
}

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

Не так швидко! Нам ще потрібно подолати дві головні труднощі.

Проблема продуктивності

При вищеописаному вирішенні адаптивних зображень всім пристроям «годують» одні і ті ж зображення. Воно непогано справляється з маленькими іконками і логотипами, але проблема швидко ускладнюється по мірі збільшення і обважнення зображень. Зображення Retina її ще більше загострюють — вам не потрібно посилати великі зображення Retina на пристрій, здатну відобразити його подробиці!

Подумайте про це. Потрібно насправді посилати зображення в 990 × 300 px і 100 KB, призначене для користувачів десктопів, на мобільний телефон? Звичайно, відвідувач з мобільного пристрою може сидіти на Wi-Fi-з’єднанні свого місцевого кафетерію — однак може виявитися в дорозі при нестійкому бездротовому з’єднанні і намагатися відшукати на вашому вебсайті важливу інформацію. Кожен мобільний користувач, що здається при занадто довгої завантаженні сторінки – це потенційно втрачений клієнт!

У природі сьогодні можна відшукати безліч мобільних вебсайтів, які такі ж великі, або навіть більше своїх десктопових побратимів. Гай Поджарный (Guy Podjarny) з рік тому провів кілька тестів, і не помітив значного поліпшення: у 2011р. 86% вебсайтів були того ж розміру або навіть більше, а в 2012р. ця кількість зменшилася до 72%, але збільшився загальний розмір сайтів. Дейв Руперт (Dave Rupert) теж відзначив цю проблему у своїй статті Більше пікселів – більше проблем (Mo’ Pixels Mo’ Problems).

НАСТУПНЕ УСКЛАДНЕННЯ: БРАУЗЕРНА ПРЕДЗАГРУЗКА

Вперше почавши боротьбу з проблемами продуктивності адаптивних вебсайтів, я спочатку планував отримувати всі варіанти зображень на сторінку, але встановити кілька класів CSS з медиапросами, які при невеликій ширині приховували б великі зображення і показували маленькі, а при ширині настільного комп’ютера надходили б навпаки. Це здається логічним: не зобов’язаний браузер скачувати тільки видимі зображення?

Проблема в тому, що для нас браузери занадто швидкі! Для забезпечення найменшого можливого часу завантаження браузери попередньо скачують всі зображення, які можуть визначити в вихідному коді ще до початку обробки CSS або JavaScript’а. Так що насправді такий підхід поставить мобільних відвідувачів у невигідне становище ще сильніше, змушуючи їх скачувати всі варіанти зображень!

З-за попереднього скачування потрібно або прикладне back-end рішення (щоб попередити предзагрузку), або спеціальна розмітка і JavaScript.

ВИЗНАЧЕННЯ ПРОПУСКНОЇ ЗДАТНОСТІ

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

W3C працює над технологією Network Information API, яка в майбутньому може дуже стати в нагоді, але в даний момент підтримується тільки малою кількістю пристроїв (і, на жаль, невеликих). Зараз вона виконується в кількох рішеннях для адаптивних зображень, але її широкого застосування не можна чекати до появи нормальної підтримки. Виміряти мережа складно і, як стверджує Йов Вайсс (Yoav Weiss) у своїй статті на сайті Smashing Magazine, надійні «медиазапросы до пропускної спроможності», схоже, в найближчому майбутньому не зможуть бути запроваджені належним чином.

Foresight.js від Адама Бредлі (Adam Bradley) користується JavaScript’ом для тестування того, скільки часу потрібно браузеру для завантаження зображення в 50K, потім зберігає цю інформацію та застосовує її для прийняття рішень про пропускної здатності. У нього є кілька дрібних недоліків: на вашу сторінку додається скачування 50K зображення, і завантаження інших зображень може блокуватися до моменту закінчення завантаження тестового. Багато рішень адаптивних зображень, які застосовують у даний момент визначення пропускної здатності, користуються варіацією або адаптацією Foresight.js.

Проблема «художнього керівництва»

Скажімо, на домашній сторінці вашого сайту є відмінне широке зображення. На ньому зображена пасторальна сцена з полями і лісом, блакитним небом і пухнастими хмарами, і щасливим сімейством на травичці.
Тепер отмасштабируйте її для мобільного пристрою до ширини в 300 px. При такому розмірі сім’я на відпочинку виглядає, як мурахи на пікніку!

Вибір рішення для адаптивних зображень

При масштабуванні великого зображення губляться подробиці.

Тут і лежить проблема так званого «художнього керівництва». Деякі зображення просто неможливо добре масштабувати; втрачаються дрібні деталі і знижується яскраве вплив. У випадку з нашим зображенням воно вийшло б набагато краще візуально, якщо б мобільна версія фотографії була наближена, обрізана, а щаслива сім’я опинилася б у фокусі. Для цієї проблеми нам знадобиться таке рішення адаптивного зображення, яке дасть можливість визначити різні версії зображення для різних ситуацій, або підлаштовувати зображення «на ходу».

Вибір рішення для адаптивних зображень

Іноді при маленькій ширині екрану бажана обрізка або наближення зображення.

Вибір свого рішення

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

Вибір може виявитися надто складним, тому що в гру вступає так багато факторів. В даний момент не існує ідеального рішення в будь-якій ситуації; кожне з них було створено для вирішення певного набору проблем. Щоб вибрати, вам доведеться зважити їх у світлі конкретних запитів вашого проекту. Кріс Койер (Chris Coyier) виконав величезну роботу, резюмуючи фактори прийняття рішення (включаючи таблицю для їх відстеження, хоча деякі з новітніх методів не згадані). Ось деякі з факторів, які потрібно обдумати:

Доведеться вам вирішувати проблему художнього керівництва (тобто різних співвідношень зображення, обрізки і розмірів для різної ширини)?

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

Всі зображення є в наявності при завантаженні сторінки, або деякі динамічно завантажуються через JavaScript?

Чи ви хочете перевіряти пропускну здатність користувача, щоб визначити, чи достатньо швидке у нього з’єднання для завантаження зображень у високому дозволі?

Чи потрібно для обраного рішення недоступна вам платформа (така як jQuery або PHP)?

Застосовується для вас стороннє рішення, чи воно вам потрібно на внутрішньому хостингу?

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

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

Випробувані і надійні адаптивні рішення

PICTUREFILL

Мережа насправді всесвітня, і нам доводиться протистояти того факту, що не у всіх є доступ до сполук по оптоволоконному кабелю і 4G-мереж. Скотт Джел (Scott Jehl) особисто зіткнувся з цим цифровим нерівністю під час подорожі і роботи в Південно-Східній Азії, і він – затятий прихильник mobile-first і адаптивних вебсайтів, які не обтяжують мобільних користувачів. Його скрипт Picturefill – це полифил для запропонованого елемента — коду JavaScript, імітує API зображення – дає нам можливість вже сьогодні застосовувати його у своїх вебсайтах. Майбутнє настало, дитинко!

Вибір рішення для адаптивних зображень

Picturefill’не потрібно jQuery, але, природно, йому потрібно, щоб куди-небудь на сторінку було включено скрипт picturefill.js. Picturefill’у також потрібна спеціальна розмітка, з div ами для подання варіантів зображення, що розрізняються атрибутами data-media, які діють як медиазапросы в CSS. Також можна за вибором внести зображення умовні коментарі для тих браузерів, які підтримують медиазапросов (це про IE 8), і альтернативний варіант в тег noscript для тих браузерів, де вимкнено JavaScript (це про BlackBerry). Ось приклад типових налаштувань Picturefill:





Вибір рішення для адаптивних зображень

Ось і все, що потрібно для відображення адаптивних зображень під час завантаження сторінки з допомогою Picturefill. Внесіть скрипт налаштуйте розмітку і все легко запрацює. Також можна викликати Picturefill програмним шляхом, якщо потрібно «на ходу» додавати зображення на сторінку.

Picturefill’потрібно велика кількість користувача розмітки, тому він може виявитися не найкращим вибором для тих, кому ніяк не можна змінювати вихідний код web-сайту. Крім того, він не робить визначення пропускної здатності. Якщо вона дуже важлива для вашого проекту, то розгляньте наступне рішення.

HISRC

HiSRC від Марка Грабански (Marc Grabanski) і Крістофера Шмітта (Christopher Schmitt) – це плагін jQuery, який дозволяє створювати зображення в низькому, середньому і високому дозволі, а скрипт показує найбільш вдалий з них на базі готовності до Retina і швидкості мережевого підключення.

Вибір рішення для адаптивних зображень

Щоб встановити його, спочатку переконайтеся, що десь на сторінку додано jQuery і скрипт HiSRC.

В коді HTML спочатку додайте на сторінку звичайний тег зображення і встановіть исходник на версію зображення з низьким дозволом (або найменше). Додайте зображення або його упаковщику клас (зразок .hisrc), щоб визначити, які саме зображення повинен обробляти HiSRC. Потім додайте спеціальну розмітку до тегу зображення: атрибути data-1x і data-2x для версій з середнім і високим дозволом відповідно. Наприклад:

Вибір рішення для адаптивних зображень

Потім після завантаження DOM просто викличте функцію на використовуваний вами клас зображення, як тут:

$(document).ready(function(){
$(«.hisrc»).hisrc();
});

На ділі браузер спочатку завантажить джерело зображення — тобто мобільну версію зображення. Потім скрипт перевірить, чи використовує користувач мобільний пропускну смугу (таку, як 3G). Якщо це так, то він залишить зображення mobile-first. Якщо з’єднання швидкісний браузер підтримує зображення Retina, буде доставлена версія @2x. Якщо швидкісне з’єднання, але Retina не підтримується, то буде доставлена версія @1x.

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

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

Що стосується слабких сторін, то HiSRC потрібно jQuery, тому він не принесе користі, якщо ви не користуєтеся це бібліотекою. Йому також потрібна спеціальна розмітка HTML, так що він може виявитися не найкращим вибором, якщо у вас великий вебсайт з безліччю успадкованих зображень або CMS, де не можна змінити випуск тега зображення. Якщо це ваша ситуація, то читайте далі!

АДАПТИВНІ ЗОБРАЖЕННЯ

На відміну від двох перших скриптів, Adaptive Images Метта Уїлкокса (Matt Wilcox) – це по більшій частині рішення на стороні сервера. Йому потрібно трохи JavaScript’а, але ця робота виконується за допомогою веб-сервера Apache 2, PHP 5.x і бібліотеки GD.

Для його установки на ваш веб-сервер знадобиться переробити або додати файл .htaccess, завантажити декілька файлів PHP в кореневу директорію вашого вебсайту, додати трохи JavaScript’а на сторінки (який додасть кукі-файл для запису дозволу екрану користувача) і сконфігурувати кілька змінних контрольних точок у файлах PHP, відповідних медиазапросам вашого вебсайту.

Вибір рішення для адаптивних зображень

Інструкції з інсталяції дуже багатослівні — трохи довгуваті для цієї статті. Для отримання інформації відвідайте офіційний вебсайт і натисніть вгорі посилання «Details».

Найкраще властивість Adaptive Images в тому, що йому не потрібно користувача розмітки зображень. Якщо вам вдалося його правильно встановити та сконфігурувати, то це все! Скрипт PHP перехопить будь-який запит зображення, на ходу змінить його розмір так, як потрібно для окремих контрольних точок і автоматично встановить на ваші сторінки.

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

У нього є кілька обмежень:

З-за того, що йому потрібне поєднання Apache і PHP, Adaptive Images може не підійти для платформи вашого вебсайту або бути недоступним з сервера вашого веб-хоста.

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

Він не визначає пропускну здатність.

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

Ви, можливо, помітили, що всім рішень так чи інакше потрібно JavaScript, і часто деяка деталізована конфігурація. Якщо ви шукаєте таке, якому не потрібен JavaScript, і яке можна порівняно легко застосувати, то подумайте про наступне.

SENCHA.IO SRC

Відомий до цього як TinySrc, Sencha.io Src – це стороннє рішення, що діє як посередник, тому вам не потрібно нічого конфігурувати на сервері. Просто направте своє зображення на сервери Sencha (визначивши або не визначивши якісь опції), і Sencha обробить його і відправить назад потрібну версію необхідних розмірів.

Вибір рішення для адаптивних зображень

Скажімо, у вас є велике зображення:

Вибір рішення для адаптивних зображень

У самому спрощеному варіанті можна дописати префікс атрибуту src з http://src.sencha.io/, як тут:

Вибір рішення для адаптивних зображень

Sencha.io за замовчуванням змінить розмір зображення так, щоб той відповідав ширині екрану пристрою, застосувавши для детекції рядок агента користувача. На телефони буде відправлено зображення шириною 320 px, на «таблетки» — шириною 768 px і так далі.

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

Sencha.io – безкоштовний сервіс для індивідуальних користувачів і може виявитися дуже зручним вирішенням проблеми адаптивних зображень. Однак ви додаєте залежність від третьої сторони, при цьому можливі простої і неконтрольовані вами проблеми. Ретельно зважте ці ризики.

Вирішення проблеми адаптивних зображень, які варто розглянути

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

CAPTURING/MOBIFY.JS 2.0

Захоплення (Capturing) – нова можливість знаходиться в розробці Mobify.js 2.0, яка пропонує доступ (або «захоплення») до початкової розмітки HTML до початку її аналізу або відображення в браузері. Доступ до вихідного коду на цьому етапі дає можливість змінити атрибут зображення src до того, як браузер його скачає. Можна навіть зробити альтернативний варіант до одного з інших рішень, такого як Picturefill, на випадок невдачі.

Вибір рішення для адаптивних зображень

Так як ця техніка безпосередньо обходить «рідну» попередню завантаження браузера, це трохи спірний момент в колах веб-продуктивності. Будучи неправильно спожитої, вона може створити справжні проблеми з продуктивністю сайту замість їх усунення!

Ще одне, що утримує мене від прийняття цього рішення з розпростертими обіймами – його кросбраузерна підтримка. Capturing не буде працювати у всіх версіях IE нижче 10, тому користувачі IE 8 і 9 залишаться ні з чим. Однак, я буду спостерігати — в майбутньому, коли IE 8 і 9 нарешті кануть в Лету, це рішення стане більш життєздатним!

Якщо ви зацікавлені в отриманні додаткової інформації про Capturing, команда Mozilla вдається в подробиці в пості свого блогу Capturing: поліпшення продуктивності адаптивного веба (Capturing: Improving Performance of the Adaptive Web).

RESRC.IT

ReSRC.it – ще одне стороннє рішення (нещодавно вийшло з стадії beta), яка доставляє адаптивні зображення з хмари. Воно, здається, дуже схоже по здійсненню з Sencha.io Src, але додає фільтри зображень і визначення пропускної здатності, і не покладається на детекцію агента користувача або куки.

Вибір рішення для адаптивних зображень

Щоб почати роботу, по-перше, потрібно створити пробний запис на ReSrc.it. По-друге, вам знадобиться вставити на свою сторінку їх файл Javascript (це простий код JS; а також для покращення продуктивності вони пропонують метод асинхронної вставки):

Потім, припустимо, у вас є таке зображення:

Вибір рішення для адаптивних зображень

Ви додасте префікс до ДО у макету зображення із зазначенням шляху до серверів ReSRC.it і додасте зображенню клас CSS «resrc». Зараз у них два сервера, один для платних аккаунтів, другий для пробних — у своєму прикладі ми застосуємо пробний:

Вибір рішення для адаптивних зображень

ReSRC.it дозволяє додавати параметри до запитаному requested ДО у для проведення над зображенням таких операцій, як обертання, обрізка і переворот. Так з’являється гнучкість і потенційна спрямованість на проблему художнього керівництва. Параметри обробляються по порядку зліва направо і можуть бути пов’язані разом.

Ось приклад зображення, перевернутого по горизонталі, розмір змінений до ширини в 300px, в результаті чого зображення вийшло оптимізованим до 80%-якісного JPEG:

Вибір рішення для адаптивних зображень

ReSRC.it тільки вийшов із стадії beta, так що якщо у тих, хто ним користується, є підказки або поради (за чи проти), ми з задоволенням дізналися б про нього більше в коментарях.

Тестуйте, тестуйте, тестуйте!

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

YSLOW

Створений Yahoo, YSlow – інструмент клієнтської сторони, аналізує ваш вебсайт по 23 контролепригодным правилами, визначеними Yahoo як здатним несприятливо впливати на продуктивність веб-сторінки. За кожне правило YSlow присуджує вашого вебсайту ступінь, пояснюючи кожне з них і пропонуючи варіанти поліпшення продуктивності вебсайту. YSlow доступний для Firefox, Chrome, Safari і Opera (а також для деяких інших коштів, зразок командного рядка).

WEBPAGETEST

Онлайн-інструмент WebPageTest – проект з відкритим вихідним кодом, підтримуваний Google. Ви вводите URL свого вебсайту, виконуєте тестування швидкості з обраного місцезнаходження, і уточнюєте, який браузер використовувати. Розширені установки дають можливість виконувати багатоступінчасті транзакції, підбирати швидкість мережі (кабельної, DSL, FiOS і так далі), відключати JavaScript, блокувати рекламу і робити інші запити, і дещо крім цього. Результати видаються у вигляді таблиць, діаграм, скріншотів, огляду продуктивності і безлічі відмінних даних для аналізування!

В блозі Yottaa є стаття, докладно описує застосування WebPageTest для тестування їх вебсайту як із завантаженням адаптивних зображень, так і без неї — прочитайте!

Висновок

Якщо ви читаєте Smashing Magazine, то, швидше за все, вже займаєтеся створенням для вашої аудиторії найкращого з можливих враження від сайту. Тому наступного разу при створенні прекрасного, придатного до вживання сайту для своїх мобільних відвідувачів, випробуйте одне з рішень проблеми адаптивних зображень і просуньте свій вебсайт ще на милю вперед. Ваші мобільні користувачі будуть вам вдячні!