Оптимизация изображений в pipeline

Интеграция изображений в Markdown

Markdown-файлы часто содержат изображения, которые напрямую вставляются через синтаксис ![alt](url). Remark и Rehype позволяют не только обрабатывать текст, но и модифицировать изображения на этапе компиляции в HTML, что открывает возможности для оптимизации:

  • Изменение размеров. Через плагин remark-images или собственные трансформации можно автоматически выставлять width и height для <img>, уменьшая количество переработки браузером.
  • Lazy loading. Добавление атрибута loading="lazy" снижает время первичной загрузки страниц с большим количеством медиа.
  • WebP и современные форматы. Использование Rehype для конвертации исходных PNG или JPEG в WebP позволяет уменьшить размер файла без потери качества.

Плагины для автоматической оптимизации

Remark и Rehype поддерживают систему плагинов, что делает pipeline гибким:

  1. remark-images – автоматически преобразует стандартные Markdown-изображения в HTML <img> с базовыми атрибутами.
  2. rehype-img-size – вычисляет размеры изображений на основе локальных файлов и вставляет их в HTML.
  3. rehype-picture – создает адаптивные элементы <picture> с источниками для разных форматов и разрешений.
  4. remark-responsive-images – добавляет поддержку адаптивной загрузки через srcset.

Каждый плагин можно конфигурировать, определяя размеры, форматы и пороги качества.

Трансформация изображений в pipeline

Pipeline Remark → Rehype обычно строится следующим образом:

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
import rehypeImgSize from 'rehype-img-size';
import remarkFrontmatter from 'remark-frontmatter';

const processor = unified()
  .use(remarkParse)
  .use(remarkFrontmatter)
  .use(remarkRehype)
  .use(rehypeImgSize, { dir: 'public/images' })
  .use(rehypeStringify);

const result = await processor.process(markdownContent);

В этом примере rehype-img-size анализирует локальные файлы в папке public/images и автоматически добавляет атрибуты width и height.

Адаптивные изображения через <picture>

Для оптимизации под мобильные устройства и дисплеи с высокой плотностью пикселей важно формировать <picture>:

<picture>
  <source srcset="image-1x.webp 1x, image-2x.webp 2x" type="image/webp">
  <source srcset="image-1x.jpg 1x, image-2x.jpg 2x" type="image/jpeg">
  <img src="image-1x.jpg" alt="Пример изображения" loading="lazy">
</picture>

Создание таких элементов можно автоматизировать с помощью плагинов, которые преобразуют стандартные <img> из Markdown в <picture> с различными форматами и разрешениями.

Компрессия и кэширование

Оптимизация изображений на уровне pipeline включает:

  • Сжатие без потери качества с помощью sharp или imagemin. Можно интегрировать как отдельный шаг перед вставкой в Markdown.
  • Кэширование преобразованных изображений. Для ускорения сборки больших сайтов генерированные файлы лучше сохранять на диск и проверять хэш исходного файла перед повторной обработкой.
  • Настройка качества. В плагинах можно указать параметр качества JPEG/PNG/WebP, например quality: 80, что дает баланс между весом файла и визуальным качеством.

Обработка внешних изображений

Когда Markdown ссылается на внешние изображения:

  • Используются загрузчики (fetch) и временное сохранение локально для дальнейшей обработки.
  • Плагины могут автоматически конвертировать внешние URL в локальные оптимизированные версии.
  • Можно генерировать CDN-ссылки для ускорения доставки.

Lazy loading и декодирование

Атрибуты <img> и <picture>:

  • loading="lazy" откладывает загрузку до момента появления изображения в зоне видимости.
  • decoding="async" позволяет браузеру декодировать изображение параллельно с рендером страницы.
  • fetchpriority="low" для менее важных изображений снижает приоритет сетевых запросов.

Настройка pipeline для больших проектов

Для крупных сайтов с сотнями Markdown-файлов рекомендуется:

  • Разделять этапы обработки: сначала анализ и оптимизация изображений, затем конвертация Markdown в HTML.
  • Использовать кэширование размеров и хэшей, чтобы не пересчитывать атрибуты на каждом билде.
  • Параллельно запускать тяжелые задачи, например конвертацию в WebP, используя worker threads или отдельный build-step.

Комбинация с другими инструментами

Remark и Rehype могут работать вместе с:

  • Next.js / Astro – генерация статических сайтов с интеграцией оптимизации изображений.
  • Vite / Webpack – подключение плагинов для динамической обработки изображений при сборке.
  • CMS – автоматическая генерация адаптивных изображений из контента, полученного через API.

Такой подход позволяет строить полностью автоматизированный pipeline, где каждый Markdown-файл сразу превращается в готовую для веба страницу с оптимизированными изображениями.

Оглавление