Чуйні зображення: приклади використання

14

Від автора: Нарешті, по-справжньому чуйні зображення стають реальністю в веб-розробці — на чистому HTML, без застосування хитромудрих хаків. Елемент picture і кілька нових атрибутів елемента img вже з’явилися в браузер Chromium 37 (а також скоро з’являться і в браузері Opera), в браузері Firefox Nightly, і в даний час впроваджуються в движок WebKit (хоча ще належить дізнатися, чи буде компанія Apple впроваджувати їх в наступну версію браузера Safari).

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

Чотири питання

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

Змінюються розміри моїх зображень в залежності від встановлених мною правил для чуйного веб-дизайну?

Я Хочу здійснити оптимізацію під екрани з високою роздільною здатністю (dpi)?

Хочу я використовувати зображення з різними опрацювання типів mime для браузерів, які їх підтримують?

Хочу я використовувати різні графічні зображення (ілюстрації) в залежності від конкретних умов контексту?

Нижченаведені приклади наведено з урахуванням цих питань і виділяються ключовими словами розміри, dpi, mime та графіка, відповідно, а потім для кожного варіанту відповіді наводиться фрагмент коду (фрагмент) з коротким поясненням. При створенні даних прикладів я уявляв собі ось цей вечірній знімок оперного театру р. в Осло — він також може вам стати в нагоді.

Чуйні зображення: приклади використання

Моменти, про які потрібно пам’ятати

Перед тим, як ви приступите до перегляду прикладів, ось кілька моментів, про які слід пам’ятати:

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

Сприймайте елемент picture, а також атрибути sizes і srcset як повну заміну атрибуту src для тега img. Перевіряйте параметр currentSrc на JavaScript, щоб подивитися, що було вибрано браузером. Старі версії браузерів природно будуть використовувати просто img src.

Список атрибутів srcset і sizes є підказкою для браузерів, а не командою. Наприклад, якщо піксельний коефіцієнт конкретного пристрою (device-pixel-ratio) дорівнює 1.5, тоді можна вільно використовувати зображення з масштабом 1x або 2x, в залежності від того, що буде відомо про функціональність пристрою, мережі і т. д.

Запис img sizes=»(max-width: 30em) 100vw …» говорить: якщо умова цього «медіа-запиту» є істиною, то потрібно показати зображення з шириною дорівнює 100vw. Тут буде використовуватися перший «медіа-запит», у якого умова буде істиною, тому дуже важливим є порядок проходження запитів.

Використання графічної директиви

розміри dpi mime графіка

Чуйні зображення: приклади використання

Для вікон браузера з шириною дорівнює 1024 CSS-пікселя і більше, буде завантажена повнорозмірна фотографія; для вікон браузера з меншою шириною – фотографія крупним планом.

Використання різних типів зображення

розміри dpi mime графіка

Чуйні зображення: приклади використання

Браузери, які підтримують формат WebP, будуть використовувати зображення з розширенням WebP; інші браузери будуть використовувати JPG.

Використання різних типів зображення і графічної директиви

розміри dpi mime графіка

Чуйні зображення: приклади використання

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

Використання зображень з високою роздільною здатністю

розміри dpi mime графіка

Чуйні зображення: приклади використання

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

Використання зображень з високим дозволом і графічної директиви

розміри dpi mime графіка

Чуйні зображення: приклади використання

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

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

розміри dpi mime графіка

Чуйні зображення: приклади використання

Браузери, встановлені на пристроях з високим дозволом екрану, отримають зображення з збільшеною в 2 або 3 рази кількістю пікселів; інші браузери отримають звичайне зображення. Ці фотографії зберігаються у форматі WebP для браузерів, що підтримують цей формат; для інших браузерів призначений JPG.

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

розміри dpi mime графіка

Чуйні зображення: приклади використання

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

Використання розмірів зображення

розміри dpi mime графіка

Чуйні зображення: приклади використання

Для вікон браузерів з шириною 640 CSS-пікселів і більше, буде показана фотографія, що займає 60% від ширини вікна перегляду; для вікон браузерів з меншою шириною, буде показана фотографія з шириною рівною ширині вікна перегляду. Браузер вибирає одну з можливих фотографій зі списку зображень з шириною 200px, 400px, 800px і 1200 px, враховуючи при цьому ширину зображення і дозвіл екрану.

Використання розмірів зображення і графічної директиви

розміри dpi mime графіка

Чуйні зображення: приклади використання

