Optimizar imágenes

Cómo optimizar tus imágenes para un sitio web rápido y con impacto visual.

¿Por qué debería optimizar mis imágenes?

Las imágenes suelen ser los archivos más pesados de cualquier sitio web. Las imágenes sin optimizar ralentizan la carga de las páginas, perjudican tu posicionamiento en Google y frustran a los visitantes — sobre todo en conexiones móviles. Las imágenes bien optimizadas cargan más rápido, mejoran la experiencia de usuario y elevan tu puntuación de SEO.

Esto es lo que consigue la optimización de imágenes:

• Carga más rápida — las imágenes optimizadas pueden reducir el tiempo de carga de la página en un 50% o más en comparación con los originales sin comprimir.
• Mejor SEO — Google usa la velocidad de la página como factor de posicionamiento. Las páginas más rápidas posicionan mejor.
• Menos ancho de banda — los archivos más pequeños implican menos transferencia de datos, lo que importa para los visitantes con conexiones de datos limitadas.
• Mejora de las Core Web Vitals — el Largest Contentful Paint (LCP), una de las métricas de rendimiento clave de Google, se ve afectado directamente por el tamaño de las imágenes.

¿Cuáles son los mejores formatos de imagen para la web?

Los distintos formatos de imagen sirven para propósitos diferentes. Elegir el formato adecuado garantiza el mejor equilibrio entre calidad y tamaño de archivo.

• WebP — el formato recomendado para la mayoría de las imágenes web. WebP ofrece una compresión excelente con una pérdida de calidad mínima. Es compatible con todos los navegadores modernos y normalmente produce archivos un 25–35% más pequeños que JPEG con la misma calidad.
• JPEG — ideal para fotografías e imágenes con muchos colores. JPEG usa compresión con pérdida, lo que significa que se sacrifica algo de calidad a cambio de archivos más pequeños. Es el mejor para fotos de personas, productos y paisajes.
• PNG — el mejor para imágenes que requieren transparencia (logos, iconos, gráficos con fondos transparentes). PNG usa compresión sin pérdida, por lo que los archivos tienden a ser más grandes que los JPEG o WebP.
• SVG — perfecto para logos, iconos y gráficos sencillos. Los archivos SVG son vectoriales, lo que significa que se escalan a cualquier tamaño sin perder calidad. Son extremadamente ligeros.
• AVIF — un formato más reciente que ofrece una compresión aún mejor que WebP. La compatibilidad de los navegadores está creciendo, pero todavía no es universal. Madra usa AVIF donde es compatible y recurre a WebP o JPEG en los navegadores más antiguos.

¿Cuáles son los tamaños de imagen recomendados?

Usar las dimensiones adecuadas evita que el navegador descargue archivos innecesariamente grandes. Estos son los tamaños recomendados para los elementos habituales de un sitio web de Madra:

Son recomendaciones, no requisitos estrictos. Si proporcionas imágenes que superan estas recomendaciones, nuestro sistema las redimensionará y comprimirá por ti.

¿Madra optimiza las imágenes automáticamente?

Sí. Cada imagen de tu sitio web de Madra pasa por un proceso de optimización automático. Este proceso se ejecuta en segundo plano y no requiere ninguna acción por tu parte.

Esto es lo que ocurre automáticamente:

• Conversión de formato — las imágenes se convierten a WebP (con alternativas JPEG/PNG para los navegadores más antiguos) para lograr una compresión óptima.
• Tamaño responsive — se generan varias versiones de cada imagen a distintas resoluciones. El navegador carga la versión que mejor se adapta al tamaño de pantalla del visitante.
• Compresión — las imágenes se comprimen para reducir el tamaño de archivo manteniendo la calidad visual. El nivel de compresión se ajusta para cada tipo de imagen.
• Carga diferida (lazy loading) — las imágenes que quedan por debajo del pliegue (no visibles cuando la página carga por primera vez) se cargan solo cuando el visitante se acerca a ellas al desplazarse. Esto acelera la carga inicial de la página.
• Texto alternativo — cada imagen incluye un atributo alt descriptivo para la accesibilidad y el SEO. Se generan durante la creación del sitio y se pueden personalizar bajo petición.

¿Cómo subo nuevas imágenes a mi sitio?

Si quieres sustituir una imagen existente o añadir nuevas, tienes dos opciones: