Оптимизация изображений с @sveltejs/enhanced-img
Отдавайте изображения правильного размера нового поколения с компонентом enhanced:img.
«Оптимизация изображений с @sveltejs/enhanced-img» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Оптимизация изображений
Плагин @sveltejs/enhanced-img во время сборки создаёт адаптивные изображения в современных форматах.
Установка
Добавьте пакет в зависимости для разработки и зарегистрируйте его в конфигурации Vite.
npm install -D @sveltejs/enhanced-imgНастройка Vite
Добавьте плагин в vite.config.js.
import { enhancedImages } from "@sveltejs/enhanced-img/vite";
plugins: [enhancedImages(), sveltekit()]Использование компонента
Импортируйте изображение со специальным запросом и используйте <enhanced:img>.
import Hero from "./hero.jpg?enhanced";
<enhanced:img src={Hero} alt="Hero" />Автоматический srcset
Плагин создаёт несколько размеров и форматов (AVIF, WebP) для srcset.
Ленивая загрузка
Добавьте loading="lazy" для изображений, расположенных ниже области первой прокрутки.
<enhanced:img src={Hero} alt="..." loading="lazy" />Соотношение сторон
Плагин добавляет ширину и высоту, чтобы предотвратить сдвиги макета.
Размещение в CDN
Для динамических изображений рассмотрите Cloudinary, Imgix или оптимизацию изображений Vercel для изменения размера во время выполнения.
Современные форматы
AVIF и WebP уменьшают размер файлов на 30–70% по сравнению с JPEG/PNG.
Влияние на производительность
Оптимизация изображений часто даёт наибольший единичный прирост производительности на контентном сайте.
Стоимость сборки
Обработка изображений увеличивает время сборки. Кэшируйте результат для инкрементальных сборок.
Быстрая проверка
Что создаёт enhanced-img?
Итоги
Используйте @sveltejs/enhanced-img для создания адаптивных изображений во время сборки с современными форматами и srcset.
Часто задаваемые вопросы
Урок «Оптимизация изображений с @sveltejs/enhanced-img» бесплатный?
Да — полный текст урока «Оптимизация изображений с @sveltejs/enhanced-img» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Оптимизация изображений с @sveltejs/enhanced-img»?
Отдавайте изображения правильного размера нового поколения с компонентом enhanced:img. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Оптимизация изображений с @sveltejs/enhanced-img»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Разделение кода и динамический импорт
- Оптимизация изображений с @sveltejs/enhanced-img
- Отложенная загрузка компонентов
- Профилирование приложений SvelteKit