Импорт изображений в JS и CSS

В Parcel изображения рассматриваются как полноценные модули, которые могут быть импортированы в JavaScript и использованы в стилях или разметке. Такой подход устраняет необходимость ручного копирования ассетов, настройки путей и дополнительной сборки ресурсов.

При обработке графических файлов Parcel выполняет несколько задач автоматически:

  • анализ зависимостей;
  • оптимизация и сжатие изображений;
  • генерация хэшей для кэширования;
  • преобразование путей под итоговую сборку.

Поддерживаются форматы: PNG, JPEG, WebP, GIF, SVG, а также дополнительные форматы через плагины.

Импорт изображений в JavaScript

Изображения могут быть импортированы напрямую в JS-файлы, аналогично модулям:

import logo from './assets/logo.png';

const img = document.createElement('img');
img.src = logo;

document.body.appendChild(img);

В процессе сборки Parcel заменяет импорт на итоговый URL, указывающий на оптимизированный файл в директории сборки.

Особенности обработки:

  • путь к файлу преобразуется в хэшированный URL;
  • изображение перемещается в build-выход;
  • выполняется оптимизация размера (при включённой конфигурации).

Динамическое использование изображений

Parcel поддерживает динамические импорты через шаблонные строки и выражения, если они могут быть статически проанализированы:

function loadIcon(name) {
  return import(`./icons/${name}.png`).then(module => {
    const img = new Image();
    img.src = module.default;
    return img;
  });
}

Такой подход используется для ленивой загрузки графики, особенно в интерфейсах с большим количеством иконок.

Важно учитывать, что динамические пути должны оставаться предсказуемыми для анализа на этапе сборки.

Использование изображений в CSS

В стилях изображения подключаются через стандартную функцию url(). Parcel автоматически обнаруживает такие зависимости и обрабатывает их как модули.

.header {
  background-image: url('./images/header-bg.jpg');
}

При сборке:

  • путь внутри CSS заменяется на итоговый URL;
  • файл изображения перемещается в build-директорию;
  • добавляется хэширование для предотвращения проблем кэширования.

Parcel также поддерживает относительные и абсолютные пути внутри CSS-модулей.

Обработка изображений в CSS Modules

При использовании CSS Modules поведение остаётся аналогичным, но добавляется изоляция классов:

.card {
  background-image: url('../assets/card.png');
}

Parcel обрабатывает:

  • локализацию классов;
  • пересчёт путей;
  • интеграцию с JavaScript-импортом стилей.

В результате изображение остаётся связанным с конкретным компонентом, без конфликтов глобальных путей.

Инлайнинг изображений и base64

Parcel может автоматически преобразовывать небольшие изображения в base64 строки для уменьшения количества HTTP-запросов.

Условия инлайнинга:

  • размер файла ниже порогового значения (по умолчанию ~8–10 KB);
  • включён соответствующий режим оптимизации.

Пример результата:

const icon = "data:image/png;base64,iVBORw0KGgoAAAANS...";

Такой подход применяется преимущественно для мелких иконок и UI-элементов.

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

В процессе сборки Parcel выполняет оптимизацию через встроенные или подключаемые оптимизаторы:

  • сжатие PNG без потери качества;
  • оптимизация JPEG (прогрессивная загрузка);
  • удаление метаданных (EXIF);
  • генерация WebP-версий при поддержке конфигурации.

Оптимизация снижает размер итогового бандла без изменения исходных файлов проекта.

Хэширование и кэширование

Каждое изображение в production-сборке получает уникальный хэш в имени файла:

logo.8f3a91c2.png

Такой механизм решает несколько задач:

  • предотвращение проблем с устаревшим кэшем;
  • автоматическое обновление ресурсов при изменении файла;
  • стабильное распределение ассетов в CDN.

Ссылка на изображение в коде автоматически синхронизируется с новым именем.

Изображения в HTML через Parcel

Parcel также обрабатывает изображения внутри HTML-файлов:

<img src="./assets/photo.jpg" alt="photo">

При сборке:

  • путь переписывается;
  • файл переносится в build;
  • добавляется хэширование;
  • обеспечивается корректная относительная структура.

Это позволяет использовать HTML как полноценную точку входа без ручной настройки ассетов.

SVG как модуль

SVG-файлы могут использоваться двумя способами:

  1. как URL (обычное изображение);
  2. как инлайн-строка или компонент (при соответствующей настройке).

Пример использования как URL:

import icon from './icon.svg';

const img = new Image();
img.src = icon;

SVG может быть оптимизирован и минимизирован аналогично растровым изображениям.

Работа с публичными директориями

Parcel поддерживает директории, содержимое которых копируется без изменений. Такие ресурсы не проходят через систему импорта и используются как статические файлы:

/public/images/banner.jpg

Доступ к ним осуществляется напрямую через URL:

<img src="/images/banner.jpg">

Такой подход применяется для файлов, не требующих обработки сборщиком.

Поведение в режиме разработки

В dev-режиме Parcel:

  • не выполняет агрессивную оптимизацию;
  • сохраняет быстрые обновления через HMR;
  • пересобирает изображения только при изменении исходного файла;
  • предоставляет прямые локальные URL без финального хэширования.

Это ускоряет цикл разработки при работе с графическими ресурсами.

Кэширование и hot reload изображений

При изменении изображения Parcel автоматически:

  • обновляет ссылку в модуле;
  • перезагружает ресурсы в браузере;
  • синхронизирует зависимости компонентов.

Hot Module Replacement обеспечивает обновление интерфейса без полной перезагрузки страницы, включая визуальные ресурсы.

Оглавление