Проста адаптація за допомогою фонових зображень CSS

19

Від автора: Ця стаття відображає лише одне з багатьох рішень проблеми адаптивних зображень. До вибору конкретного рішення ми пропонуємо вам розглянути різні підходи, включаючи ці два: Як уникнути дублювання завантаження адаптивних зображень (How To Avoid Duplicate Download In Responsive Images ) і Вибір рішення для адаптивних зображень (Choosing A Responsive Image Solution).

При розмовах про таких нових стандартах HTML5, як атрибут srcset і елемент picture, а також технології серверної сторони, таких як Адаптивний веб-дизайн +компоненти серверної сторони (Responsive Web Design + Server Side Components ) (RESS), можна пробачити, якщо ви вирішите, що прості статичні вебсайти зараз не в змозі підтримувати адаптивні зображення. Однак такий висновок може виявитися передчасним. Фактично, існує легкий прямий спосіб доставки адаптивних зображень, підтримуваних усіма сучасними веб-браузерами: фонові зображення CSS.

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

У даній статті ми розглянемо фоновий підхід CSS в кілька етапів:

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

Потім розглянемо, як медиазапросы CSS допомагають ідентифікувати важливі характеристики пристроїв наших користувачів.

Досліджуємо ключове властивість CSS background-image, яке дає можливість відповідати цим характеристикам.

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

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

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

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

Потреба в адаптивних зображеннях

Адаптивні зображення – важлива складова адаптивного веб-дизайну (RWD), дизайнерської стратегії, розробленої Ітаном Маркоттом (Ethan Marcotte) для того, щоб впоратися з надзвичайною популярністю мобільних пристроїв для перегляду Мережі. Ітан визнав, що попередня загальноприйнята практика — розробка окремих вебсайтів для різних видів пристроїв — просто не змогла впоратися з вражаючим розмаїттям пристроїв, що застосовуються користувачами для отримання доступу до створюваних нами вебсайтів.

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

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

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

Проста адаптація за допомогою фонових зображень CSS

Вебсайт чудово виглядає на комп’ютерах з надвисоким дозволом екранів, тому що включає версію основного зображення у високому дозволі. Доставка файлу зображення, проте, коштує недешево; з розміру 1940 × 1229 px після стиснення виходить зображення в 446 KB.

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

Проста адаптація за допомогою фонових зображень CSS

На iphone’ов е зображення 290 × 183 пікселів розміром 18 KB виглядає ідентично зображення розміром 452 KB 1940 × 1229 px на MacBook Pro.

Що це означає для користувача, що переглядає сайт, скажімо, зі смартфона попереднього покоління? Для нього зображення 290 × 183 пікселів розміром у 18 KB виглядає точно так само, як збільшена версія. При відсутності адаптивного підходу до зображень вебсайт змусить користувача скачати 429 KB додаткових, абсолютно зайвих даних. Таке перевищення не просто непрактично; воно робить істотний вплив на час завантаження вебсайту. Можливо, користувач смартфона заходить на сайт через звичайний 3G-з’єднання на швидкості 2 Мбіт/сек. Неподання адаптивного зображення збільшує час завантаження з 1,3 секунд до цілих 3 секунд, більш ніж удвічі!

Проста адаптація за допомогою фонових зображень CSS

Повнорозмірного зображення для завантаження потрібно 3,0 секунди через мережу 3G в порівнянні з 1,3 секунди адаптивного зображення.

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

Визначення оточення користувача

Якщо наші сайти будуть відповідати на пристрій користувача, то нам знадобиться спосіб його ідентифікації. Зараз CSS пропонує найефективніший метод розрізнення пристроїв. CSS дає нам відповіді на два критичних питання: який розмір дисплея користувача? І чи підтримує він зображення в стилі Retina?

Інструментом CSS, дає нам таку інформацію, є медиазапрос. Медиазапросы визначають набір властивостей стилів CSS, застосовних тільки до пристроїв з визначеними характеристиками. Спочатку медиазапросы були обмежені медиатипами. Специфікація CSS визначає їх велику кількість, включаючи, наприклад, braille (для Брайлевских пристроїв з тактильним відгуком), speech (для синтезаторів мови), tty (тільки для пристроїв з моноширинним шрифтом, таких як телетайпи) і tv (для пристроїв телевізійного типу з низьким дозволом і без можливості прокрутки). Зараз два єдиних медиатипа, підтримуваних всіма браузерами – це print (для надрукованого матеріалу, розбитого на сторінки) і screen (для екранів комп’ютерів).

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

