Эрик Портис присоединяется ко мне, чтобы окунуться в мир адаптивных изображений.
Начнем с основ. Адаптивные изображения - это, в частности, изображения в HTML и существуют из-за стремления к повышению производительности. Изображения, вероятно, являются самым большим виновником общего веса веб-сайтов. Если мы можем избежать отправки слишком большого количества пикселей по сети, мы должны это сделать. В конце концов, экрану шириной всего 720 пикселей не нужно изображение шириной 2000 пикселей, даже если это 2-кратный дисплей.
Проблема в том, что браузеры очень агрессивно загружают ресурсы, такие как изображения. Это хорошо, потому что Интернет (может быть) настолько быстрым, насколько он есть. Но это также означает, что нам нужно предоставить кучу информации о наших изображениях прямо в HTML. Разве браузер не может просто определить размер изображения? Конечно, может, после того, как скачает. Разве браузер не может знать, какого размера изображение будет отображаться на странице? Конечно, может, после того, как загрузил весь CSS и выполнил макет. Синтаксис отзывчивых изображений пытается опередить все это, предоставляя эту информацию прямо в синтаксисе. Разобраться в этом синтаксисе непросто! Существует srcset, sizesи элемент, и есть тонна , чтобы обернуть свой ум вокруг там.
Все становится еще сложнее.
Синтаксис, который вам необходимо создать, основан на наличии нескольких копий этого образа, на основе которых будет строиться синтаксис. Как их сделать? Сколько нужно сделать? Какого размера они должны быть?
К счастью, есть некоторые автоматизированные инструменты, появляющиеся вокруг адаптивных изображений. WordPress был одним из первых игроков. По умолчанию WordPress создаст несколько версий загружаемых вами изображений и выводит srcsetсинтаксиса. Но вы можете добиться большего. Вы можете предоставить sizesатрибут, который фактически соответствует тому, что делает ваша тема, и как она изменяет размер этих изображений.
Кроме того, WordPress не использует какой-либо особый интеллект для создания нескольких копий загружаемых вами изображений. Но могло. Такой инструмент, как генератор точек останова для отзывчивого изображения, действительно использует некоторый интеллект для определения количества различных изображений, которые вы можете создать, поэтому вы можете найти баланс между близким к идеальному изображению для работы и отсутствием необходимости делать сотни или тысячи копий. Это. У этого инструмента есть API!
Все становится еще сложнее.
Разные браузеры поддерживают разные форматы изображений. Например, WebP. Обеспечение правильного формата изображения в правильном браузере позволяет добиться экономии производительности. В этом может помочь синтаксис отзывчивых изображений, но он усложняет синтаксис. Многие форматы изображений также имеют понятие качества. В каком качестве вы сохраняете эти несколько копий?
На этом этапе самое время упомянуть Cloudinary. Я интегрировал его прямо сейчас в CSS-Tricks, и он помогает со многими вещами. Я должен упомянуть, что я платный клиент Cloudinary, и этот скринкаст не спонсировался, но Cloudinary спонсировал CSS-Tricks в виде двух связанных спонсируемых сообщений:
- Адаптивные изображения в WordPress с Cloudinary, часть 1
- Адаптивные изображения в WordPress с Cloudinary, часть 2
Вкратце, вот как все это сейчас работает в CSS-Tricks:
- Я загружаю изображения так же, как и всегда с WordPress.
- Вместо того , чтобы
srcsetинформация генерируется с WordPress, то генерируется этим умным API. - Изображение также загружено в Cloudinary.
- Когда WordPress фильтрует и выводит HTML для изображений, применяются все эти хорошие
srcset(и настраиваемыеsizes) данные. URL-адрес указывает на URL-адреса Cloudinary. - URL-адреса Cloudinary используют способность Cloudinary автоматически настраивать формат и качество (с использованием своей причудливой технологии), чтобы убедиться, что все работает наилучшим образом для конкретного браузера, запрашивающего изображение.
- Старые изображения, которые изначально не были загружены в Cloudinary, по-прежнему пользуются всеми достоинствами Cloudinary. У них нет такой умной
srcsetинформации, но они по-прежнему используют URL-адрес «выборки», что означает, что они могут извлечь выгоду из автоматического форматирования и автоматического качества (что, вероятно, в любом случае является приличной частью повышения производительности).
Короче говоря, я не только использую адаптивные изображения здесь, на CSS-Tricks, чтобы повысить производительность, но и интеграция Cloudinary серьезно улучшает эту игру.
Я также счастлив, что это не жесткая зависимость. Если плагин Cloudinary когда-либо отключится, все просто вернется к нормальным адаптивным изображениям WordPress.