Ерік Портіс приєднується до мене, щоб поринути у світ чуйних зображень.
Ми починаємо з основ. Адаптивні зображення - це спеціально зображення в HTML і існують через бажання кращої продуктивності. Зображення є, мабуть, найбільшим винуватцем загальної ваги веб-сайтів. Якщо ми можемо уникнути надсилання забагато пікселів по мережі, ми повинні. Зрештою, для екрану, що має лише 720 пікселів, не потрібно зображення шириною 2000 пікселів, навіть якщо це дисплей у 2 рази.
Проблема в тому, що браузери дійсно агресивно ставляться до завантаження таких ресурсів, як зображення. Це добре, оскільки саме тому Інтернет (може бути) таким швидким, як є. Але це також означає, що нам потрібно надати купу інформації про наші зображення прямо в HTML. Не може браузер просто знати, наскільки велике зображення? Звичайно, може після завантаження. Не може браузер знати, наскільки велике зображення буде показано на сторінці? Звичайно, це можливо, після завантаження всього CSS і виконаного макета. Синтаксис адаптивних зображень намагається випередити все це, надаючи цю інформацію прямо в синтаксисі. З’ясувати, що синтаксис складний! Існує srcset, sizesі елемент, і є тонна , щоб обернути свій розум навколо там.
Це все ускладнюється.
Синтаксис, який вам потрібно побудувати, базується на тому, що має кілька копій цього зображення, в якому буде побудований синтаксис. Як ви їх робите? Скільки потрібно зробити? Якого розміру вони повинні бути?
На щастя, навколо чуйних зображень з’являється кілька автоматизованих інструментів. WordPress був раннім гравцем. Зразу ж WordPress створить кілька версій зображень, які ви завантажуєте та виводите srcsetсинтаксисом. Але ви можете зробити набагато краще. Ви можете вказати sizesатрибут, який насправді відповідає тому, що робить ваша тема, і тому, як вона визначає розмір цих зображень.
Крім того, WordPress не використовує жодного спеціального інтелекту для створення кількох копій завантажених вами зображень. Але, могло. Такий інструмент, як генератор точок зупинки чуйних зображень, використовує певний інтелект, щоб визначити, скільки різних зображень ви можете зробити, тому ви можете знайти баланс між наявністю близького до ідеального зображення для роботи та відсутністю необхідності робити сотні чи тисячі копій це. Цей інструмент має API!
Це все ускладнюється.
Різні браузери підтримують різні формати зображень. Наприклад, WebP. Завдяки правильному формату зображення в потрібному браузері можна заощадити продуктивність. Синтаксис адаптивних зображень може допомогти в цьому, але це ускладнює синтаксис. Багато форматів зображень також мають поняття якості. Якої якості ви зберігаєте ці кілька копій?
На даний момент настав час згадати Cloudinary. Зараз я інтегрував його на CSS-Tricks, і це допомагає з багатьма цими матеріалами. Слід зазначити, що я платячий клієнт Cloudinary, і цей скринкаст не був спонсорованим, але Cloudinary спонсорував CSS-фокуси у вигляді двох дуже спонсорованих публікацій:
- Чуйні зображення в WordPress з Cloudinary, частина 1
- Чуйні зображення в WordPress з Cloudinary, Частина 2
У двох словах, ось як це все працює зараз на CSS-Tricks:
- Я завантажую зображення так само, як завжди з WordPress.
- Замість
srcsetінформації, яка генерується за допомогою WordPress, вона генерується за допомогою цього розумнішого API. - Зображення також завантажується в Cloudinary.
- Коли WordPress фільтрує та виводить HTML для зображень, застосовуються всі ці добрі
srcset(і власніsizes) дані. URL-адреса вказує на хмарні URL-адреси. - URL-адреси Cloudinary використовують здатність Cloudinary автоматично регулювати як формат, так і якість автоматично (використовуючи їхню вигадливу технологію), щоб переконатися, що речі найкращі для конкретного браузера, що вимагає зображення.
- Старі зображення, які спочатку не були завантажені в Cloudinary, все ще отримують користь від усього Cloudinary доброго. Вони не мають таких розумних
srcsetданих, але вони все ще використовують URL-адресу "отримати", що означає, що вони можуть отримати вигоду від автоматичного форматування та автоматичної якості (що, мабуть, є пристойною частиною підвищення продуктивності).
Коротше кажучи, тут я не тільки використовую чуйні зображення на CSS-Tricks для покращення продуктивності, інтеграція Cloudinary серйозно покращує цю гру.
Я також радий, що це не важка залежність. Якщо плагін Cloudinary коли-небудь вимикається, все просто повертається до звичайних зображень, що реагують на WordPress.