Por qué importa el peso de las imágenes

En un sitio web promedio, las imágenes son el 60-70% del peso total de la página. Una imagen mal optimizada puede pesar 3 MB cuando podría pesar 150 KB con la misma calidad visual. Esa diferencia se nota en:

• Velocidad de carga — páginas más rápidas, especialmente en móvil con 4G.
• SEO — Google castiga sitios lentos en sus rankings.
• Consumo de ancho de banda — si tienes límite mensual, imágenes pesadas se lo comen.
• Espacio en disco — una web con 500 imágenes mal optimizadas puede ocupar 5 GB en lugar de 500 MB.
• Experiencia del usuario — nadie espera 10 segundos por una foto.

Los formatos modernos

JPEG (.jpg)

El veterano para fotografías. Usa compresión con pérdida — mientras más comprimes, más calidad pierdes. Para fotos reales (personas, paisajes) la pérdida es casi imperceptible al 80% de calidad.

• Usa JPEG cuando: la imagen es una fotografía real con muchos colores y tonos.
• Calidad recomendada: 75-85%. Raramente necesitas más.
• Evita JPEG para: gráficos con texto, logotipos, líneas finas.

PNG (.png)

Compresión sin pérdida. Preserva la calidad al 100% pero pesa más que JPEG en fotografías. Soporta transparencia.

• Usa PNG cuando: necesitas transparencia, o la imagen tiene texto, iconos, gráficos con pocos colores.
• Evita PNG para: fotografías.

WebP (.webp)

Formato moderno desarrollado por Google. Pesa 25-35% menos que JPEG con la misma calidad visual, y soporta transparencia como PNG. Soportado por todos los navegadores modernos desde 2020.

• Usa WebP cuando: puedas — es la mejor opción general hoy.
• Considera: algunos programas antiguos no lo abren. Para descargas públicas mejor ofrecer también JPEG.

AVIF (.avif)

Aún más moderno que WebP. Pesa 40-50% menos que JPEG. Soporte de navegadores ya es amplio (2023+) pero no total.

SVG (.svg)

Formato vectorial — no son pixeles sino instrucciones. Escala infinitamente sin perder calidad. Usa para logos, iconos, ilustraciones simples.

Dimensiones correctas

La regla más importante: no subas imágenes más grandes de lo que se van a mostrar. Si tu sitio muestra las imágenes de producto a 600x600 pixeles, subirlas a 4000x4000 es desperdicio puro — el navegador las redimensiona en el lado del visitante después de descargarlas completas.

Tamaños típicos útiles:

• Banner hero de página: 1920x800 o 1600x600.
• Imagen de blog post: 1200x630 (tamaño Open Graph).
• Imagen de producto (ecommerce): 800x800 o 1000x1000 para zoom.
• Thumbnail de listado: 400x300.
• Avatar de usuario: 200x200.

Herramientas para optimizar

Online (sin instalar nada)

• tinypng.com — comprime JPG y PNG con un simple arrastrar. Gratis hasta 20 imágenes por vez.
• squoosh.app — herramienta de Google, muy completa, te muestra antes/después en tiempo real.
• compressor.io — similar a TinyPNG.
• cloudconvert.com — convierte entre formatos.

Aplicaciones de escritorio

• ImageOptim (Mac) — drag and drop, comprime sin configuración.
• FileOptimizer (Windows) — similar, batch de miles de imágenes.
• IrfanView (Windows) — veterano, convierte y redimensiona en masa.
• XnConvert (multi-OS) — proceso batch con muchas opciones.

Línea de comandos

• ImageMagick — el estándar de facto para automatización.
• cwebp — convertidor oficial WebP de Google.
• jpegoptim, pngquant — optimizadores específicos.

Ejemplos de comandos

Comprimir todas las JPG de una carpeta

jpegoptim --max=80 --strip-all *.jpg

Redimensionar todas las imágenes a 1200px de ancho máximo

mogrify -resize '1200x>' *.jpg

El > evita agrandar las que ya son más pequeñas.

Convertir JPG a WebP en batch

for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Plugins de WordPress que lo hacen solo

Si prefieres no manejar nada manualmente:

• ShortPixel — comprime al subir, crea versiones WebP.
• Imagify — similar, muy buena calidad.
• Smush — gratis ilimitado pero menos agresivo.
• EWWW Image Optimizer — comprime localmente sin cuotas mensuales.

La desventaja de los plugins: si cambias de plugin o lo desactivas, puedes perder las optimizaciones. Los archivos originales a veces no se guardan. Por eso muchos prefieren optimizar antes de subir — queda hecho una sola vez y para siempre.

Convenciones recomendadas

• Guarda siempre el archivo original a alta resolución en tu computadora. Las versiones optimizadas van al hosting.
• Usa nombres descriptivos en los archivos — hotel-piscina.jpg en lugar de IMG_0384.jpg. Google usa el nombre como pista de contenido.
• Completa el atributo alt en HTML con una descripción real — accesibilidad y SEO.
• Revisa periódicamente tu carpeta wp-content/uploads/ — puede crecer más de lo esperado.