Las imágenes: el mayor freno de los sitios web
Las imágenes representan en promedio el 50-70% del peso total de una página web. Una imagen de producto no optimizada puede pesar 5MB; la misma imagen correctamente optimizada puede pesar 100KB sin diferencia visible al ojo humano. La optimización de imágenes es la mejora de velocidad con mejor relación esfuerzo/resultado.
El formato correcto para cada caso
JPEG/JPG
Para fotografías y imágenes con muchos colores. La compresión JPEG reduce mucho el peso sacrificando algo de calidad (aceptable para fotos). No usar para logos o imágenes con texto.
PNG
Para logos, iconos e imágenes que necesitan fondo transparente. La compresión es sin pérdida, por lo que mantiene la calidad exacta. Puede ser pesado para fotos.
WebP
El formato moderno de Google. Es entre un 25-35% más liviano que JPEG o PNG con la misma calidad visual. Compatible con todos los navegadores modernos. Es el formato recomendado para 2025.
SVG
Para logos e iconos simples. Es código, no una imagen de píxeles, así que escala perfectamente a cualquier tamaño sin perder calidad y puede ser muy liviano.
AVIF
El sucesor de WebP. Aún más eficiente en compresión pero con compatibilidad de navegadores todavía en crecimiento.
Herramientas de compresión
Para comprimir antes de subir
- Squoosh: squoosh.app — Herramienta gratuita de Google. Convierte y comprime con previsualización en tiempo real.
- TinyPNG/TinyJPG: tinypng.com — Simple y efectivo. Hasta 20 imágenes gratis por vez.
- Canva: Exporta en WebP con configuración de calidad.
Para comprimir automáticamente en WordPress
- ShortPixel: Comprime al subir, convierte a WebP automáticamente.
- Smush: Compresión sin pérdida gratis, WebP en versión Pro.
- Imagify: Excelente calidad de compresión con IA.
Dimensiones correctas: no subas más grande de lo necesario
Si tu columna de contenido tiene 800px de ancho, no necesitás una imagen de 3000px de ancho. Redimensioná la imagen al tamaño máximo que se mostrará antes de subirla. Una imagen de 3000px que se muestra en 800px está desperdiciando el 90% de su peso.
Lazy Loading: cargá solo lo que se ve
El lazy loading (carga diferida) hace que las imágenes solo se carguen cuando el usuario llega a ellas haciendo scroll. Las imágenes "debajo del pliegue" (que no se ven en la primera pantalla) no se cargan hasta que el usuario las necesita.
WordPress 5.5+ incluye lazy loading nativo con el atributo loading="lazy" en las etiquetas img.
Atributos alt: SEO y accesibilidad
El texto alternativo (atributo alt) de las imágenes tiene dos funciones:
- SEO: Google no puede "ver" imágenes, pero sí lee el texto alt para entender qué contiene la imagen.
- Accesibilidad: Los lectores de pantalla para personas con discapacidad visual leen el texto alt.
Siempre incluí texto alt descriptivo y con la keyword relevante cuando sea natural.
