Генераторы сайтов, фреймворки и CMS

Узнайте, как CMS, такие как WordPress, и другие генераторы сайтов могут упростить использование отзывчивых изображений.

Несмотря на то, что автоматизация сжатия изображений как один из этапов процесса разработки, безусловно, является улучшением по сравнению с ручным сохранением альтернативных фрагментов каждого изображения и их ручной оптимизацией с помощью таких инструментов, как Squoosh.app, она имеет ряд ограничений. Например, вы не всегда можете полностью контролировать изображения, используемые на сайте - большинство изображений в Интернете, предназначенных для пользователей, скорее относятся к содержимому, чем к разработке, загружаются пользователями или редакторами, а не хранятся в репозитории вместе с такими активами разработки, как JavaScript и таблицы стилей.

В связи с этим, как правило, возникает необходимость в нескольких процессах управления изображениями: на уровне разработки - для графических активов, используемых при создании и поддержке сайта - фоновых рисунков, иконок, логотипов и т.д., и на уровне использования - для графических активов, создаваемых в процессе использования сайта, например, фотографий, встроенных в пост редакции, или аватара, загруженного пользователем. Хотя контекст может быть разным, конечные цели одинаковы: автоматическое кодирование и сжатие на основе настроек, заданных командой разработчиков.

К счастью, библиотеки обработки изображений, с которыми вы познакомились в процессе локальной разработки, можно использовать в любом контексте. И хотя универсального подхода к разметке изображений не существует, эти системы предоставляют разумные настройки по умолчанию, параметры конфигурации и API-хуки, облегчающие их применение.

Генераторы статических сайтов

По сравнению с программами для выполнения задач, в генераторах статических сайтов, таких как Jekyll или Eleventy, есть некоторое сходство в подходе к работе с изображениями. Использование этих инструментов для создания готового к развертыванию сайта требует управления активами, включая минификацию CSS или транспиляцию и пакетирование JavaScript. Как вы понимаете, это означает, что эти инструменты позволяют обрабатывать графические активы таким же образом, используя многие из библиотек, о которых вы уже узнали.

Официальный image plugin for 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, так как не может знать конечный размер и положение изображения в отрисованной разметке, но он принимает его в качестве входных данных при генерации вашей разметки - еще одна задача для RespImageLint.

Фреймворки

Фреймворки для рендеринга на стороне клиента потребуют использования исполнителя задач или бандлера типа Webpack для самостоятельного редактирования, кодирования и сжатия графических активов. Responsive-loader, например, также использует библиотеку Sharp для пересохранения графических активов. Затем он позволяет "импортировать" изображения в виде объектов:

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 был одним из первых, кто начал использовать собственную разметку отзывчивых изображений, и с момента появления introduced in WordPress 4.4 API постепенно улучшался: появилась поддержка WebP и контроль над типом выходного mime. Ядро WordPress рассчитано на использование расширения ImageMagick PHP (или, при отсутствии такового, библиотеки 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 имеет полное представление обо всех alternate cuts и кодировках, которые он генерирует из загруженного изображения, он может предоставить вспомогательные функции типа wp_get_attachment_image_srcset() для получения полного сгенерированного значения srcset вложенного изображения.

Как вы уже, наверное, догадались, работа с атрибутом sizes несколько сложнее. В отсутствие какой-либо информации о том, как изображения будут использоваться в макете, WordPress по умолчанию использует значение sizes, которое фактически говорит: "Это изображение должно занимать 100% доступного пространства просмотра, вплоть до самого большого размера, присущего источнику" - предсказуемое значение по умолчанию, но не корректное для любого реального применения. Обязательно используйте wp_calculate_image_sizes() для установки в шаблонах контекстно-зависимых атрибутов sizes.

Конечно, существует бесчисленное множество плагинов WordPress, призванных ускорить работу с современными изображениями как для команд разработчиков, так и для пользователей. Возможно, наиболее интересными являются такие плагины, как Jetpack's Site Accelerator (бывший "Photon"), которые обеспечивают серверное согласование кодировок, гарантируя, что пользователи получат наименьшую, наиболее эффективную кодировку, которую способен поддерживать их браузер, без необходимости использования шаблонов разметки <picture> и type. Для этого используется сеть доставки контента изображений - технология, которую вы можете использовать самостоятельно, независимо от вашей CMS.

Все это справедливо и для таких хостинговых CMS, как Shopify, хотя сами механизмы несколько отличаются: предлагаются аналогичные хуки для генерации альтернативных источников изображений и соответствующих атрибутов srcset и художественного оформления с помощью элемента <picture>.

Источник — Site Generators, frameworks, and CMSs

Комментарии