Cómo optimizar imágenes para la velocidad web (WebP vs AVIF) | We.Inc
Elige el formato correcto, redimensiona con srcset y aplica carga diferida a las imágenes adecuadas, nunca a la principal. Incluye un generador de marcado para picture, srcset y fetchpriority.
Cómo optimizar imágenes para una página web
Optimizar imágenes se reduce a cuatro pasos: elegir el formato que encaja con la imagen, exportar solo los anchos en píxeles que necesita el diseño, comprimir cada archivo y controlar cuándo se carga. Sirve AVIF o WebP con JPEG de respaldo, indica los anchos en srcset, aplica carga diferida a las imágenes bajo el pliegue y, en cambio, da a la imagen principal fetchpriority high.
Qué formato para cada imagen
Imagen
Mejor formato
Respaldo
Fotografía
AVIF o WebP
JPEG
Captura de pantalla con texto
WebP sin pérdida o PNG
PNG
Logo, icono, formas simples
SVG
PNG
Animación corta
Vídeo (MP4 o WebM)
WebP animado
Las imágenes suelen ser la parte más pesada de una página, y la imagen principal es a menudo el elemento que se mide para el Largest Contentful Paint. La mayor parte del ahorro viene de ajustes que eliges una sola vez: formato, anchos, calidad y forma de carga. El generador de abajo escribe el marcado correcto para esas decisiones, y la lista de comprobación posterior cubre el resto.
Decide el formato con la tabla: fotos a AVIF o WebP, gráficos planos a SVG.
Redimensiona a entre tres y cinco anchos que cubran desde teléfonos hasta pantallas grandes.
Comprime cada archivo y revisa el resultado a tamaño completo en busca de desenfoque y bandas.
Genera el marcado con el generador, marcando la imagen principal como alta prioridad y el resto como diferidas.
Haz una prueba de velocidad de la página y revisa las auditorías relacionadas con imágenes para confirmarlo.
Nunca apliques carga diferida a la imagen principal ni a ninguna imagen visible en el primer pintado; web.dev advierte que eso retrasa el Largest Contentful Paint.
Define siempre width y height para que el navegador reserve el espacio y el diseño no se desplace.
Elimina los metadatos de la cámara al exportar; los datos de ubicación y de dispositivo añaden bytes y pueden filtrar información privada.
Usa un fondo CSS solo para decoración; las imágenes de contenido van en etiquetas img con texto alternativo.
Compara los ajustes de calidad a ojo con zoom al 100%, porque el número adecuado cambia de un codificador a otro.
Preguntas frecuentes
WebP vs AVIF: ¿cuál debo usar?
Ambos superan a JPEG en fotografías. AVIF es el formato más reciente y a menudo comprime más, mientras que WebP codifica más rápido y lleva más tiempo con soporte. Un patrón seguro es un elemento picture que ofrezca primero AVIF, luego WebP y después un JPEG en la etiqueta img para todo lo más antiguo.
¿Qué hace el atributo sizes?
Le dice al navegador con qué ancho se dibujará la imagen, antes de que se calcule el diseño, para que pueda elegir el archivo correcto del srcset. Sin sizes, el navegador supone que la imagen ocupa todo el viewport y puede descargar un archivo mucho más grande de lo necesario.
¿Todas las imágenes deben usar loading lazy?
Solo las que están bajo el pliegue. La carga diferida espera hasta que el navegador sabe dónde está la imagen, un retraso que no quieres en nada que la gente vea de inmediato.
¿Cuánto debo comprimir?
Baja la calidad hasta que apenas notes una diferencia a tamaño completo y luego súbela un punto. Las fotos con mucho detalle disimulan bien la compresión; los degradados suaves, los cielos y el texto muestran artefactos antes.
¿Necesito un plugin o un servicio para optimizar imágenes?
No. Puedes redimensionar y convertir en un editor o con una herramienta gratuita en el navegador, y después escribir el marcado a mano. Los servicios ayudan cuando tienes miles de imágenes o subidas de usuarios que procesar automáticamente.
Primero, el formato
La guía de formatos de web.dev lo resume así: prefiere vectores cuando la imagen son formas y texto, y usa un formato rasterizado moderno para las fotos. PNG conserva cada píxel exactamente, lo que va bien para capturas de pantalla pero hace que las fotos pesen demasiado sin necesidad.
El elemento picture te permite ofrecer formatos nuevos sin romper los navegadores antiguos. El navegador toma la primera source cuyo tipo entiende y, si no, recurre a la img del interior.
El tamaño justo en cada pantalla
web.dev señala que enviar imágenes de tamaño escritorio a los teléfonos puede consumir de dos a cuatro veces más datos de los necesarios, y sugiere entre tres y cinco tamaños por imagen. Enuméralos con descriptores de ancho en srcset y describe el diseño en sizes.
Mide el ancho renderizado en tu diseño en lugar de adivinarlo. Una tarjeta que ocupa un tercio de la pantalla en escritorio y todo el ancho en teléfonos necesita un valor sizes que diga exactamente eso.
Orden de carga
La carga diferida ahorra ancho de banda en páginas largas, así que pon loading lazy en las imágenes de más abajo. Para la imagen principal visible sin desplazarse, añade fetchpriority high para que se pida antes que los archivos menos importantes.
decoding async permite al navegador pintar el texto antes de terminar de decodificar una imagen grande. Es una sugerencia, y los navegadores pueden ignorarla.
Lista de comprobación para optimizar imágenes
Qué revisar y por qué
Comprobación
Cómo
Por qué ayuda
Formato moderno
picture con sources AVIF y WebP
Archivos más pequeños con el mismo aspecto
Anchos adaptables
srcset con descriptores w más sizes
Los teléfonos se saltan los archivos de tamaño escritorio
Compresión
Calidad ajustada a ojo según el tipo de imagen
Menos bytes por píxel
Dimensiones
Atributos width y height
Evita los desplazamientos del diseño
Carga diferida
loading="lazy" solo bajo el pliegue
Ahorra datos en páginas largas
Prioridad de la imagen principal
fetchpriority="high" en la imagen principal
Largest Contentful Paint más rápido
Texto alternativo
Describe las imágenes de contenido; alt vacío para las decorativas
Accesibilidad y búsqueda de imágenes
Patrones de marcado para copiar
AVIF y WebP con JPEG de respaldo
El navegador usa el primer tipo de source que admite. La img lleva el tamaño, el texto alternativo y las indicaciones de carga para todos los formatos.
Redimensionar y convertir por lotes con sharp
Un pequeño script de Node con el paquete sharp: cada JPEG de ./src se convierte en tres anchos WebP en ./out.
Terraza de cedro con banco integrado al atardecer
Generador de marcado de imágenes
Define el nombre del archivo, los anchos, los formatos y dónde va la imagen en la página. El generador escribe el marcado picture e img con las indicaciones de carga correctas.