Адаптивні зображення¶

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

На щастя, у CSS можна вжити заходів, щоб цього не відбувалося.

Обмеження зображень¶

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

За бажання можна використовувати max-width замість max-inline-size, але пам'ятайте, що корисно звикнути мислити в термінах логічних властивостей.

Це ж правило можна застосувати і до інших видів вбудованого вмісту, наприклад, відео та iframe.

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

Додавання до block-size значення auto означає, що співвідношення сторін зображень залишатиметься постійним.

Іноді розміри зображення можуть бути непідконтрольні користувачеві, наприклад, якщо зображення додається через систему керування контентом. Якщо у вашому дизайні потрібно, щоб співвідношення сторін зображення відрізнялося від реальних розмірів, використовуйте властивість aspect-ratio в CSS.

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

Щоб цього не відбувалося, використовуйте властивість object-fit.

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

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

Те саме зображення з двома різними значеннями object-fit . У першому випадку значення object-fit дорівнює contain. Для другого значення object-fit дорівнює cover.

Якщо обрізка згори та знизу рівномірно є проблемою, використовуйте CSS-властивість object-position для налаштування фокусу обрізки.

Ви можете зробити так, щоб найважливіший вміст зображення залишався видимим.

Доставка зображень¶

Ці правила CSS вказують браузеру, як відображати зображення. У HTML можна також підказати, як браузер повинен працювати з цими зображеннями.

Підказки за розмірами¶

Якщо відомі розміри зображення, слід включити атрибути width і height . Навіть якщо зображення буде відображатися в іншому розмірі (через правило max-inline-size: 100%), браузер все одно знатиме співвідношення ширини та висоти і зможе відвести потрібну кількість місця. Це дозволить уникнути "стрибків" решти вмісту під час завантаження зображення.

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

Підказки із завантаження¶

За допомогою атрибута loading можна вказати браузеру, чи слід відкласти завантаження зображення доти, доки воно не опиниться в області перегляду або поруч із ним. Для зображень нижче згину використовуйте значення lazy . Браузер не завантажуватиме "ледачі" зображення до тих пір, поки користувач не прокрутить сторінку вниз настільки, що зображення ось-ось з'явиться в полі зору. Якщо користувач не прокручує сторінку, зображення не завантажується.

Для зображення героя, розташованого над згином, loading використовувати не слід. Якщо ваш сайт автоматично застосовує атрибут loading="lazy" , ви можете встановити атрибут eager (за замовчуванням), щоб запобігти його застосуванню:

Fetch Priority¶

Для важливих зображень, таких як зображення LCP, можна додатково визначити пріоритет завантаження за допомогою Fetch Priority, встановивши атрибут fetchpriority значення high :

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

Але пам'ятайте: коли ви просите браузер встановити пріоритет завантаження одного ресурсу - наприклад, зображення - браузеру доведеться скасувати пріоритет завантаження іншого ресурсу, наприклад, скрипта або файлу шрифту. Встановлюйте fetchpriority="high" для зображення лише в тому випадку, якщо воно дійсно життєво необхідне.

Підказки щодо попереднього завантаження¶

Деякі зображення можуть бути недоступні у вихідному HTML - якщо вони додані за допомогою JavaScript або як фонове зображення CSS. Ви можете використовувати попереднє завантаження, щоб ці важливі зображення були отримані заздалегідь.Це можна поєднувати з атрибутом fetchpriority для дійсно важливих зображень:

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

Попереднє завантаження адаптивних зображень на основі srcset (про яку мова піде нижче) за допомогою атрибутів imagesrcset та imagesizes є більш просунутою та підтримується в деяких браузерах, але не у всіх:

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

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

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

Декодування зображень¶

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

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

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

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

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

Адаптивні зображення з srcset ¶

