Cómo optimizar imágenes para tu sitio web: guía práctica
Las imágenes suelen representar una parte importante de la transferencia y también pueden afectar al descubrimiento, decodificación, diseño y Largest Contentful Paint. Optimizar puede aportar mejoras, pero ningún ahorro fijo ni resultado de ranking sirve para todas las páginas. Este es un flujo que puedes medir paso a paso.
Por qué la optimización de imágenes importa más que nunca
El informe de peso de página de HTTP Archive muestra que las imágenes siguen siendo relevantes en muchas páginas, aunque las medianas cambian. Largest Contentful Paint (LCP) mide cuándo se renderiza el mayor elemento elegible del viewport; suele ser una imagen, pero no siempre.
Los umbrales de LCP publicados por Google clasifican hasta 2.5 segundos como bueno y más de 4 como malo, evaluados en el percentil 75 de visitas. El trabajo con imágenes puede mover una página entre umbrales cuando el recurso LCP es el cuello, pero por sí solo no garantiza aprobar Core Web Vitals ni una posición de búsqueda.
Paso 1: elige el formato correcto
Elegir formato puede afectar mucho al tamaño y capacidades. La comparación es cualitativa porque los benchmarks dependen de la fuente, codificador, ajustes y objetivo de calidad:
| Formato | Mejor para | Comportamiento del tamaño | Soporte en navegadores |
|---|---|---|---|
| JPEG | Fotos, compatibilidad total | Referência | Muy amplio |
| WebP | Fotos y gráficos | Suele ser eficiente; mide tu codificador | Principales navegadores actuales; comprueba tu público |
| AVIF | Procesos modernos de entrega probados | Puede ser muy eficiente; codificar puede costar más | Principales navegadores actuales; pueden necesitarse respaldos |
| PNG | Logos, iconos, gráficos con texto | Eficiente para algunos gráficos planos; grande para muchas fotos | Muy amplio |
| SVG | Iconos, ilustraciones | Marcado vectorial dependiente del contenido | Amplio en navegadores; sanea SVG no fiable |
WebP es un candidato predeterminado útil para muchos sitios, no una respuesta universal. Si proceso y público admiten AVIF, pruébalo como <source> anterior con WebP o JPEG de respaldo. Puedes convertir JPG a WebP o convertir a AVIF con Vizua; el archivo se procesa en el navegador y no se envía a nuestro servidor.
Para más detalle, consulta el análisis WebP vs AVIF y la explicación de compresión con y sin pérdida.
Paso 2: redimensiona a las dimensiones reales de visualización
Una foto de 4000 × 3000 píxeles mostrada a 800 × 600 contiene muchos más píxeles de los que necesita el hueco. Una pantalla responsiva de alta densidad puede necesitar un candidato mayor, pero enviar el original de cámara suele añadir transferencia y decodificación innecesarias.
El principio es ofrecer candidatos próximos al tamaño y densidad renderizados. Usa srcset y sizes para que el navegador elija y contempla ancho del diseño, densidad del dispositivo, calidad, zoom y dirección artística en vez de fijar un multiplicador “Retina”.
Dimensiones iniciales de ejemplo que debes adaptar al diseño:
- Hero a todo el ancho: empieza por el mayor hueco renderizado y genera candidatos para densidades y puntos relevantes
- Imagen de contenido: corresponde a la columna y a cualquier estado responsivo más ancho
- Miniatura: genera un candidato próximo a cada tamaño de tarjeta en vez de reutilizar la hero
- Avatar: contempla el círculo o cuadrado mostrado, densidad y posible vista de perfil detallada
Usa el redimensionador de imágenes de Vizua para crear candidatos adecuados antes de comprimir. El ahorro depende de los píxeles de origen y destino; mide los archivos generados.
Paso 3: comprime con la calidad adecuada
Después de elegir formato y tamaño, ajusta el codificador. Las escalas de calidad no son lineales ni están normalizadas entre codificadores o formatos. Un valor menor suele intercambiar más información por menos bytes en un codificador con pérdida, pero hay que medir tamaño y cambio visual en el resultado.
Valores recomendados:
- JPEG: 75–85 puede ser un rango inicial conservador para fotos. Las escalas difieren; revisa la salida.
- WebP: 75–80 es un rango inicial, no un equivalente garantizado del valor JPEG.
- AVIF: 60–75 puede ser un rango inicial en algunas herramientas; las escalas y el codificador difieren.
- PNG: prueba primero una compresión sin pérdida más fuerte. Cuantizar la paleta a un máximo de 256 entradas puede ahorrar más, pero reduce colores con pérdida y debe revisarse.
El compresor JPEG de Vizua permite ajustar la calidad y revisar la salida. Para un método detallado, consulta cómo comprimir imágenes sin perder calidad.
Paso 4: sirve las imágenes de forma eficiente
Una buena compresión es solo la mitad del trabajo. Cómo entregas las imágenes al navegador es igual de importante para el rendimiento.
Define las dimensiones de forma explícita
Da a cada <img> valores intrínsecos precisos de width y height, o reserva el hueco con una regla intencional. Así el navegador establece pronto la relación. Reduce movimiento ligado a la imagen, aunque fuentes, contenido inyectado, animaciones y estilos incorrectos aún afectan al Cumulative Layout Shift (CLS).
Aplica lazy-load a las imágenes fuera del área visible
Considera loading="lazy" para imágenes suficientemente fuera del viewport inicial. No lo uses mecánicamente en la probable imagen LCP o contenido necesario de inmediato. Heurísticas, carruseles, impresión, desplazamiento rápido y diseños ocultos exigen pruebas.
Prioriza tu imagen hero
No difieras la probable imagen LCP. Considera fetchpriority="high" cuando merezca ancho de banda temprano y asegúrate de que se descubra en el HTML inicial. No asignes alta prioridad de forma amplia; confirma el efecto en una traza y datos de campo.
Usa imágenes responsivas
srcset y sizes ofrecen candidatos y describen el hueco esperado. El navegador considera viewport, densidad, caché e implementación. Asegúrate de que sizes coincida con el diseño real; un valor erróneo puede elegir un candidato demasiado grande o pequeño.
Paso 5: audita y mide con regularidad
La optimización no es una tarea de una sola vez. Cada imagen nueva que añades es una oportunidad para que el rendimiento retroceda.
- PageSpeed Insights: ejecuta PageSpeed Insights en páginas representativas. Revisa LCP de campo y laboratorio por separado y los diagnósticos actuales, sin depender de una etiqueta que puede cambiar.
- Red de DevTools: ordena solicitudes por tamaño y examina imágenes grandes en contexto. Pregunta si dimensiones, formato, compresión, caché y prioridad encajan con su función en vez de imponer un límite universal de KB.
- Automatiza: añade optimización al proceso de compilación para detectar imágenes sobredimensionadas antes de publicar.
Lista de verificación rápida
- Genera y compara variantes adecuadas JPEG, WebP, AVIF, PNG o SVG
- Redimensiona a las dimensiones reales de visualización, sin más ancho del necesario
- Empieza con ajustes conservadores, compara bytes y apariencia y no iguales números de calidad entre formatos
-
Reserva un hueco preciso para cada
<img>, normalmente conwidthyheightintrínsecos -
Considera
fetchpriority="high"para la probable imagen LCP y después mide - Difiere imágenes adecuadas fuera de pantalla; prueba desplazamiento y diseño
- Implementa
srcset/sizespara distribución responsiva - Define presupuestos de rendimiento según página, público y datos de campo
- Elimina metadatos privados innecesarios, pero conserva perfiles de color u otros datos que el flujo necesita; consulta la guía sobre datos EXIF y privacidad
- Audita regularmente con PageSpeed Insights
Preguntas frecuentes
¿Cuál es el mejor formato de imagen para sitios web?
No hay un único formato mejor. JPEG mantiene amplia compatibilidad para fotos; WebP admite modos con y sin pérdida, transparencia y animación; AVIF puede ser eficiente si tu proceso y público lo admiten; PNG sirve para gráficos de bordes nítidos sin pérdida; SVG para arte vectorial de confianza. Genera variantes representativas y elige por tamaño medido, calidad, compatibilidad y funciones.
¿Cuánto ralentizan el sitio las imágenes sin optimizar?
El efecto depende de la página, viewport, red, caché y función de la imagen. Una imagen LCP sobredimensionada puede añadir mucha transferencia y decodificación, pero ningún tamaño se corresponde con un único LCP. Usa Core Web Vitals de campo y una traza de laboratorio para identificar si transferencia, descubrimiento, prioridad, decodificación o renderizado son el cuello real.
¿Debo usar carga diferida en todas las imágenes?
No. Difiere imágenes que empiezan fuera del viewport inicial cuando ayude, pero no la probable imagen LCP. Da alta prioridad de descarga solo a una imagen inicial realmente importante; abusar de las pistas reduce su utilidad. Prueba el resultado porque el diseño, descubrimiento de precarga y selección responsiva también afectan al tiempo.
¿Debo indicar ancho y alto en cada imagen?
En un elemento img de HTML, proporciona ancho y alto intrínsecos correctos cuando sea posible para que el navegador calcule la relación antes de descargar. Un contenedor CSS dimensionado o una regla aspect-ratio también reservan espacio. La clave es un hueco estable y preciso; dimensiones incorrectas o cambios tardíos todavía pueden causar Cumulative Layout Shift.
¿Cómo afecta al SEO optimizar imágenes?
Puede mejorar la experiencia y Core Web Vitals cuando las imágenes son el cuello. Google usa señales de experiencia dentro de un sistema de ranking más amplio, pero una imagen menor no garantiza subir posiciones. Optimiza para usuarios, valida datos de campo y considera calidad, relevancia, rastreabilidad y otros factores SEO.
Optimiza tus imágenes ahora
No requiere cuenta. El archivo se procesa en el navegador y no se envía a nuestro servidor de procesamiento de imágenes.