1. Потреба в чуйних зображеннях
2. Визначення користувацького контексту
3. CSS-cвойства background-image
4. Створення чуйних зображень
5. обходимо обмеження
6. Робимо зображення доступними
7. Масштабування зображень в браузері
8. А тепер все разом
9. Можливі проблеми
10. Поділ стилю і змісту
11. Підтримка масштабування зображень в браузерах
12. Серйозна проблема контексту користувача
13. Подякою

Примітка редактора Frontender Magazine: Статті була написана в 2012 році, коли не було елементу <picture>, про використанні якого можна прочитати, наприклад, в статтях « Чуйні зображення: приклади використання і документовані сніпетів, щоб ви могли почати їх використовувати »І більш ранній« Як уникнути зайвих завантажень для чуйних зображень ». Дана стаття, однак, містить цікаві прийоми, про які варто знати.

Примітка редактора Smashing Magazine: в цій статті описано тільки одне з багатьох близьких до оптимального рішень для створення чуйних зображень. Перед вибором конкретного рішення ми рекомендуємо ознайомитися з різними підходами, в тому числі ось з цими: «Як уникнути зайвих завантажень при використанні чуйних зображень» і «Вибираємо рішення для зображень в чуйну дизайні» .

З огляду на всі розмови про нові стандарти HTML5, таких як атрибут srcset і елемент <picture>, і застосуванні серверних рішень на кшталт Чуйного вебдизайну + Серверних компонентів (RESS), у вас могло скластися враження, що на сьогоднішній день прості статичні сайти не можуть містити чуйні зображення. Однак це враження дещо передчасно. Насправді, є простий і нехитрий спосіб представлення чуйних зображень, підтримуваний всіма сучасними веб-браузерами: фонові зображення в CSS.

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

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

1. Спочатку ми розглянемо завдання і вимоги до чуйним зображень.
2. Потім з'ясуємо як CSS-медіазапроси можуть допомогти нам визначити головні характеристики для користувача пристроїв.
3. Детально розглянемо ключове властивість background-image, яке дозволяє підлаштовувати зображення під ці характеристики.
4. Розглянемо стратегію оптимізації окремих зображень, з яких формується набір зображень, що вирішує проблему чуйності.
5. Вивчимо обмеження цього підходу - в більшості випадків їх можна легко обійти.
6. І, нарешті, визначимо проблемні моменти, для яких немає рішення.

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

Потреба в чуйних зображеннях

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

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

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

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

Компонент Тип Розмір в стислому вигляді Головна сторінка HTML 6 Кб Таблиця стилів CSS 10 Кб Шрифти Веб-шрифт 221 Кб Скрипти JavaScript 21 Кб Допоміжні зображення Зображення 48 Кб Головне зображення Зображення ??

На великих екранах сайт виглядає просто шикарно завдяки великому вирішенню головного зображення. Завантаження цього зображення, проте, обходиться недешево: при дозволі 1940 × 1229 пікселів зображення навіть після стиснення важить 446 Кб.

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

На iPhone зображення з роздільною здатністю 290 × 183 пікселів і розміром 18 Кб виглядає точно так само, як зображення з роздільною здатністю 1940 × тисяча двісті двадцять дев'ять пікселів і розміром 452 Кб виглядає на MacBook Pro. крупніше .

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

При з'єднанні через 3G зображення вихідного розміру вантажиться 3 секунди, чуйне - 1,3 секунди. крупніше .

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

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

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

