Fix Cumulative Layout Shift: Add explicit dimensions to all blog post…

_posts/2024-11-13-vmodel-vs-agile-choose-both.en.md

@@ -20,7 +20,7 @@ A SaaS startup launching a new payment processor needs _specification upfront_ (
 
 The problem isn't the methodologies - it's that managers are forced to choose all-or-nothing.
 
-![False Choice Dilemma](/assets/images/false-choice-dilemma.svg "The False Binary Choice")
+<img src="/assets/images/false-choice-dilemma.svg" alt="False Choice Dilemma" width="1200" height="400" loading="lazy">
 
 ---
 
@@ -39,7 +39,7 @@ Real capacity stays invisible until 60% through development. You plan on Friday'
 
 Example: A healthcare team estimated 6 months to build a patient dashboard. They discovered integration issues at month 4 - but they'd already promised go-live to hospital administrators. The last 2 months were panic mode: cutting features, cutting tests, cutting quality.
 
-![V-Model Waterfall Diagram](/assets/images/vmodel-waterfall-diagram.svg "V-Model / Waterfall Approach")
+<img src="/assets/images/vmodel-waterfall-diagram.svg" alt="V-Model Waterfall Diagram" width="1000" height="500" loading="lazy">
 
 ---
 
@@ -58,7 +58,7 @@ Example: A healthcare team estimated 6 months to build a patient dashboard. They
 
 Example: An agency took an "pure Agile" approach to a CMS rebuild. No specifications. Just "build a dashboard." 3 months and 5 cycles later, the client realized the design was wrong. Entire backend rebuilt. The team had optimized for velocity, not value.
 
-![Agile Iterative Diagram](/assets/images/agile-iterative-diagram.svg "Agile / Iterative Approach")
+<img src="/assets/images/agile-iterative-diagram.svg" alt="Agile Iterative Diagram" width="1000" height="500" loading="lazy">
 
 ---
 
@@ -93,7 +93,7 @@ High-performing teams don't choose between V-Model and Agile - they **use both f
 
 This is what works. **Not Agile. Not Waterfall. Both.**
 
-![Hybrid Methodology Phases](/assets/images/hybrid-methodology-phases.svg "Why Hybrid Methodology Wins")
+<img src="/assets/images/hybrid-methodology-phases.svg" alt="Hybrid Methodology Phases" width="1200" height="500" loading="lazy">
 
 ---
 
@@ -181,7 +181,7 @@ Hybrid methodology _only works_ if you can see:
 
 Without visibility, hybrid becomes unpredictability.
 
-![Implementation Workflow](/assets/images/implementation-workflow.svg "Implementing Hybrid Methodology")
+<img src="/assets/images/implementation-workflow.svg" alt="Implementation Workflow" width="1200" height="600" loading="lazy">
 
 ---
 

_posts/2024-11-13-vmodel-vs-agile-choose-both.es.md

@@ -20,7 +20,7 @@ Una startup SaaS lanzando un nuevo procesador de pagos necesita _especificación
 
 El problema no son las metodologías, es que los gerentes se ven obligados a elegir todo o nada.
 
-![Dilema de Falsa Opción](/assets/images/false-choice-dilemma.svg "La Falsa Opción Binaria")
+<img src="/assets/images/false-choice-dilemma.svg" alt="Dilema de Falsa Opción" width="1200" height="400" loading="lazy">
 
 ---
 
@@ -39,7 +39,7 @@ La capacidad real permanece invisible hasta el 60% del desarrollo. Planifica con
 
 Ejemplo: Un equipo de salud estimó 6 meses para construir un dashboard de pacientes. Descubrieron problemas de integración en el mes 4, pero ya habían prometido la puesta en marcha a los administradores del hospital. Los últimos 2 meses fueron modo pánico: recortando funcionalidades, recortando pruebas, recortando calidad.
 
-![Diagrama V-Model Waterfall](/assets/images/vmodel-waterfall-diagram.svg "Enfoque V-Model / Waterfall")
+<img src="/assets/images/vmodel-waterfall-diagram.svg" alt="Diagrama V-Model Waterfall" width="1000" height="500" loading="lazy">
 
 ---
 
@@ -58,7 +58,7 @@ Más de 10 horas por semana en reuniones de standup. Repriorización constante.
 
 Ejemplo: Una agencia tomó un enfoque "Agile puro" para una reconstrucción de CMS. Sin especificaciones. Solo "construye un dashboard". 3 meses y 5 cycles después, el cliente se dio cuenta de que el diseño estaba mal. Backend completo reconstruido. El equipo había optimizado para velocidad, no para valor.
 
-![Diagrama Agile Iterativo](/assets/images/agile-iterative-diagram.svg "Enfoque Agile / Iterativo")
+<img src="/assets/images/agile-iterative-diagram.svg" alt="Diagrama Agile Iterativo" width="1000" height="500" loading="lazy">
 
 ---
 
@@ -93,7 +93,7 @@ Los equipos de alto rendimiento no eligen entre V-Model y Agile, **usan ambos pa
 
 Esto es lo que funciona. **No Agile. No Waterfall. Ambos.**
 
-![Fases de Metodología Híbrida](/assets/images/hybrid-methodology-phases.svg "Por Qué Gana la Metodología Híbrida")
+<img src="/assets/images/hybrid-methodology-phases.svg" alt="Fases de Metodología Híbrida" width="1200" height="500" loading="lazy">
 
 ---
 
@@ -181,7 +181,7 @@ La metodología híbrida _solo funciona_ si puede ver:
 
 Sin visibilidad, híbrido se convierte en imprevisibilidad.
 
-![Flujo de Trabajo de Implementación](/assets/images/implementation-workflow.svg "Implementando Metodología Híbrida")
+<img src="/assets/images/implementation-workflow.svg" alt="Flujo de Trabajo de Implementación" width="1200" height="600" loading="lazy">
 
 ---
 

_posts/2024-11-13-vmodel-vs-agile-choose-both.fr.md

@@ -20,7 +20,7 @@ Une startup SaaS lançant un nouveau processeur de paiement a besoin de *spécif
 
 Le problème n'est pas les méthodologies - c'est que les managers sont forcés de choisir tout-ou-rien.
 
-![Dilemme Faux Choix](/assets/images/false-choice-dilemma.svg "Le Faux Choix Binaire")
+<img src="/assets/images/false-choice-dilemma.svg" alt="Dilemme Faux Choix" width="1200" height="400" loading="lazy">
 
 ---
 
@@ -38,7 +38,7 @@ La vraie capacité reste invisible jusqu'à 60% du développement. Vous planifie
 
 Exemple: Une équipe santé a estimé 6 mois pour construire un dashboard patient. Ils ont découvert des problèmes d'intégration au mois 4 - mais ils avaient déjà promis le lancement aux administrateurs hospitaliers. Les 2 derniers mois: mode panique, features coupées, tests coupés, qualité coupée.
 
-![Diagramme V-Model Waterfall](/assets/images/vmodel-waterfall-diagram.svg "Approche V-Model / Waterfall")
+<img src="/assets/images/vmodel-waterfall-diagram.svg" alt="Diagramme V-Model Waterfall" width="1000" height="500" loading="lazy">
 
 ---
 
@@ -56,7 +56,7 @@ Exemple: Une équipe santé a estimé 6 mois pour construire un dashboard patien
 
 Exemple: Une agence a pris l'approche "pure Agile" pour une refonte de CMS. Pas de spécifications. Juste "construis un dashboard." 3 mois et 5 cycles plus tard, le client réalise que le design est faux. Backend entièrement reconstruit. L'équipe avait optimisé pour la vélocité, pas la valeur.
 
-![Diagramme Agile Itératif](/assets/images/agile-iterative-diagram.svg "Approche Agile / Itérative")
+<img src="/assets/images/agile-iterative-diagram.svg" alt="Diagramme Agile Itératif" width="1000" height="500" loading="lazy">
 
 ---
 
@@ -88,7 +88,7 @@ Les équipes performantes ne choisissent pas entre V-Model et Agile - elles **ut
 
 C'est ce qui fonctionne. **Pas Agile. Pas Waterfall. Les deux.**
 
-![Phases Méthodologie Hybride](/assets/images/hybrid-methodology-phases.svg "Pourquoi la Méthodologie Hybride Gagne")
+<img src="/assets/images/hybrid-methodology-phases.svg" alt="Phases Méthodologie Hybride" width="1200" height="500" loading="lazy">
 
 ---
 
@@ -166,7 +166,7 @@ La méthodologie hybride ne fonctionne *que si* vous pouvez voir:
 
 Sans visibilité, hybride devient de l'imprévisibilité.
 
-![Workflow d'Implémentation](/assets/images/implementation-workflow.svg "Implémenter une Méthodologie Hybride")
+<img src="/assets/images/implementation-workflow.svg" alt="Workflow d'Implémentation" width="1200" height="600" loading="lazy">
 
 ---
 

_posts/2025-11-26-from-issue-to-release.en.md

@@ -70,7 +70,7 @@ Each issue has:
 
 **Issues are the atomic unit of work.** Everything starts here.
 
-![Issue Structure](/assets/images/issue-structure.svg "How Issues Work in Sinra")
+<img src="/assets/images/issue-structure.svg" alt="Issue Structure" width="800" height="450" loading="lazy">
 
 ---
 
@@ -100,7 +100,7 @@ Because it's concrete. A capability describes what your product can do. "2FA cap
 - Blockers and dependencies
 - Release readiness
 
-![Capability Hierarchy](/assets/images/capability-hierarchy.svg "Issues Grouped into Capabilities")
+<img src="/assets/images/capability-hierarchy.svg" alt="Capability Hierarchy" width="800" height="500" loading="lazy">
 
 ---
 
@@ -126,7 +126,7 @@ In Release 2.1 view, you see:
 - Testing status
 - Deployment readiness
 
-![Release View](/assets/images/release-view.svg "Capabilities Grouped into Releases")
+<img src="/assets/images/release-view.svg" alt="Release View" width="800" height="500" loading="lazy">
 
 ---
 
@@ -200,7 +200,7 @@ Let's trace the 2FA feature through the system:
 - Documentation complete
 - Deployment successful
 
-![Complete Workflow](/assets/images/issue-to-release-workflow.svg "Full Journey from Issue to Release")
+<img src="/assets/images/issue-to-release-workflow.svg" alt="Complete Workflow" width="900" height="500" loading="lazy">
 
 ---
 

_posts/2025-11-26-from-issue-to-release.es.md

@@ -78,7 +78,7 @@ Cada issue tiene:
 
 **Los Issues son la unidad atómica de trabajo.** Todo comienza aquí.
 
-![Estructura de Issue](/assets/images/issue-structure.svg "Cómo Funcionan los Issues en Sinra")
+<img src="/assets/images/issue-structure.svg" alt="Estructura de Issue" width="800" height="450" loading="lazy">
 
 ---
 
@@ -108,7 +108,7 @@ Porque es concreto. Una capability describe qué puede hacer su producto. "Capab
 - Bloqueadores y dependencias
 - Preparación para release
 
-![Jerarquía de Capability](/assets/images/capability-hierarchy.svg "Issues Agrupados en Capabilities")
+<img src="/assets/images/capability-hierarchy.svg" alt="Jerarquía de Capability" width="800" height="500" loading="lazy">
 
 ---
 
@@ -134,7 +134,7 @@ En la vista de Release 2.1, ve:
 - Status de testing
 - Preparación para despliegue
 
-![Vista de Release](/assets/images/release-view.svg "Capabilities Agrupadas en Releases")
+<img src="/assets/images/release-view.svg" alt="Vista de Release" width="800" height="500" loading="lazy">
 
 ---
 
@@ -208,7 +208,7 @@ Tracemos la funcionalidad de 2FA a través del sistema:
 - Documentación completa
 - Despliegue exitoso
 
-![Flujo de Trabajo Completo](/assets/images/issue-to-release-workflow.svg "Viaje Completo de Issue a Release")
+<img src="/assets/images/issue-to-release-workflow.svg" alt="Flujo de Trabajo Completo" width="900" height="500" loading="lazy">
 
 ---
 

_posts/2025-11-26-from-issue-to-release.fr.md

@@ -75,7 +75,7 @@ Chaque issue a :
 
 **Les issues sont l'unité atomique du travail.** Tout commence ici.
 
-![Structure Issue](/assets/images/issue-structure.svg "Comment Fonctionnent les Issues dans Sinra")
+<img src="/assets/images/issue-structure.svg" alt="Structure Issue" width="800" height="450" loading="lazy">
 
 ---
 
@@ -103,7 +103,7 @@ Parce que c'est concret. Une capability décrit ce que votre produit peut faire.
 - Les blocages et dépendances
 - La préparation pour la release
 
-![Hiérarchie Capability](/assets/images/capability-hierarchy.svg "Issues Regroupées dans des Capabilities")
+<img src="/assets/images/capability-hierarchy.svg" alt="Hiérarchie Capability" width="800" height="500" loading="lazy">
 
 ---
 
@@ -127,7 +127,7 @@ Dans la vue Release 2.1, vous voyez :
 - Statut des tests
 - Préparation du déploiement
 
-![Vue Release](/assets/images/release-view.svg "Capabilities Regroupées dans des Releases")
+<img src="/assets/images/release-view.svg" alt="Vue Release" width="800" height="500" loading="lazy">
 
 ---
 
@@ -189,7 +189,7 @@ Traçons la fonctionnalité 2FA à travers le système :
 - Documentation complète
 - Déploiement réussi
 
-![Workflow Complet](/assets/images/issue-to-release-workflow.svg "Parcours Complet d'Issue à Release")
+<img src="/assets/images/issue-to-release-workflow.svg" alt="Workflow Complet" width="900" height="500" loading="lazy">
 
 ---
 

_posts/2025-12-01-release-driven-development.en.md

@@ -52,7 +52,7 @@ Sinra solves this with **release-driven development**: organizing work around co
 
 Instead: **We decide what "done" means before we start building.**
 
-![Release-Driven Timeline](/assets/images/release-driven-timeline.svg "How Release-Driven Development Works")
+<img src="/assets/images/release-driven-timeline.svg" alt="Release-Driven Timeline" width="900" height="400" loading="lazy">
 
 ---
 
@@ -86,7 +86,7 @@ Instead: **We decide what "done" means before we start building.**
 
 It doesn't work.
 
-![Feature-Driven Chaos](/assets/images/feature-driven-chaos.svg "The Problem with Feature-First Development")
+<img src="/assets/images/feature-driven-chaos.svg" alt="Feature-Driven Chaos" width="800" height="500" loading="lazy">
 
 ---
 
@@ -128,7 +128,7 @@ It doesn't work.
 
 It works.
 
-![Release-Driven Success](/assets/images/release-driven-success.svg "The Power of Release-First Planning")
+<img src="/assets/images/release-driven-success.svg" alt="Release-Driven Success" width="800" height="500" loading="lazy">
 
 ---
 
@@ -166,7 +166,7 @@ One view. Real-time. Accessible to everyone.
 **When QA asks:** "What needs testing?"
 **Answer:** Release 2.3 shows 14 untested issues across 2 capabilities.
 
-![Unified Release View](/assets/images/unified-release-view.svg "Everyone Sees the Same Truth")
+<img src="/assets/images/unified-release-view.svg" alt="Unified Release View" width="900" height="550" loading="lazy">
 
 ---
 
@@ -198,7 +198,7 @@ When Product wants to add a feature:
 
 Capacity decisions become **data-driven, not political**.
 
-![Capacity Dashboard](/assets/images/capacity-dashboard.svg "Real-Time Capacity vs. Workload")
+<img src="/assets/images/capacity-dashboard.svg" alt="Capacity Dashboard" width="800" height="400" loading="lazy">
 
 ---
 
@@ -234,7 +234,7 @@ Teams report:
 - 90% higher team confidence
 - 100% clearer stakeholder communication
 
-![Release Readiness](/assets/images/release-readiness.svg "Deployment Confidence Through Planning")
+<img src="/assets/images/release-readiness.svg" alt="Release Readiness" width="700" height="500" loading="lazy">
 
 ---
 

_posts/2025-12-01-release-driven-development.es.md

@@ -52,7 +52,7 @@ Sinra resuelve esto con **desarrollo orientado a releases**: organizar el trabaj
 
 En su lugar: **Decidimos qué significa "terminado" antes de comenzar a construir.**
 
-![Cronología Orientada a Release](/assets/images/release-driven-timeline.svg "Cómo Funciona el Desarrollo Orientado a Releases")
+<img src="/assets/images/release-driven-timeline.svg" alt="Cronología Orientada a Release" width="900" height="400" loading="lazy">
 
 ---
 
@@ -86,7 +86,7 @@ En su lugar: **Decidimos qué significa "terminado" antes de comenzar a construi
 
 No funciona.
 
-![Caos Orientado a Funcionalidades](/assets/images/feature-driven-chaos.svg "El Problema con el Desarrollo Funcionalidad-Primero")
+<img src="/assets/images/feature-driven-chaos.svg" alt="Caos Orientado a Funcionalidades" width="800" height="500" loading="lazy">
 
 ---
 
@@ -128,7 +128,7 @@ No funciona.
 
 Funciona.
 
-![Éxito Orientado a Release](/assets/images/release-driven-success.svg "El Poder de la Planificación Release-Primero")
+<img src="/assets/images/release-driven-success.svg" alt="Éxito Orientado a Release" width="800" height="500" loading="lazy">
 
 ---
 
@@ -166,7 +166,7 @@ Una vista. Tiempo real. Accesible para todos.
 **Cuando QA pregunta:** "¿Qué necesita probarse?"
 **Respuesta:** Release 2.3 muestra 14 issues no probados en 2 capabilities.
 
-![Vista de Release Unificada](/assets/images/unified-release-view.svg "Todos Ven la Misma Verdad")
+<img src="/assets/images/unified-release-view.svg" alt="Vista de Release Unificada" width="900" height="550" loading="lazy">
 
 ---
 
@@ -198,7 +198,7 @@ Cuando Producto quiere agregar una funcionalidad:
 
 Las decisiones de capacidad se vuelven **basadas en datos, no políticas**.
 
-![Dashboard de Capacidad](/assets/images/capacity-dashboard.svg "Capacidad en Tiempo Real vs. Carga de Trabajo")
+<img src="/assets/images/capacity-dashboard.svg" alt="Dashboard de Capacidad" width="800" height="400" loading="lazy">
 
 ---
 
@@ -234,7 +234,7 @@ Los equipos reportan:
 - 90% mayor confianza del equipo
 - 100% más clara comunicación con stakeholders
 
-![Preparación de Release](/assets/images/release-readiness.svg "Confianza en Despliegue a Través de Planificación")
+<img src="/assets/images/release-readiness.svg" alt="Preparación de Release" width="700" height="500" loading="lazy">
 
 ---