Optimización de imágenes: carga diferida y formato WebP
Añada loading=lazy a las imágenes, sirva los formatos modernos WebP y AVIF, use imágenes adaptables con srcset y sizes, y establezca un ancho y una altura explícitos para evitar cambios de diseño.
Optimización de imágenes: carga diferida y formato WebP es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Las imágenes dominan el peso de la página
Una página web mediana pesa alrededor de 2 MB, y las imágenes representan aproximadamente la mitad. Optimizar las imágenes es la tarea de rendimiento con mayor impacto.
Formatos modernos: WebP y AVIF
WebP ocupa entre un 25 y un 35 % menos que JPEG con una calidad similar y es compatible con todos los navegadores modernos. AVIF ocupa aún menos (un 50 % menos), pero tarda más en codificarse. Utilice ambos con una alternativa de reserva.
El elemento picture
Utilice <picture> para servir AVIF si es compatible, después WebP y, por último, JPEG como alternativa final.
<picture>
<source srcset="/photo.avif" type="image/avif">
<source srcset="/photo.webp" type="image/webp">
<img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>Carga diferida nativa
Añada loading="lazy" a las imágenes que estén por debajo del límite visible. El navegador retrasa la carga hasta que la imagen se acerca al viewport; no se necesita JavaScript.
<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">
<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">Imágenes adaptables con srcset y sizes
Sirva imágenes más pequeñas en pantallas pequeñas. srcset enumera imágenes candidatas con sus anchos; sizes indica al navegador qué ancho ocupa la imagen en cada breakpoint.
<img
src="/photo-800.jpg"
srcset="/photo-400.jpg 400w,
/photo-800.jpg 800w,
/photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="" width="800" height="600">Por qué establecer width y height explícitos
El navegador reserva espacio basándose en los atributos width/height, lo que evita los cambios de diseño cuando llega la imagen. Los navegadores modernos calculan automáticamente el aspect-ratio a partir de estos atributos.
decoding="async"
Añada decoding="async" para permitir que el navegador decodifique la imagen fuera del hilo principal y lo deje libre para renderizar otro contenido.
<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">CDN de imágenes
Las CDN de imágenes (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) transforman las imágenes sobre la marcha: cambian su tamaño, las convierten a WebP/AVIF, las comprimen y las sirven desde cachés perimetrales.
<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">Componente Image de Next.js
El <Image> de Next.js gestiona de forma integrada el srcset adaptable, la conversión a WebP, la carga diferida y el marcador de posición desenfocado.
import Image from 'next/image';
<Image
src="/photo.jpg"
alt="Description"
width={800}
height={600}
placeholder="blur"
priority={isHero}
/>Compresión de JPEG y PNG
Si no puede cambiar a WebP, comprima al menos las imágenes: utilice Squoosh (squoosh.app) para imágenes puntuales, ImageOptim para procesar lotes o sharp en un script de compilación.
SVG para iconos y logotipos
Utilice SVG para iconos, logotipos y cualquier gráfico vectorial. Los SVG se escalan perfectamente, ocupan muy poco y se pueden aplicar estilos con CSS. Inserte en línea los SVG pequeños para evitar una solicitud HTTP adicional.
Comprobación rápida
¿Qué atributo HTML indica al navegador que retrase la carga de una imagen hasta que se acerque al viewport?
Resumen: optimización de imágenes
Utilice formatos modernos (AVIF, WebP) mediante el elemento picture. Añada loading="lazy" a las imágenes que estén por debajo del límite visible y fetchpriority="high" a la imagen principal. Establezca width/height explícitos para evitar el CLS. Utilice srcset/sizes para las imágenes adaptables. Las CDN de imágenes automatizan la transformación. Image de Next.js lo gestiona todo. Use SVG para los iconos.
Preguntas frecuentes
¿La lección «Optimización de imágenes: carga diferida y formato WebP» es gratis?
Sí — el texto completo de «Optimización de imágenes: carga diferida y formato WebP» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Optimización de imágenes: carga diferida y formato WebP»?
Añada loading=lazy a las imágenes, sirva los formatos modernos WebP y AVIF, use imágenes adaptables con srcset y sizes, y establezca un ancho y una altura explícitos para evitar cambios de diseño. Practicas Frontend 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 Frontend Academy?
No se requiere experiencia previa. Frontend 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 3 de 4.
¿Cuánto tiempo toma la lección «Optimización de imágenes: carga diferida y formato WebP»?
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 Frontend Academy?
Sí. Cada lección de Frontend 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
- Core Web Vitals: LCP FID CLS
- Auditorías y puntuación de Lighthouse
- Optimización de imágenes: carga diferida y formato WebP
- División de código y rutas diferidas