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

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

На щастя, у 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 для важливих зображень дозволить браузеру дочекатися зображення і рендерувати їх одночасно. , не чекаючи декодування зображення.

Однак найкращим варіантом зазвичай є спроба уникнути надмірних розмірів 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 на html

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

1. Зміна картинки у графічному редакторі

Змінювати розмір зображення ви можете у будь-якому графічному редакторі (photoshop, gimp, xnview) і воно автоматично змінюватиметься на сайті відповідно до оригінальних розмірів.

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

- графічні редактори неякісно стискають картинки менше 200 пікселів за шириною та висотою.

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

2. Зміна картинки в коді CSS на сайті

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

- Якісно стискаються невеликі картинки, менше 200 пікселів за висотою або шириною на відміну від графічних редакторів. пікселів), щоб зберегти хорошу якість при зменшенні.

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

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

Як змінити розмір картинки в html за допомогою css

Щоб змінити розмір зображення в html засобами css використовуються властивості width (ширина) і height (висота) всередині атрибута style. Ви можете написати тільки width або height , і невказане значення автоматично зміниться зі збереженням пропорцій картинки. Наприклад, вказавши тільки ширину зображення за допомогою width, його висота зміниться автоматично, зберігши пропорції. І навпаки, при вказівці тільки висоти, його ширина також автоматично зміниться, зберігши пропорції картинки.