Изображения: PNG, JPEG, WebP, AVIF, SVG

Parcel рассматривает изображения как полноценные модули в графе зависимостей приложения. Любой файл PNG, JPEG, WebP, AVIF или SVG может быть импортирован напрямую из JavaScript, CSS или HTML, после чего автоматически попадает в процесс сборки, оптимизации и хеширования. Такой подход устраняет необходимость ручной настройки загрузчиков и позволяет использовать единый механизм обработки ассетов.

Общая модель обработки изображений

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

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

Пример импорта в Jav * aScript:

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

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

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

PNG: особенности и поведение в Parcel

PNG используется для изображений с прозрачностью и высокой детализацией. Parcel обрабатывает PNG следующим образом:

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

PNG часто используется для:

  • интерфейсных иконок;
  • логотипов;
  • изображений с альфа-каналом.

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

.icon {
  background-image: url('./icons/settings.png');
}

Parcel автоматически извлекает этот файл в сборку и заменяет путь.

JPEG: сжатие и оптимизация фотографий

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

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

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

Пример:

import photo from './images/photo.jpg';

document.querySelector('img').src = photo;

JPEG особенно эффективен для:

  • фотографий;
  • фоновых изображений;
  • контентных изображений с большим количеством цветов.

WebP: современный формат с высокой степенью сжатия

WebP обеспечивает более эффективное сжатие по сравнению с JPEG и PNG при сохранении качества. Parcel поддерживает WebP как нативный формат и может:

  • использовать WebP напрямую;
  • генерировать WebP из исходных изображений (при включённой оптимизации);
  • обеспечивать fallback для старых браузеров.

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

import image from './images/hero.webp';

const el = document.createElement('img');
el.src = image;

WebP применяется для:

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

AVIF: современный формат высокой компрессии

AVIF является одним из самых эффективных форматов с точки зрения сжатия при сохранении качества. Parcel поддерживает AVIF в современных сборках и способен интегрировать его в мультформатные стратегии.

Особенности AVIF в Parcel:

  • максимальная степень сжатия среди популярных форматов;
  • поддержка альфа-канала;
  • возможность автоматической генерации fallback-форматов;
  • использование в связке с <picture>.

Пример:

<picture>
  <source srcset="./image.avif" type="image/avif">
  <source srcset="./image.webp" type="image/webp">
  <img src="./image.jpg" alt="example">
</picture>

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

SVG: векторная графика как модуль

SVG в Parcel может использоваться несколькими способами:

1. Как URL-ресурс

import icon from './icon.svg';

img.src = icon;

В этом случае SVG обрабатывается как обычный файл.

2. Инлайн-строка

Parcel может встроить SVG прямо в код как строку или Data URL, если это требуется оптимизацией.

3. Как React-компонент (через конфигурацию)

При использовании соответствующих трансформеров SVG может быть преобразован в компонент:

import { ReactComponent as Logo } from './logo.svg';

export function Header() {
  return <Logo />;
}

SVG остаётся наиболее гибким форматом благодаря масштабируемости без потери качества.

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

Parcel поддерживает прямую работу с изображениями внутри HTML-файлов:

<img src="./images/banner.jpg" alt="banner">
<link rel="icon" href="./favicon.png">

Все пути автоматически резолвятся относительно файловой системы проекта и заменяются на итоговые URL при сборке.

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

CSS-файлы также являются частью графа зависимостей Parcel:

.hero {
  background-image: url('./hero.avif');
}

Parcel:

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

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

Parcel использует встроенную систему трансформации ассетов, которая может включать:

  • сжатие PNG и JPEG;
  • генерацию WebP и AVIF;
  • удаление метаданных;
  • оптимизацию SVG (удаление лишних атрибутов).

Оптимизация включается автоматически в production-сборке.

Content hashing и кеширование

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

logo.8f3a9c1d.png
photo.a12bc45e.jpg

Это обеспечивает:

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

Responsive images и srcset

Parcel не ограничивает использование стандартных HTML-механизмов адаптивных изображений:

<img
  src="./image-800.jpg"
  srcset="./image-400.jpg 400w, ./image-800.jpg 800w, ./image-1600.jpg 1600w"
  alt="responsive"
/>

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

Picture element и мультформатность

Поддержка современных форматов реализуется через <picture>:

<picture>
  <source srcset="./image.avif" type="image/avif">
  <source srcset="./image.webp" type="image/webp">
  <img src="./image.jpg" alt="fallback">
</picture>

Parcel:

  • обрабатывает каждый <source>;
  • оптимизирует файлы по отдельности;
  • сохраняет корректные ссылки;
  • обеспечивает согласованность путей.

Публичные ресурсы и статические файлы

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

/public/images/static.png

Такие файлы:

  • не проходят трансформацию;
  • копируются без изменений;
  • доступны по фиксированному URL.

Использование:

<img src="/images/static.png">

Автоматическое определение форматов

Parcel анализирует окружение и может:

  • выбирать оптимальный формат для production;
  • сохранять оригинал для разработки;
  • применять fallback-цепочки;
  • учитывать поддержку браузеров.

SVG-спрайты и агрегация

При большом количестве SVG Parcel позволяет объединять их в спрайты (через дополнительные плагины или трансформеры), что снижает количество HTTP-запросов и ускоряет загрузку интерфейсов.

Взаимодействие изображений с JavaScript API

Импорт изображения в JavaScript всегда возвращает URL:

import avatar from './avatar.png';

fetch(avatar).then(res => res.blob());

Это позволяет использовать изображения:

  • в canvas;
  • в Web Workers;
  • в динамических загрузчиках;
  • в генерации blob-URL.

Особенности обработки в режиме разработки

В dev-режиме Parcel:

  • не агрессивно сжимает изображения;
  • быстро пересобирает изменения;
  • использует кеширование в памяти;
  • обновляет URL без полной перезагрузки страницы (HMR).

Поведение при импорте больших изображений

При работе с крупными файлами Parcel:

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

Итоговая модель работы с изображениями

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

  • PNG — для прозрачной графики;
  • JPEG — для фотографий;
  • WebP — для оптимизации веса;
  • AVIF — для максимального сжатия;
  • SVG — для векторной графики и интерфейсов.

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

Оглавление