Узнайте, как CMS, такие как WordPress и другие генераторы сайтов, могут упростить использование адаптивных изображений.
Хотя это, безусловно, улучшение по сравнению с сохранением вручную альтернативных фрагментов каждого изображения и их ручной оптимизацией с помощью такого инструмента, как Squoosh.app , автоматическое сжатие изображений на этапе процесса разработки имеет некоторые ограничения. Во-первых, вы не всегда можете иметь полный контроль над изображениями, используемыми на сайте — большинство изображений, доступных пользователям в Интернете, представляют собой скорее проблемы контента , чем проблемы разработки, загружаемые пользователями или редакторами, а не живущие в репозитории вместе с ресурсами разработки, такими как JavaScript и таблицы стилей.
Обычно для этого требуется более одного процесса управления изображениями: задача уровня разработки для ресурсов изображений, используемых при создании и обслуживании сайта (фоны, значки, логотипы и т. д.), а другая задача связана с ресурсами изображений, созданными с помощью сайт, например фотографии, встроенные в публикацию редакционной группы, или аватар, загруженный пользователем. Хотя контекст может отличаться, конечные цели одни и те же: автоматическое кодирование и сжатие на основе настроек, определенных командой разработчиков.
К счастью, библиотеки обработки изображений, которые вы узнали из своих локальных рабочих процессов разработки, можно использовать в любом количестве контекстов. И хотя никогда не может быть единого подхода к разметке адаптивных изображений, эти системы предоставляют разумные значения по умолчанию, параметры конфигурации и 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 attribute.", "(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 attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"></picture>
Конечно, этот плагин не сможет генерировать атрибут жизнеспособных sizes , поскольку он не может знать окончательный размер и положение изображения в визуализированном макете, но он принимает его в качестве входных данных при создании вашей разметки — это еще одна задача. для Респимажелинт.
Рамки
Платформы рендеринга на стороне клиента потребуют, чтобы исполнитель задач или сборщик данных, такой как 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 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"
/>
Фреймворк, который выполняет рендеринг на стороне клиента, является сильным кандидатом на использование Lazysizes и sizes="auto" — он дает вам почти полностью автоматизированные адаптивные изображения.
Системы управления контентом
WordPress был одним из первых, кто внедрил нативную адаптивную разметку изображений, и API постепенно улучшался с момента его появления в WordPress 4.4 с поддержкой WebP и контролем над типом вывода MIME. Ядро WordPress предназначено для использования PHP-расширения ImageMagick (или, при его отсутствии, библиотеки GD ).
Когда изображение загружается через интерфейс администратора WordPress, это исходное изображение используется для создания файлов для пользователя на сервере почти так же, как и на локальном компьютере. По умолчанию любое изображение, выводимое WordPress, будет иметь сгенерированный атрибут srcset на основе размеров изображения, настроенных в вашей теме .
Двумя ключевыми параметрами, которые можно настроить для создаваемых изображений, являются качество сжатия и тип вывода MIME .
Например, чтобы установить качество сжатия по умолчанию 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 полностью понимает все альтернативные вырезки и кодировки, которые он генерирует из загруженного изображения, он может предоставлять вспомогательные функции, такие как wp_get_attachment_image_srcset() для получения полного сгенерированного значения srcset вложения изображения.
Как вы, вероятно, уже догадались, работа с атрибутом sizes немного сложнее. В отсутствие какой-либо информации о том, как изображения будут использоваться в макете, WordPress в настоящее время по умолчанию использует значение sizes , которое фактически говорит: «это изображение должно занимать 100% доступной области просмотра, вплоть до внутреннего размера самого большого источника» — предсказуемое значение по умолчанию, но не правильный для любого реального приложения. Обязательно используйте wp_calculate_image_sizes() для установки атрибутов sizes , соответствующих контексту, в ваших шаблонах.
Конечно, существует бесчисленное множество плагинов WordPress, предназначенных для ускорения современных рабочих процессов с изображениями как для команд разработчиков, так и для пользователей. Возможно, самое интересное то, что такие плагины, как Site Accelerator от Jetpack (ранее «Photon»), могут обеспечивать согласование кодировок на стороне сервера , гарантируя, что пользователи получат наименьшую и наиболее эффективную кодировку, которую может поддерживать их браузер, без необходимости использования <picture> и type шаблон разметки. Это достигается за счет использования сети доставки графического контента — технологии, которую вы можете использовать самостоятельно, независимо от вашей CMS.
Все это также справедливо и для размещенных CMS-решений, таких как Shopify, хотя сами механизмы будут несколько отличаться: они предлагают аналогичные перехватчики для генерации альтернативных источников изображений и соответствующих атрибутов srcset и художественного направления через элемент <picture> .