Узнайте, как CMS, такие как WordPress, и другие генераторы сайтов могут упростить использование адаптивных изображений.
Несмотря на то что автоматизация сжатия изображений как один из этапов процесса разработки имеет некоторые ограничения, это, безусловно, лучше, чем ручное сохранение альтернативных фрагментов каждого изображения и их ручная оптимизация с помощью таких инструментов, как Squoosh.app. Например, вы не всегда можете полностью контролировать изображения, используемые на сайте — большинство изображений в Интернете, предназначенных для пользователей, скорее относятся к содержимому, чем к веб-разработке, загружаются пользователями или редакторами, а не хранятся в репозитории вместе с такими ресурсами, как JavaScript и CSS.
В связи с этим обычно возникает необходимость в нескольких процессах управления изображениями: задача на уровне разработки для графических ресурсов, используемых при создании и поддержке сайта — фоновых рисунков, иконок, логотипов и др., и задача, связанная с графическими ресурсами, создаваемыми в процессе использования сайта, такими как фотографии, добавленные в статью редактором, или аватар, загруженный пользователем. Хотя контекст может быть разным, конечные цели одинаковы: автоматическое кодирование и сжатие на основе настроек, заданных разработчиком.
К счастью, библиотеки обработки изображений, с которыми вы познакомились в процессе локальной разработки, можно использовать в любом контексте. И хотя универсального подхода к разметке адаптивных изображений быть не может, эти системы предлагают разумные настройки по умолчанию, параметры конфигурации и API, облегчающие их применение.
Генераторы статичных сайтов
Если сравнивать с менеджерами задач, то имеется некоторое сходство, как генераторы статичных сайтов (такие как Jekyll или Eleventy) подходят к работе с изображениями. Использование этих генераторов для создания готового к развёртыванию сайта требует управления ресурсами, включая минификацию CSS или преобразование и сжатие JavaScript. Это означает, что данные инструменты позволяют вам обрабатывать графические ресурсы с помощью того же множества библиотек, о которых вы уже узнали.
Официальный плагин изображений для Eleventy использует Sharp для изменения размера, генерации нескольких исходных размеров, повторного кодирования и сжатия, подобно тем задачам, с которыми вы познакомились ранее.
В отличие от менеджера задач, генератор статичных сайтов имеет прямое представление как о конфигурации и использовании этих библиотек, так и о разметке, создаваемой для рабочего сайта, а значит, он может сделать гораздо больше для автоматизации разметки адаптивных изображений. Например, при вызове шорткода для вывода изображений этот плагин будет выводить HTML в соответствии с параметрами конфигурации, переданными Sharp.
const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {
async function imageShortcode(src, alt, sizes="100vw") {
let metadata = await Image(src, {
formats: ["avif", "webp", "jpeg"],
widths: [1000, 800, 400],
outputDir: "_dist/img/",
filenameFormat: function( id, src, width, format, options ) {
const ext = path.extname( src ),
name = path.basename( src, ext );
return `${name}-${width}.${format}`
}
});
let imageAttributes = {
alt,
sizes,
loading: "lazy"
};
return Image.generateHTML(metadata, imageAttributes);
}
eleventyConfig.addAsyncShortcode("respimg", imageShortcode);
};
Этот шорткод можно использовать вместо стандартного синтаксиса изображения:
{% respimg "img/butterfly.jpg", "Атрибут alt.", "(min-width: 30em) 800px, 80vw" %}
Если вы настроены на вывод нескольких форматов, как указано выше, сгенерированная разметка будет представлять собой элемент <picture>, содержащий соответствующие элементы <source>, атрибуты type и атрибуты srcset, уже полностью заполненные списком сгенерированных возможных размеров.
<picture>
<source type="image/avif"
srcset=
"/img/butterfly-400.avif 400w,
/img/butterfly-800.avif 800w,
/img/butterfly-1000.avif 1000w"
sizes="(min-width: 30em) 800px, 80vw">
<source
type="image/webp"
srcset=
"/img/butterfly-400.webp 400w,
/img/butterfly-800.webp 800w,
/img/butterfly-1000.webp 1000w"
sizes="(min-width: 30em) 800px, 80vw">
<source type="image/jpeg"
srcset=
"/img/butterfly-400.jpeg 400w,
/img/butterfly-800.jpeg 800w,
/img/butterfly-1000.jpeg 1000w"
sizes="(min-width: 30em) 800px, 80vw">
<img alt="Атрибут alt." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846">
</picture>
Конечно, этот плагин не сможет сгенерировать правильный атрибут sizes, поскольку он не может знать конечный размер и положение изображения в макете, но он принимает его в качестве входных данных при генерации вашей разметки — ещё одна работа для RespImageLint.
Фреймворки
Фреймворкам, для редактирования, кодирования и сжатия изображений на стороне клиента, потребуется менеджер задач или сборщик вроде Webpack. Responsive-loader, например, также использует библиотеку Sharp для пересохранения ресурсов изображений. Затем он позволяет использовать import для изображений в виде объектов:
import imageAVIF from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=avif';
import imageWebP from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=webp';
import imageDefault from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000';
Эти импортированные изображения можно использовать с помощью абстракций, таких как компонент React's Image, или напрямую заполнить ими вашу адаптивную разметку:
<picture>
<source type='image/avif' srcSet={imageAVIF.srcSet} sizes='…' />
<source type='image/webp' srcSet={imageWebp.srcSet} sizes='…' />
<img
src={imageDefault.src}
srcSet={imageDefault.srcSet}
width={imageDefault.width}
height={imageDefault.height}
sizes='…'
loading="lazy">
</picture>
Фреймворк, выполняющий отображение на стороне клиента, является сильным кандидатом на использование Lazysizes и sizes="auto", что даёт вам почти полностью автоматизированные адаптивные изображения.
Системы управления содержимым
WordPress был одним из первых, кто начал использовать собственную адаптивную разметку изображений, и с момента появления в WordPress 4.4 API постепенно улучшался: появилась поддержка WebP и контроль над типом выходного MIME-типа. Ядро WordPress разработано для использования PHP-расширения ImageMagick (или, при его отсутствии, библиотеки GD).
Когда изображение загружается через интерфейс администратора WordPress, оно используется для создания пользовательских файлов на сервере, точно так же, как и на локальном компьютере. По умолчанию любое изображение, выводимое WordPress, будет иметь генерируемый атрибут srcset, основанный на размерах изображения, настроенных в вашей теме.
Два ключевых параметра, которые можно настроить для генерируемых изображений, — это качество сжатия и формат выходного файла.
К примеру, чтобы установить качество сжатия по умолчанию на 70 для всех генерируемых изображений, выполните следующие действия:
add_filter( 'wp_editor_set_quality', function() { return 70; } );
Для ещё большего сжатия переключите формат вывода загружаемых изображений с JPEG на WebP с помощью следующего действия:
add_filter( 'image_editor_output_format', function( $mappings ) {
$mappings[ 'image/jpeg' ] = 'image/webp';
return $mappings;
});
Учитывая, что WordPress полностью знает всё о кадрировании и формате, которые он генерирует из загруженного изображения, WordPress может предложить вспомогательные функции вроде wp_get_attachment_image_srcset() для получения полного сгенерированного значения srcset добавленного изображения.
Как вы, вероятно, уже догадались, работа с атрибутом sizes несколько запутаннее. В отсутствие какой-либо информации о том, как изображения будут использоваться в макете, WordPress по умолчанию использует значение sizes, которое фактически говорит: «Это изображение должно занимать 100% доступной области просмотра, вплоть до самого большого размера, присущего источнику» — предсказуемое значение по умолчанию, но не корректное для любого реального применения. Обязательно используйте функцию wp_calculate_image_sizes(), чтобы установить в своих шаблонах атрибуты sizes, соответствующие контексту.
Конечно, существует бесчисленное множество плагинов WordPress, призванных ускорить современные процессы работы с изображениями как для разработчиков, так и для пользователей. Возможно, наиболее интересными являются такие плагины, как ускоритель сайта Jetpack (бывший Photon), который обеспечивает согласование кодирования на стороне сервера, гарантируя, что пользователи получат наименьший и наиболее эффективный графический формат, который поддерживает их браузер, без необходимости использования элемента <picture> и атрибута type. Для этого применяется сеть доставки изображений — технология, которую вы можете использовать самостоятельно, независимо от вашей CMS.
Всё это справедливо и для таких хостинговых CMS, как Shopify, хотя сами механизмы несколько отличаются: они предлагают аналогичные инструменты для генерации альтернативных источников изображений и соответствующие атрибуты srcset, а также художественная обработка через элемент <picture>.