Ось як медиазапросы можуть допомогти у вирішенні дилеми попереднього розділу. У взятого в якості прикладу 15-дюймового MacBook Pro ширина екрана дорівнює 1440 пікселів (тут ми не беремо до уваги наявність опції дисплея Retina). Для визначення стилів, застосовних до екранів такого розміру (і більше), можна написати собі таку таблицю стилів:

@media only screen and (min-width: 1440px) {
/* стилі для екранів розміру MacBook Pro і більше */
}

Будь-які визначені у цьому блоці стилі будуть застосовуватися, лише коли користувач заходить на веб-сторінку за допомогою пристрою з розміром екрану 1440 пікселів. Проте тут криється пастка. Розмір екрана не відноситься до апаратного забезпечення пристрою; скоріше, він відноситься до області перегляду веб-браузера. Область перегляду – це розмір вікна браузера за вирахуванням всякого браузерного покриття, такого як панелі інструментів.

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

@media only screen and (min-width: 1200 px) {
/* стилі для широких екранів */
}

Медиазапрос складається з двох частин. Перша, only screen, означає, що стилі не потрібно застосовувати до роздрукованими копіями сторінки або іншим нестандартних пристроїв. (Ключове слово only насправді не впливає на медиазапрос; воно знаходиться там виключно для по-справжньому старих браузерів, які не підтримують властивості медиазапросов. Так як ці браузери не розуміють синтаксису only, то вони просто повністю ігнорують весь блок стилів.) Друга частина запиту, min-width: 1200 px, визначає мінімальну ширину екрану, при якій будуть застосовуватися ці стилі. З’єднання цих частин – and – означає, що для застосування стилів вони обидві повинні повертати true.

Для призначення стилів книжкової орієнтації смартфонів можна застосовувати таку методику.

@media only screen and (max-width: 320px) {
/* стилі для вузьких екранів */
}

В даному випадку ми можемо продовжити і застосувати в запиті справжній розмір екрану пристрою. Веб-браузери в смартфонах завжди повноекранної ширини.

Специфікації властивостей min-width і max-width полегшують визначення ширини пристрою користувача. На жаль, не так вже легко ідентифікувати дисплей Retina. Різні браузери користуються для цього різними синтаксисами, так що доводиться вдаватися до вендорным префиксам. Ще сильніше погіршує стан речей дефект в синтаксисі багатьох версій Firefox, із-за якого для браузерів Mozilla доводиться застосовувати синтаксис і fixed, і broken. В теперішній час рекомендований запит для дисплеїв Retina виглядає наступним чином.

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min—moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
/* стилі для типу дисплеїв Retina */
}

З часом всі браузери почнуть підтримувати стандартну позначення dots per pixel (точок на піксель) (dppx) і можна буде опустити вендорные префікси в таблицях стилів.

Властивість фонового зображення CSS

Раз CSS здатний надійно визначати контекст користувача, ви можете вирішити, що підтримувати адаптивні зображення легко. Одним з здаються цілком логічними підходів могла б стати встановлення display: none для тих зображень, які не потрібно завантажувати. Ось проба строго на основі розміру екрана. (Для стислості ми пропускаємо розгляд Retina.)

img.smallscreen { display: none; }
@media only screen and (max-width: 320px) {
img {
display: none;
}
img.smallscreen {
display: inline;
}
}
Проста адаптація за допомогою фонових зображень CSS

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

Створення адаптивних зображень

Маючи уявлення про застосування адаптивних зображень, наступний етап – саме створення варіантів зображення. Початкове зображення повинно бути на самому високому дозволі з можливих, щонайменше таким, що тільки зможе доставити ваш вебсайт. (У випадку з contfont.net початкове зображення одно 3888 × 2592 px). Обрана вами графічна програма повинна бути здатною змінити розміри цього вихідного зображення так, щоб воно вписувалося в контрольні точки вебсайту.

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

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

Спочатку визначте зображення самого маленького дозволу, що зручно доставляти на вебсайт. У випадку з contfont.net найменший практичний розмір вікна перегляду – 320 px, відповідний iphone’ов у без екрану Retina в книжковій орієнтації. (Пристрою з меншими вікнами перегляду існують, і, найімовірніше, будуть існувати в майбутньому — розумні годинник, що завгодно — але вебсайт з цих пристроїв навряд чи буде відвідуватися). На сайті contfont.net вікна перегляду розміром 320 px залишає 290 px на ширину зображення, тому зображення з найнижчим потрібне нам дозволом – 290 × 183 пікселів. Примусьте свою графічну програму змінити початкове зображення до цього розміру.