Для вікон браузерів з шириною 1280 CSS-пікселів і більше, буде показана повнорозмірна фотографія, займає 50% від ширини вікна перегляду; для вікон браузерів з шириною 640-1279 CSS-пікселів, буде показана фотографія, що займає 60% від ширини вікна перегляду; для вікон браузерів з меншою шириною, буде показана фотографія з шириною рівною ширині вікна перегляду. У кожному випадку браузер вибирає одну з можливих фотографій зі списку зображень з шириною 200px, 400px, 800px і 1200 px, враховуючи при цьому ширину зображення і дозвіл екрану.

Використання розмірів зображення і різних типів зображення

розміри dpi mime графіка

Чуйні зображення: приклади використання

Для вікон браузерів з шириною 640 CSS-пікселів і більше, буде показана фотографія, що займає 60% від ширини вікна перегляду; для вікон браузерів з меншою шириною, буде показана фотографія з шириною рівною ширині вікна перегляду. Браузер вибирає одну з можливих фотографій зі списку зображень з шириною 200px, 400px, 800px і 1200 px, враховуючи при цьому ширину зображення і дозвіл екрану. Ці фотографії також збережені у форматі WebP для браузерів, що підтримують цей формат; для інших браузерів призначений JPG.

Використання розмірів зображення, різних типів зображення і графічної директиви

розміри dpi mime графіка

Чуйні зображення: приклади використання

Для вікон браузерів з шириною 1280 CSS-пікселів і більше, буде показана повнорозмірна фотографія, займає 50% від ширини вікна перегляду; для вікон браузерів з шириною 640-1279 CSS-пікселів, буде показана фотографія, що займає 60% від ширини вікна перегляду; для вікон браузерів з меншою шириною, буде показана фотографія з шириною рівною ширині вікна перегляду. У кожному випадку браузер вибирає одну з можливих фотографій зі списку зображень з шириною 200px, 400px, 800px і 1200 px, враховуючи при цьому ширину зображення і дозвіл екрану. Ці фотографії також збережені у форматі WebP для браузерів, що підтримують цей формат; для інших браузерів призначений JPG.

Використання розмірів зображення та зображення з високою роздільною здатністю

розміри dpi mime графіка

Чуйні зображення: приклади використання

Для вікон браузерів з шириною 640 CSS-пікселів і більше, буде показана фотографія, що займає 60% від ширини вікна перегляду; для вікон браузерів з меншою шириною, буде показана фотографія з шириною рівною ширині вікна перегляду. Браузер вибирає одну з можливих фотографій зі списку зображень з шириною 200px, 400px, 800px і 1200 px, враховуючи при цьому ширину зображення і дозвіл екрану.

Використання розмірів зображення, зображення з високою роздільною здатністю і графічної директиви

розміри dpi mime графіка

Чуйні зображення: приклади використання

Для вікон браузерів з шириною 1280 CSS-пікселів і більше, буде показана повнорозмірна фотографія, займає 50% від ширини вікна перегляду; для вікон браузерів з шириною 640-1279 CSS-пікселів, буде показана фотографія, що займає 60% від ширини вікна перегляду; для вікон браузерів з меншою шириною, буде показана фотографія з шириною рівною ширині вікна перегляду. У кожному випадку браузер вибирає одну з можливих фотографій зі списку зображень з шириною 200px, 400px, 800px і 1200 px, враховуючи при цьому ширину зображення і дозвіл екрану.

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

sizes dpi mime art

Чуйні зображення: приклади використання

Для вікон браузерів з шириною 640 CSS-пікселів і більше, буде показана фотографія, що займає 60% від ширини вікна перегляду; для вікон браузерів з меншою шириною, буде показана фотографія з шириною рівною ширині вікна перегляду. Браузер вибирає одну з можливих фотографій зі списку зображень з шириною 200px, 400px, 800px і 1200 px, враховуючи при цьому ширину зображення і дозвіл екрану. Ці фотографії зберігаються у форматі WebP для браузерів, що підтримують цей формат; для інших браузерів призначений JPG.

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

sizes dpi mime art

Чуйні зображення: приклади використання

Для вікон браузерів з шириною 1280 CSS-пікселів і більше, буде показана повнорозмірна фотографія, займає 50% від ширини вікна перегляду; для вікон браузерів з шириною 640-1279 CSS-пікселів, буде показана фотографія, що займає 60% від ширини вікна перегляду; для вікон браузерів з меншою шириною, буде показана фотографія з шириною рівною ширині вікна перегляду. У кожному випадку браузер вибирає одну з можливих фотографій зі списку зображень з шириною 200px, 400px, 800px і 1200 px, враховуючи при цьому ширину зображення і дозвіл екрану. Ці фотографії зберігаються у форматі WebP для браузерів, що підтримують цей формат; для інших браузерів призначений JPG.

Далі – більше!

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