El pipeline completo de optimización de imágenes
De originales sobredimensionados a assets listos para la web — un flujo de trabajo paso a paso que realmente ahorra ancho de banda.
El diseñador te entrega un PNG de 4000x3000 recién salido de Photoshop. 8 MB. Tu página web lo necesita a 800px de ancho, menos de 100 KB y preferiblemente en formato WebP.
La brecha entre "lo que tienes" y "lo que necesita la web" es donde la mayoría de los desarrolladores pierden tiempo. Vamos a resolverlo con un pipeline adecuado.
Paso 1: Redimensionar a las dimensiones objetivo
La mayor reducción de tamaño viene del redimensionamiento. Una imagen de 4000px mostrada a 800px está desperdiciando el 96% de sus píxeles. No es exageración — son matemáticas.
Para pantallas Retina, usa 2x el tamaño de visualización. Si la imagen se muestra a 400px en pantalla, redimensiona a 800px. No a 4000px.
Ahorro típico: 4000x3000 (8 MB) → 800x600 (400 KB). 95% de reducción solo con redimensionar.
Paso 2: Comprimir sin pérdida visible de calidad
Después de redimensionar, comprimir. Para fotografías, calidad JPEG entre 75-85% es el punto ideal — visualmente idéntico al original, archivo significativamente más pequeño.
El truco está en encontrar el umbral donde los artefactos de compresión se vuelven visibles. Para la mayoría de fotos, eso es alrededor del 70%. Por encima, nadie nota la diferencia sin hacer zoom.
Ahorro típico: 400 KB → 120 KB al 80% de calidad. Los ojos de tus usuarios no lo notarán. Sus tiempos de carga sí.
Paso 3: Convertir a formatos modernos
JPEG y PNG llevan aquí desde siempre. WebP te da archivos 25-35% más pequeños con la misma calidad. AVIF va aún más lejos.
El enfoque práctico:
- Fotos: Convertir a WebP (amplio soporte) o AVIF (mejor compresión)
- Capturas/gráficos: WebP o PNG según necesidades de transparencia
- Iconos/logos: Mantener como SVG cuando sea posible
Usar elementos <picture> para servir WebP con fallback JPEG. El soporte de navegador para WebP supera el 97%, pero los fallbacks no cuestan nada.
Paso 4: Optimizar los SVGs
Los archivos SVG de herramientas de diseño traen mucho lastre — metadatos del editor, precisión decimal innecesaria, grupos redundantes, elementos invisibles. Un SVG típico de Illustrator tiene 30-50% de datos innecesarios.
Pasarlos por un optimizador SVG y ver cómo caen los tamaños. Un icono de 15 KB se convierte en 5 KB. Multiplica por 20 iconos en tu página y ahorras 200 KB de markup.
Paso 5: Base64 para assets diminutos
Para imágenes muy pequeñas (menos de 2 KB) — iconos, viñetas, elementos decorativos pequeños — convertir a Base64 e incrustar inline elimina por completo una petición HTTP.
Una petición menos > un HTML ligeramente más grande. Pero solo para imágenes pequeñas. Una cadena Base64 de 50 KB en tu CSS es peor que una petición separada.
Regla general: ¿Menos de 2 KB? Base64. ¿Más de 2 KB? Archivo separado.
Números reales: un caso de estudio
Punto de partida: 12 imágenes de producto en una página de categoría.
| Etapa | Tamaño total | Ahorro | |-------|-------------|--------| | PNGs originales | 45 MB | — | | Tras redimensionar (800px) | 2,1 MB | 95,3% | | Tras comprimir (80%) | 680 KB | 98,5% | | Tras conversión WebP | 450 KB | 99,0% |
De 45 MB a 450 KB. Misma calidad visual. La página carga en 1,2 segundos en lugar de 12.
El pipeline en la práctica
Para un lote de imágenes, el flujo se vuelve mecánico:
- Redimensionar — a las dimensiones objetivo
- Comprimir — con los ajustes de calidad apropiados
- Convertir — a WebP/AVIF
- Optimizar — los assets SVG
- Codificar en Base64 — los iconos pequeños
Después de hacerlo tres veces, toma cinco minutos para todas las imágenes de una página.
No olvidar: carga diferida
La optimización no termina en el tamaño del archivo. Añadir loading="lazy" a las imágenes debajo del pliegue. El navegador no las descargará hasta que el usuario haga scroll cerca. Rendimiento gratis.
La optimización de imágenes no es glamurosa. Nadie escribe posts entusiasmados sobre comprimir JPEGs. Pero es la mejora de rendimiento individual más impactante que la mayoría de sitios pueden hacer. Imágenes más pequeñas significan páginas más rápidas, usuarios más satisfechos y costes de ancho de banda más bajos. Pasa cada imagen por el pipeline antes de subirla a producción.