Las imágenes representan cerca del 40% del peso de una página web. En 2024, una homepage móvil mediana pesa 2,3 MB, de los cuales unos 900 KB son imágenes. Son el recurso con mayor impacto en el rendimiento, y el que menos atención recibe en la mayoría de proyectos.
Elegimos paletas con cuidado, aplicamos sistemas de diseño, cuidamos cada píxel en Figma y generamos recursos con IA generativa. Pero al llegar a producción las imágenes se ven borrosas, lentas o distorsionadas, y las decisiones de optimización las toma otra persona. El resultado: diseños que no se ven como los pensaste, y experiencias que frustran a quienes los usan.
Este workshop te da las herramientas, el criterio visual y técnico, y el flujo de trabajo para controlar cómo se ven tus imágenes en producción.
¿Para quién es este workshop?
Este workshop es para ti si:
- Eres diseñador/a UX/UI y tus activos llegan a producción borrosos, con el formato equivocado o más pesados de lo esperado.
- Exportas PNG para todo porque no tienes claro qué formato usar ni cuándo.
- Trabajas con Figma o herramientas de IA generativa y quieres controlar la calidad de salida sin depender del equipo de desarrollo.
- Quieres entender por qué las imágenes se comportan diferente en distintos dispositivos y cómo diseñar teniéndolo en cuenta.
Requisitos: familiaridad con Figma y el flujo habitual de exportación de activos. No es necesario saber programar ni instalar ningún software previamente.
¿Qué veremos en el taller?
El taller culmina en la sesión 6 con un flujo completo de Figma a producción, el escenario más habitual para perfiles de diseño. Las sesiones anteriores te dan el criterio necesario para tomar decisiones en ese flujo con autonomía.
1. Formatos de imagen: Del estándar a la próxima generación
Análisis profundo de JPEG (progresivo vs. baseline), PNG y sus variantes de color, y el uso eficiente de SVG. Introducción a formatos modernos: WebP como estándar actual y la llegada de AVIF y JPEG XL para maximizar la compresión sin sacrificar fidelidad.
Objetivo: Exportar con criterio: saber qué formato elegir en Figma según el tipo de imagen y el contexto de uso.
2. Herramientas de optimización, Calidad y SSIM
Uso profesional de Squoosh, ImageOptim y encoders como MozJPEG. Introducción a métricas de similitud estructural (SSIM) y algoritmos de percepción visual para encontrar el «umbral de transparencia» (donde la compresión es invisible para las visitas).
Objetivo: Evaluar visualmente la calidad de compresión y encontrar el punto en que la diferencia es imperceptible para quien usa el diseño.
3. Imágenes Responsive, Carga Diferida (Lazy-loading) y CDN
Marcado HTML avanzado con los atributos srcset y sizes para servir diferentes densidades de píxeles (DPR). Implementación de Lazy-loading nativo y estrategias de carga. Uso de Image CDNs (como Cloudinary) para automatizar la negociación de formatos y transformaciones al vuelo.
Objetivo: Entender cómo los dispositivos muestran tus imágenes y cómo el diseño responsive afecta la calidad visual percibida.
4. Impacto en las Core Web Vitals (UX)
Optimización del LCP (Largest Contentful Paint) mediante priorización de recursos. Prevención del CLS (Cumulative Layout Shift) usando atributos de dimensión y la propiedad CSS aspect-ratio para evitar saltos en la página mientras se cargan las imágenes.
Objetivo: Comprender cómo las imágenes afectan la experiencia percibida de velocidad y los saltos visuales que frustran a las personas.
5. Formatos de imagen animada y Optimización de vídeo
Por qué el GIF es un formato ineficiente y cómo reemplazarlo. Uso del elemento <video> con atributos específicos (muted, loop, autoplay) para emular el comportamiento de un GIF usando códecs MP4 y WebM, logrando reducciones de hasta el 90% en el peso del archivo.
Objetivo: Reemplazar GIFs en tus diseños por formatos modernos que mantienen la animación con una fracción del peso.
6. Workshop: De GenIA/Figma a producción
Automatización del pipeline de imágenes. Desde la exportación limpia en Figma y la generación de activos con IA generativa, hasta la creación de scripts de automatización (Node.js, Bash o herramientas de construcción) que procesen las imágenes del repositorio automáticamente en cada despliegue.
Objetivo: Salir con un flujo de trabajo propio, desde Figma o GenIA hasta producción, que no dependa de otra persona para entregar activos correctamente optimizados.
Formato
- Online en directo, en grupo reducido para garantizar atención real a tus dudas.
- Grabaciones disponibles de todas las sesiones, para repasar cuando quieras.
- Repositorio privado con materiales, guías y ejercicios paso a paso.
- Canal privado en Discord para resolver dudas antes, durante y después del taller.
Horarios disponibles
El workshop se imparte en 4 sesiones de 4 horas. Elige la opción que mejor se adapte a tu agenda:
Opción A, Sábados por la mañana
4 sesiones, una vez por semana.
| Sesión | Fecha | Horario | Contenido |
| Sesión 1 | Sábado 2 de mayo | 9:30 a 13:30 | Bloques 1 y 2 |
| Sesión 2 | Sábado 9 de mayo | 9:30 a 13:30 | Bloques 3 y 4 |
| Sesión 3 | Sábado 16 de mayo | 9:30 a 13:30 | Bloque 5 |
| Sesión 4 | Sábado 23 de mayo | 9:30 a 13:30 | Bloque 6 |
Opción B, Entre semana por las tardes
8 días, dos por semana (miércoles y viernes), 2 horas cada día.
| Sesión | Días | Horario | Contenido |
| Sesión 1 | Miércoles 6 + Viernes 8 de mayo | 19:00 a 21:00 | Bloques 1 y 2 |
| Sesión 2 | Miércoles 13 + Viernes 15 de mayo | 19:00 a 21:00 | Bloques 3 y 4 |
| Sesión 3 | Miércoles 20 + Viernes 22 de mayo | 19:00 a 21:00 | Bloque 5 |
| Sesión 4 | Miércoles 27 + Viernes 29 de mayo | 19:00 a 21:00 | Bloque 6 |
¿Sois un equipo? Este taller es especialmente valioso cuando diseño y frontend lo hacen juntos, comparten criterio y el flujo de diseño a producción se vuelve más fluido. Si queréis adaptar el horario a vuestra jornada laboral, indicadlo en el formulario y lo organizamos.
Inversión
El precio del workshop es de 250€, e incluye acceso a las 4 sesiones en directo (4 días en la opción de sábados, 8 días en la opción entre semana), grabaciones, repositorio privado y canal de Discord para compartir recursos y resolver dudas.
Empieza por rellenar el formulario de inscripción. En función de cómo vayas a gestionar el pago, te enviamos los pasos a seguir:
- Pago personal, recibirás un enlace de pago directo por Stripe.
- Pago por empresa, podemos emitir factura previa al pago por transferencia.
- Bonificación FUNDAE, el workshop es bonificable para empresas españolas a través de FUNDAE. Indícalo en el formulario y te ayudamos a gestionar la bonificación antes de formalizar la inscripción.
Preguntas frecuentes
¿Se grabarán las sesiones?
Sí, todas las sesiones quedan grabadas y tendrás acceso permanente para consultarlas cuando quieras.
¿Podré resolver dudas fuera de las sesiones?
Sí. Tendrás acceso a un canal privado de Discord donde puedes preguntar antes, durante y después del taller.
¿Me sirve si trabajo con WordPress, Webflow u otro CMS?
Sí. El taller se centra en los fundamentos: formatos, métricas, marcado HTML y estrategias de carga. Todo ello es aplicable independientemente de la plataforma o el stack que uses.
¿Necesito instalar algún software?
No. Veremos herramientas online y de escritorio, pero no es necesario tener nada instalado previamente.
¿Podré tener factura?
Sí, puedes solicitarla e indicar los datos fiscales en el propio formulario de inscripción.