Завдяки оголошення max-inline-size: 100% зображення ніколи не вирвуться за межі своїх контейнерів. Але навіть якщо велике зображення, зменшене до потрібного розміру, виглядає нормально, це не так добре. Якщо хтось використовує пристрій з маленьким екраном у мережі з низькою пропускною здатністю, він завантажуватиме невиправдано великі зображення.

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

Дескриптор ширини

Ви можете передати список значень, розділених комами. Кожне значення має являти собою URL-адресу зображення, за яким через пробіл слідує деяка метадана про зображення. Ці метадані називаються дескриптором.

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

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

Браузер не завантажуватиме великі зображення, якщо в них немає потреби. Це дозволяє заощаджувати пропускну спроможність.

Розміри¶

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

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

Дивно, коли медіазапити CSS знаходяться усередині HTML-елемента. Це порушує поділ уявлення та структури. Але це єдиний спосіб надати необхідну інформацію про розміри зображень.

У цьому прикладі ви вказуєте браузеру при ширині області перегляду 66em відображати зображення не ширше однієї третини екрана (наприклад, в триколонковій верстці).

При ширині області перегляду від 44em до 66em відображатиме зображення на половину ширини екрану (двохколоночний макет).

При ширині екрана менше 44em зображення виводиться на всю ширину екрана.

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

Дескриптор густини пікселів¶

Існує ще одна ситуація, коли може знадобитися надати кілька версій того самого зображення.

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

Дескриптор густини використовується для опису густини пікселів зображення по відношенню до зображення в атрибуті src. Дескриптор щільності є число, за яким слідує буква x: 1x , 2x і т.д. буд.

Якщо розмір small-image.png становить 300 на 200 пікселів, а medium-image.png - 600 на 400 пікселів, то medium-image.png може мати у списку srcset по собі значення 2x.

Не обов'язково використати цілі числа. Якщо інший варіант зображення має розмір 450 на 300 пікселів, його можна описати за допомогою 1.5x .

Ви можете використовувати або дескриптори ширини, або_ дескриптори густини, але не обидва разом.

Презентаційні зображення¶

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

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

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

В ідеалі презентаційні чи декоративні зображення взагалі не повинні бути присутніми у HTML. HTML – це структура. CSS – для подання.

Фонові зображення¶

Для завантаження презентаційних зображень використовуйте властивість background-image у CSS.

За допомогою функції image-set для background-image можна вказати декілька зображень-кандидатів.

Функція image-set CSS працює аналогічно атрибуту srcset в HTML. Надайте список зображень із дескриптором щільності пікселів для кожного з них.

Браузер вибере найкраще зображення з урахуванням щільності пікселів пристрою.

При додаванні зображень на сайт необхідно враховувати багато факторів:

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

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

У арсеналі є ще один елемент HTML, який допоможе вам краще контролювати зображення: елемент picture.

CSS робота із зображеннями

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

Використання тега img

Тег img - Стандартний спосіб додавання зображень на сайт.

Тег має атрибути:

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

Для масштабування використовуються стандартні css властивості: width і height.

Приклад:

.example_image < width: 300px; height: 200px; >

Використання фонового зображення

Тег img добре підходить для відображення статичного контенту, але коли справа доходить для виведення динаміки, зручніше виводити елементи за допомогою фонового зображення. Як контейнер можна використовувати будь-який елемент на кшталт div, span, a. Далі в справу вступають css властивості background і background-size. Background вказує шлях до зображення та задає базові правила його виведення, а background-size описує спосіб відображення тла. Наведений вище приклад можна відобразити подібним способом (червона рамка для виділення контейнера).

Приклад:

Властивість center вирівнює фон по горизонталі та по вертикалі, а no-repeat забороняє повторення зображення.

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

Приклад:

З властивістю background-size: cover:

Якщо необхідно, щоб зображення займало максимальну площу контейнера, але при цьому не обрізалося використовується background-size з параметром contain.

Приклад:

З властивістю background-size: contain:

Також за допомогою background-size можна встановити конкретний розмір зображення.

Приклад:

Ще можна додати фоновий колір контейнеру.

Приклад: