Guías
Todo lo que necesitas saber para servir imágenes ligeras sin sacrificar calidad: formatos, compresión, marcado responsive y métricas de rendimiento.
- Formatos
WebP vs AVIF vs JPEG XL: qué formato usar en 2026
Comparativa práctica de WebP, AVIF y JPEG XL: compresión, calidad, velocidad, transparencia y compatibilidad. Con recomendaciones para cada tipo de imagen.
4 min de lecturaLeer guía - Rendimiento
Cómo mejorar el LCP optimizando imágenes
El Largest Contentful Paint suele ser una imagen. Aprende a medirlo, priorizarlo con fetchpriority y preload, reducir su peso y evitar los errores más comunes.
4 min de lecturaLeer guía - HTML
Imágenes responsive con srcset y sizes
Aprende a usar srcset con descriptores w y x, a calcular el atributo sizes correctamente y a elegir los anchos de tus variantes para no desperdiciar bytes.
3 min de lecturaLeer guía - HTML
El elemento picture y los formatos de respaldo
Cómo usar <picture> para servir AVIF, WebP y JPEG XL con respaldo en JPEG, hacer dirección de arte por pantalla y evitar los errores más comunes.
2 min de lecturaLeer guía - Rendimiento
Lazy loading y fetchpriority en imágenes
Cómo funcionan loading="lazy", fetchpriority y decoding="async", qué imágenes deben cargarse primero y los errores que empeoran el LCP.
3 min de lecturaLeer guía - Fundamentos
Compresión con pérdida y sin pérdida, explicada
Qué diferencia hay entre compresión con y sin pérdida, cómo funcionan JPEG, WebP, AVIF y PNG por dentro, y qué es el submuestreo de color 4:2:0 frente a 4:4:4.
4 min de lecturaLeer guía - Frameworks
Optimizar imágenes en Next.js
Cómo configurar next/image con AVIF y WebP, usar priority y sizes correctamente, cuándo preoptimizar imágenes estáticas y cómo evitar costes de optimización.
3 min de lecturaLeer guía - CMS
Optimizar imágenes en WordPress
Cómo subir imágenes optimizadas a WordPress, usar WebP y AVIF de forma nativa, aprovechar srcset automático y evitar los errores de lazy loading en la imagen destacada.
3 min de lecturaLeer guía - Privacidad
Metadatos EXIF y privacidad en imágenes
Qué información guardan los metadatos EXIF (ubicación GPS, cámara, fecha), qué riesgos tiene publicarlos y cómo eliminarlos antes de subir imágenes a la web.
3 min de lecturaLeer guía - Rendimiento
Checklist de imágenes para Core Web Vitals
Lista de comprobación de imágenes para mejorar LCP, CLS e INP: formatos, dimensiones, prioridad, lazy loading, width/height y herramientas de medición.
1 min de lecturaLeer guía - Rendimiento
Placeholders de imagen: LQIP, BlurHash, ThumbHash y color dominante
Cómo mostrar algo útil mientras cargan las imágenes sin empeorar el rendimiento. Comparativa de técnicas, implementación en HTML, Next.js y React, y errores que debes evitar.
4 min de lecturaLeer guía - HTML
Guía de favicons 2026: qué tamaños y archivos necesitas de verdad
Favicon.ico, SVG, apple-touch-icon, iconos PWA y maskable explicados. Qué archivos crear, cómo enlazarlos en HTML, Next.js y WordPress y cómo hacer que Google muestre tu icono.
4 min de lecturaLeer guía