Optimización de imágenes con @sveltejs/enhanced-img
Sirva imágenes de tamaño adecuado y de nueva generación con el componente enhanced:img.
Optimización de imágenes con @sveltejs/enhanced-img es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Optimización de imágenes
El plugin @sveltejs/enhanced-img genera imágenes adaptables en formatos modernos durante la compilación.
Instalación
Añádalo a las dependencias de desarrollo y regístrelo en la configuración de Vite.
npm install -D @sveltejs/enhanced-imgConfigurar Vite
Añada el plugin a vite.config.js.
import { enhancedImages } from "@sveltejs/enhanced-img/vite";
plugins: [enhancedImages(), sveltekit()]Usar el componente
Importe una imagen con la consulta especial y use <enhanced:img>.
import Hero from "./hero.jpg?enhanced";
<enhanced:img src={Hero} alt="Hero" />srcset automático
El plugin genera varios tamaños y formatos (AVIF, WebP) para srcset.
Carga diferida
Añada loading="lazy" a las imágenes que estén por debajo del área visible inicial.
<enhanced:img src={Hero} alt="..." loading="lazy" />Relación de aspecto
El plugin incluye el ancho y el alto para evitar cambios en el diseño.
Alojamiento en CDN
Para imágenes dinámicas, considere Cloudinary, Imgix o Image Optimization de Vercel para cambiar el tamaño durante la ejecución.
Formatos modernos
AVIF y WebP reducen el tamaño de los archivos entre un 30 y un 70 % frente a JPEG/PNG.
Impacto en el rendimiento
La optimización de imágenes suele ser la mejora individual más importante del rendimiento en un sitio de contenido.
Coste de compilación
El procesamiento de imágenes prolonga los tiempos de compilación. Almacene en caché el resultado para las compilaciones incrementales.
Comprobación rápida
¿Qué genera enhanced-img?
Resumen
Use @sveltejs/enhanced-img para generar imágenes adaptables durante la compilación, con formatos modernos y srcset.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Optimización de imágenes con @sveltejs/enhanced-img» es gratis?
Sí — el texto completo de «Optimización de imágenes con @sveltejs/enhanced-img» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Optimización de imágenes con @sveltejs/enhanced-img»?
Sirva imágenes de tamaño adecuado y de nueva generación con el componente enhanced:img. Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Optimización de imágenes con @sveltejs/enhanced-img»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- División de código e importaciones dinámicas
- Optimización de imágenes con @sveltejs/enhanced-img
- Carga diferida de componentes
- Creación de perfiles de aplicaciones SvelteKit