Image Kit
Полный набор инструментов оптимизации изображений для Vue 3 — ленивая загрузка, переключение форматов, адаптивная арт-дирекция, CLI, CDN-билдеры и модуль Nuxt.
Мощный компонент VImage с оптимизациями
Один компонент заменяет целый набор утилит: ленивая загрузка через IntersectionObserver, плейсхолдеры (Blurhash, ThumbHash, LQIP, цвет, шиммер), автоматический srcset, WebP/AVIF, арт-дирекшн, ретраи с экспоненциальной задержкой и плавные CSS-переходы. Поддерживаются focal point, fetchpriority, decoding и приоритетный режим для LCP.
CLI, Vite плагин и Nuxt модуль
CLI обрабатывает изображения на этапе сборки: ресайз, конвертация в WebP/AVIF, генерация LQIP и BlurHash/ThumbHash, запись TypeScript-манифеста. Vite-плагин запускает обработку при сборке и в режиме разработки. Nuxt-модуль автоматически регистрирует компонент и все композаблы, интегрируясь с рантайм-конфигом.
CDN адаптеры и автоопределение
Готовые URL-билдеры для 12 провайдеров (Cloudinary, imgix, Bunny, Sanity, Storyblok, Contentful, Vercel, Cloudflare, ImageKit, TwicPics, Netlify, Gumlet) с единым интерфейсом .url() и .srcset(). Функция autoLoader() определяет CDN по хосту и применяет адаптер автоматически, а VImage с пропом cdn делает это прямо в шаблоне.
Гибкие композаблы и директивы
useImage даёт headless-управление состоянием загрузки и атрибутами для кастомной разметки. v-lazy-img загружает фоновые изображения при входе в область видимости с поддержкой плейсхолдеров. useBackgroundImage добавляет lazy + responsive через CSS image-set(). useImagePreloader предзагружает изображения до навигации.
Производительность и SSR-безопасность
Встроенные механизмы: приоритетная загрузка (fetchpriority), декодирование (decoding), Network Information API (saveData), предзагрузка через generatePreloadLink и useImagePreloader. Пул общих IntersectionObserver для экономии ресурсов. Все компоненты и утилиты безопасны для SSR — на сервере рендерится обычный <img>, а вся клиентская логика активируется после гидратации.