Цю інформацію ми можемо отримати завдяки CSS- медіазапросам. Медіазапроси дозволяють прописати набір стилів, які будуть застосовуватися тільки для пристроїв з певними характеристиками. Спочатку медіазапроси обмежувалися тільки типом носія. У специфікації CSS описано достатню їх кількість, наприклад, braille (тактильні пристрої на системі Брайля), speech (мовні синтезатори), tty (пристрої, що підтримують тільки моноширинних шрифти, наприклад, телетайпи) і tv (пристрої на кшталт телевізорів з низьким дозволом і без можливості прокрутки). На даний момент більшість браузерів розуміє тільки два типи носіїв: print (друкований матеріал, розбитий на сторінки) і screen (екрани комп'ютерів).

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

Медіазапроси можуть допомогти вирішити дилему, описану трохи вище. Наприклад, у MacBook Pro з діагоналлю 15 дюймів ширина екрану становить 1440 пікселів (поки що не будемо розглядати наявність ретини). У таблиці стилів нашого сайту стиль для екранів таких розмірів можна прописати так:

@media only screen and (min-width: 1440px) {}

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

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

@media only screen and (min-width: 1200px) {}

Цей медіазапрос складається з двох частин. Перша частина, only screen, вказує на те, що стиль не повинен застосовуватися при друку сторінки або на нестандартних пристроях. (Слово only ніяк не впливає на сам медіазапрос: воно використовується для дуже старих браузерів, що не розпізнають параметри пристрою. Так як ці браузери не розуміють синтаксис only, вони просто проігнорують блок зі стилями цілком). У другій частині медіазапроса, min-width: 1200px, вказана мінімальна ширина екрану, при якій повинен застосовуватися стиль. Оператор and, що з'єднує ці частини, вказує на те, що для спрацьовування стилю обидва умови повинні бути вірні.

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

@media only screen and (max-width: 320px) {}

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

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

@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) {}

Коли-небудь все браузери будуть підтримувати стандартну запис dppx (точки на дюйм), і ми зможемо відмовитися від Вендорний префіксів в CSS.

CSS-cвойства background-image

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

<Html lang = "ru"> <head> <meta charset = "utf-8"> <title> </ title> <style> img .smallscreen {display: none; } @ Media only screen and (max-width: 320px) {img {display: none; } Img .smallscreen {display: inline; }} </ Style> </ head> <body> <img src = "largeimage.jpg"> <img class = "smallscreen" src = "smallimage.jpg> </ body> </ html>

Наведений вище код буде відображати потрібне зображення в залежності від розміру екрана, однак display: none не запобігає завантаження прихованих зображень. Браузери на смартфонах будуть завантажувати велике зображення, хоч воно і не буде відображено, так що, на жаль, цей цілком логічний підхід не вирішує головну задачу чуйних зображень.

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

Наші медіазапроси в CSS працюватимуть тільки якщо вони будуть використовуватися суто для властивостей CSS, а не для вмісту HTML. Це може здатися неможливим, але, виявляється, є хитрий спосіб використовувати для зображень тільки CSS: за допомогою властивості background-image. Ось як це робиться:

1. У розмітку HTML не розміщуйте будь-запити на файли зображень. Замість цього використовуйте порожні елементи <div> або <span>.
2. Задайте цим елементами фонові зображення через властивість background-image.
3. Використовуйте медіазапроси, щоб змінювати зображення в залежності від розміру і дозволу екрану.

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

<Html lang = "ru"> <head> <meta charset = "utf-8"> <title> </ title> <style> #image {background-image: url (largeimage.jpg); } @ Media only screen and (max-width: 320px) {#image {background-image: url (smallimage.jpg); }} </ Style> </ head> <body> <div id = "image"> </ div> </ body> </ html>

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

Створення чуйних зображень

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

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

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

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

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

<Html lang = "ru"> <head> <meta charset = "utf-8"> <title> </ title> </ head> <body> <img src = "test.jpg" width = "100%" > <p> Розмір вікна: <span id = "size"> </ span> пікселів </ p> <script> window .onresize = function () {document .getElementById ( "size") .innerHTML = window .innerWidth; }; </ Script> </ body> </ html>

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

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

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

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

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

Файл із зображенням Дозвіл Розмір (без стиснення) candc290.jpg 290 × 183 19,378 байт [Email protected] 290 × 183 (Retina) 56,277 байт candc538.jpg 538 × 341 52,914 байт [Email protected] 538 × 341 (Retina) 159,867 байт candc970.jpg 970 × 614 132,766 байт [Email protected] 970 × 614 (Retina) 451,939 байт

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

обходимо обмеження

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

Робимо зображення доступними

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

<Div id = "image" role = "img" aria-label = "Текстовий опис"> </ div>

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

Масштабування зображень в браузері

У тега <img> є ще одна корисна властивість, яке не використовується при нашому підході: автоматичний перерахунок розмірів і збереження пропорцій зображення браузером. Використовуючи стандартний <img>, можна задати ширину у відсотках від містить елементи, і браузер автоматично розрахує ширину зображення і пропорційно підлаштувати висоту. Наприклад, погляньте на фрагмент нижче, в якому у зображення image.jpg природний розмір 600 × 300 пікселів.

