Optimización de imágenes: Cuando entre kilobytes y píxeles deciden milisegundos

Las imágenes no optimizadas son como ladrillos colgados de las alas de tu sitio web. Mientras la página se arrastra hacia los visitantes, ellos pasan de la esperanza («solo un momento más…») a la resignación («mejor regreso a Google») y nunca vuelven.

Afortunadamente, hay varios trucos probados para deshacerse de esa carga digital y hacer que tu sitio web vuele.

El tamaño de los datos de las imágenes importa, porque las imágenes son a menudo el elemento LCP que afecta la velocidad de carga.

La optimización de imágenes es una práctica clave que siempre resulta beneficiosa, ya sea en la optimización de WordPress, Shoptet, Drupal u otros CMS.

1. WebP y AVIF: por qué jubilar JPEG y PNG#

Si aún sirves imágenes solo en formatos del siglo pasado, es hora de actualizarse. Los formatos modernos como WebP y AVIF ofrecen una compresión significativamente mejor manteniendo la calidad.

WebP: Este formato de Google funciona como un pequeño milagro. En una de las auditorías de PageSpeed.ONE, simplemente convirtiendo los banners a WebP, redujimos su tamaño en un 60 %. Si te preocupan los navegadores antiguos, puedes usar una solución de respaldo:

<picture>
	<source srcset="imagen.webp" type="image/webp" />
	<img src="imagen.jpg" alt="Descripción de la imagen" />
</picture>

AVIF o JPEG XL son formatos aún más nuevos con mejor compresión. AVIF puede ahorrar un 30-40 % más de datos que WebP. El soporte en navegadores crece cada día, pero siempre es necesario usar un respaldo para navegadores más antiguos. Encuentra un tutorial detallado de implementación de AVIF en nuestro artículo.

Cuanto más pequeño, mejor. Tamaño de datos de imágenes en uno de los tests.

2. Experimenta con la calidad: el 100 % no salvará al mundo#

El ojo humano no es un escáner y pocos pueden distinguir una imagen comprimida al 80 % de una al 100 % de calidad. Sin embargo, el tamaño del archivo puede diferir hasta el doble. Experimenta con la configuración de calidad hasta encontrar el equilibrio ideal entre apariencia y tamaño.

Para pruebas fáciles, puedes usar la herramienta Squoosh, que permite comparar diferentes niveles de compresión en tiempo real.

La herramienta Squoosh es la navaja suiza del optimizador de imágenes.

3. Carga diferida: ¿por qué cargar lo que no se ve?#

¿Por qué debería el visitante descargar imágenes del pie de página si aún no las ha visto? El principio de carga diferida asegura que las imágenes se carguen solo cuando el usuario se acerque a ellas al desplazarse.

La implementación es más sencilla que recordar el PIN de tu tarjeta de crédito:

<img src="imagen.webp" alt="Se cargará solo cuando sea necesario" loading="lazy" />

4. Dimensiones adecuadas: a veces el tamaño importa#

Subir imágenes 4K para miniaturas del tamaño de un sello postal es como usar un camión para comprar panecillos.

Aunque el navegador redimensiona la imagen obedientemente, el usuario ya ha descargado todos esos datos innecesarios. Antes de subir cualquier imagen, verifica en qué dimensiones se mostrará realmente.

5. Optimización automática: menos datos, misma impresión#

Además del formato y las dimensiones, puedes reducir el tamaño de los archivos aún más con herramientas especializadas.

Servicios como Cloudflare o Cloudinary pueden optimizar automáticamente todas tus imágenes. Para los amantes del código abierto, está MozJPEG, que puede hacer maravillas con archivos JPEG.

Si te preocupan imágenes individuales, buenos resultados se obtienen con la pareja TinyPNG/TinyJPG o con una excelente aplicación para MacOS llamada OptImage.

6. Evita los desplazamientos de diseño: las dimensiones de las imágenes no son opcionales#

Cuando el navegador no conoce las dimensiones de una imagen, el contenido puede desplazarse al cargarla. Este fenómeno (Cumulative Layout Shift, o CLS) no solo no es del agrado de Google, sino que se cuenta en la evaluación de la experiencia del usuario. La solución es simple: siempre incluye los atributos width y height:

Alternativamente, puedes definir la relación de aspecto con CSS para que el diseño no se desmorone como un castillo de naipes.

Siempre es bueno tener a mano otros trucos para optimizar CLS.

<img src="imagen.jpg" alt="Imagen estable" width="600" height="400" />

7. CDN: entrega imágenes desde la parada más cercana#

Las Redes de Distribución de Contenidos (CDN) son como centros de distribución para tus imágenes, ubicados en todo el mundo. Un visitante de Praga recibirá los archivos de Europa Central, mientras que un usuario de Tokio los obtendrá de un servidor asiático. ¿El resultado? Una carga más rápida para todos.

A las imágenes no les gusta viajar largas distancias. Para eso está la CDN.

¿Por qué molestarse en optimizar las imágenes?#

La velocidad del sitio web no es solo un detalle técnico para entusiastas. Es un factor clave que afecta los resultados comerciales:

• Sitio más rápido = mejor posición en los buscadores
• Sitio más rápido = mayor tasa de conversión
• Sitio más rápido = visitantes más satisfechos

En PageSpeed.ONE ayudamos a los clientes a lograr resultados impresionantes. Por ejemplo, Livesport mejoró su Speed Score en Google Ads de un trágico 1-2/10 a un perfecto 10/10 gracias a la optimización de la primera renderización de la página.

Nuestro monitoring PageSpeed PLUS te permite seguir de cerca la velocidad de tu sitio web y detectar problemas con imágenes y otros inconvenientes, incluyendo el tamaño de los datos de las imágenes:

Unas líneas de código extra, 1 MB menos. Esta dieta le sienta mejor a las imágenes que el keto a las personas.

Además, el monitoreo mide tu sitio web con usuarios reales y te alerta cada vez que se produzca una ralentización.

La optimización de imágenes es una inversión que se traduce en usuarios más satisfechos y mejores resultados comerciales. Cada kilobyte ahorrado cuenta.