Далі створіть просту тестову сторінку. Ось яку розмітку я використовую:

Проста адаптація за допомогою фонових зображень CSS

Window size: pixels

window.onresize = function() {
document.getElementById(«size»).innerHTML = window.innerWidth;
};

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

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

Проста адаптація за допомогою фонових зображень CSS

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

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

До цього моменту у вас вже будуть всі контрольні точки і набір відповідних для них зображень. Для дисплеїв Retina створіть додаткові зображення подвійного дозволу. Ось повний список зображень вебсайту contfont.net:

Проста адаптація за допомогою фонових зображень CSS

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

Подолання обмежень

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

ЗРОБИТИ ДОСТУПНИМИ ЗОБРАЖЕННЯ

Стандартний тег img підтримує атрибут alt, який забезпечує альтернативне текстовий опис зображення. Воно важливо для доступності вебсайту, так як при описі зображення користувачі з скринридерами покладаються на вміст alt. У фонових зображень CSS немає тега img і, таким чином атрибута alt, але все ж можна зробити їх доступними користувачам з ослабленими зоровими можливостями. Для цього додаємо в свою розмітку додаткові атрибути.

Перший додатковий атрибут, role, дає скринридеру можливість знати, що div грає роль тега img, навіть якщо той не представлений в розмітці. Другий атрибут, aria-label, служить тієї ж мети в якості атрибута alt у img. З допомогою цих двох додатків скринридеры можуть оголосити користувачам, що даний елемент є зображенням, і ті зможуть прочитати забезпечене вами альтернативне текстовий опис.

МАСШТАБУВАННЯ ЗОБРАЖЕНЬ В БРАУЗЕРІ

Наш спрощений підхід не підтримує ще одна корисна властивість тега img: автоматична зміна розміру і масштабування браузером. З допомогою стандартного img можна просто встановити ширину як процентне співвідношення містить елемента і браузер автоматично підраховує ширину і пропорційно масштабує висоту. Наприклад, розгляньте наведений нижче фрагмент, який показує зображення content-1/images/image.jpg справжні розміри якого дорівнюють 600 × 300 px.

Проста адаптація за допомогою фонових зображень CSS

Браузер автоматично підганяє зображення містить div, зменшуючи його ширину з 600 до 400 px. Він також зберігає його формат, одночасно масштабуючи висоту з 300 до 200 px. У результаті виходить неспотворене зображення, ідеально вписане в сторінку.

Завдяки підходу, вперше описаного Грейді Кунлайном (Grady Kuhnline), того ж самого ефекту можна домогтися за допомогою фонового зображення CSS для сучасних браузерів. (Попереджаю: описаний у цьому підрозділі підхід не працює в Internet Explorer 8 і нижче, так як ці браузери не підтримують необхідних властивостей CSS.)

Саме легке завдання – масштабування ширини. Як у випадку з тегом img, можна встановити свій елемент всередині div фіксованої ширини; потрібно недвозначно позначити, що фон повинен заповнити цей div. Розмітка HTML відрізняється не сильно.

Потрібно скомбінувати кілька властивостей CSS для встановлення ширини; давайте розберемо їх по одному:

Встановіть властивість display елемента #image inline-block. Без цієї властивості CSS буде відображати елемент span як inline, і ми не зможемо призначити йому ширину або (за хвилину) висоту.

Встановіть ширину width цього елемента на 100% з тим, щоб наше зображення заповнило містить div.

Встановіть властивості font-size і line-height на 0 для того, щоб ніяке вміст всередині span не відбивалося на його розмірі.

Встановіть властивість vertical-align на middle, щоб відцентрувати по вертикалі елемент зображення містить div.

Властивість background-size на 100% для того, щоб зображення заповнювало елемент image.

Властивість background-position на 50% 50% для вирівнювання фонового зображення всередині елемента image.

Властивість background-repeat на no-repeat для того, щоб браузер не розбивав зображення на мозаїку по горизонталі або вертикалі.

Одержаний в результаті CSS встановлює стилі елемента зображення (елемент span id елемента «image»).

#image {
display: inline-block;
width: 100%;
font-size: 0;
line-height: 0;
vertical-align: middle;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url(content-1/images/image.jpg);
}

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

Спочатку потрібно додати в розмітку додатковий елемент span. Він розміщений всередині елемента зображення.




Тепер призначаємо цього внутрішнього span кілька властивостей стилів.

Встановіть його властивість display на block з тим, щоб у нього були висота і ширина.

Встановіть його висоту height на 0, так як у нього немає реального вмісту.

Додайте властивість padding-top, визначаючи співвідношення, що дорівнює відношенню висоти до ширини зображення.

Останній крок – ключовий. Хоча span не успадкує від свого контенту висоту, padding-top змушує елемент зайняти простір по вертикалі. Більш того, властивість padding-top приймає значення у відсотках, де відсоток відносний до ширини елемента. Наше зображення 970 × 614 пікселів, тому ми застосовуємо таке процентне значення: (614 ÷ 970) × 100%, або 63,3%. Тепер браузер гарантує, що наше зображення при масштабуванні зберігає свій формат.

#image-inner {
display: block;
height: 0;
padding-top: 63.3%;
}

А тепер всі разом

Щоб подивитися, як поєднуються всі ці складові, ось вам код сайту contfont.net, який ми використовували в якості прикладу. Спочатку розмітка HTML, включає основне зображення вебсайту.




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

.hero #cafe {
width: 100%;
display: inline-block;
vertical-align: middle;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.hero #cafe .inner {
padding-top: 63.35%; /* висота/ширина зображення */
display: block;
height: 0;
}

І, нарешті, набір медиазапросов підбирає відповідний файл зображення на підставі контексту користувача. (Для стислості у наведеному нижче прикладі пропущені вендорные префікси.)

/* екран за замовчуванням, не retina */
.hero #cafe { background-image: url(«../img/candc970.jpg»); }
@media only screen and (max-width: 320px) {
/*Маленький екран, не retina */
.hero #cafe { background-image: url(«../img/candc290.jpg»); }
}
@media
only screen and (min-resolution: 2dppx) and (max-width: 320px) {
/* Маленький екран retina */
.hero #cafe { background-image: url(«../img/[email protected]»); }
}
@media only screen and (min-width: 321px) and (max-width: 538px) {
/* Середній екран, не retina */
.hero #cafe { background-image: url(«../img/candc538.jpg»); }
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 321px) and (max-width: 538px) {
/* Середній екран retina */
.hero #cafe { background-image: url(«../img/[email protected]»); }
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 539px) {
/* Великий екран retina */
.hero #cafe { background-image: url(«../img/[email protected]»); }
}

Потенційні проблеми

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

ВІДДІЛЕННЯ СТИЛІВ І ВМІСТУ

CSS розроблений спеціально для відділення стилів від контенту. У сучасній мережі сторінки HTML надають весь вміст сайту, тоді як таблиці стилів впливають тільки на подання цього вмісту. Таблиці стилів не повинні визначати сам контент. Звичайно, поділ стилів і вмісту вже порушується властивостями CSS content-before і content-after, але вони зазвичай застосовуються для поліпшення презентації (наприклад, шляхом додавання до елементу ікони).
Визначення основних зображень веб-сайту за допомогою CSS – це зовсім інший рівень. Визначаючи основний контент в CSS, а не HTML, ми робимо свої вебсайти більш складними для виявлення несправностей, їх складніше підтримувати, а також створюється бар’єр для тих систем, які намагаються автоматично аналізувати наші сайти.

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

БРАУЗЕРНА ПІДТРИМКА МАСШТАБОВАНИХ ЗОБРАЖЕНЬ

Як вже згадувалося, додані нами поліпшення масштабованих зображень не стануть працювати в Internet explorer’і версій 8 і нижче. Такі стандартизовані підходи, як srcset, можуть бути зворотно сумісні з такими браузерами, але, звичайно, сам srcset зараз недоступний в будь-яких основних браузерах.

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

РЕАЛЬНА ПРОБЛЕМА КОНТЕКСТУ КОРИСТУВАЧА

Можливо, найбільша фундаментальна проблема цього підходу – проблема адаптивних зображень взагалі. Для визначення інтерфейсу контексту ми використовуємо ширину екрану і піксельну щільність, але не ясно, чи відповідає такий підхід . Уявіть собі, наприклад, користувача ноутбука, яких виходить в мережу через Wi-Fi точку доступу смартфона.

Проста адаптація за допомогою фонових зображень CSS

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

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