<Div style = "width: 400px"> <img src = "image.jpg"> </ div>

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

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

Проблему підстроювання ширини вирішити не складно. Так само як і при використанні тега <img>, можна помістити наш елемент в <div> з фіксованою шириною; всього лише потрібно чітко прописати, що фон повинен заповнити цей <div>. Розмітка HTML не сильно відрізняється:

<Div style = "width: 400px"> <span id = "image"> </ span> </ div>

Нам знадобляться кілька властивостей CSS, щоб задати ширину. Давайте розглянемо кожну окремо:

1. Задаємо значення inline-block для властивості display елемента #image. Без цієї властивості елемент <span> буде відображатися як рядковий елемент, і йому не можна буде задати ширину або висоту.
2. Для властивості width цього елемента задаємо значення 100% щоб наше зображення заповнило контейнер <div>.
3. Властивостями font-size і line-height присвоюємо значення 0, щоб ніяке вміст span не могло вплинути на його розмір.
4. Центруємо елемент із зображенням по вертикалі в контейнері <div> за допомогою значення middle для властивості vertical-align.
5. Задаємо значення 100% властивості background-size щоб зображення повністю заповнило елемент, до якого воно прив'язане.
6. Для властивості background-position вказуємо значення 50% 50% щоб вирівняти фонове зображення відносно елемента.
7. Вказуємо значення no-repeat для властивості background-repeat щоб запобігти повторенню зображення по вертикалі або горизонталі.

В результаті отримуємо стилі для елемента з прив'язаним зображенням (елемент <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 (image.jpg); }

Ці властивості задають зображенню ширину, проте нам ще потрібно розібратися з висотою. Жодна складова розмітки або стилів, наведених вище, не говорить браузеру якою має бути висота елемента із зображенням, тому ми отримаємо елемент з висотою за замовчуванням, яка, на жаль, дорівнює нулю, адже, по суті, в елементі <span> немає вмісту . На щастя, це можна виправити за допомогою пари незначних доповнень.

Спершу нам потрібно додати в розмітку ще один елемент <span>. Цей додатковий елемент поміщаємо всередину елемента із зображенням.

<Div style = "width: 400px"> <span id = "image"> <span id = "image-inner"> </ span> </ span> </ div>

Тепер прописуємо кілька стильових властивостей для цього внутрішнього <span>.

1. Додаємо властивість display із значенням block, щоб йому можна було задати висоту і ширину.
2. Встановлюємо для height значення 0, оскільки в елементі немає реального вмісту.
3. Додаємо властивість 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 для головного зображення:

<Div class = "hero"> <span id = "cafe" role = "img" aria-label = "Кава і круасан"> <span class = "inner"> </ span> </ span> </ div>

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

.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; }

І нарешті, набір медізапросов для підбору підходящого зображення в залежності від контексту користувача (для стислості в прикладі опущені Вендорний префікси):

.hero #cafe {background-image: url ( "../img/candc970.jpg"); } @ Media only screen {.hero #cafe {background-image: url ( "../img/candc290.jpg"); }} @ Media only screen and (min-resolution: 2dppx) {.hero #cafe {background-image: url ( "../img/ [Email protected] ");}} @ Media only screen and (min-width: 321px) {.hero #cafe {background-image: url (" ../img/candc538.jpg ");}} @ media only screen and (min -resolution: 2dppx) and (min-width: 321px) {.hero #cafe {background-image: url ( "../img/ [Email protected] ");}} @ Media only screen and (min-resolution: 2dppx) and (min-width: 539px) {.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, можливо, варто створити окрему таблицю стилів для IE8, в якій будуть прописані точні розміри зображень замість масштабованих. Само собою, цю таблицю стилів потрібно додати в умовному коментарі для IE, щоб інші браузери її не побачили.

Серйозна проблема контексту користувача

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

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

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

Подякою

Дуже дякую Грейді Кунлайну за те, що він першим описав як можна за допомогою стилів зробити зображення масштабованими зі збереженням пропорцій. Веб сайт contfont.net , Який використовується в цій статті як приклад можна знайти на github .