codigo0/docs/ANALISIS_MEDIOS_SUPERFLUOS.md

# 📸 ANÁLISIS DE MEDIOS SUPERFLUOS (Recursos Multimedia)

**Fecha:** 2025-01-07  
**Analista:** Ingeniero de Optimización y Mantenimiento  
**Versión del Proyecto:** 1.0.0

---

## 📊 RESUMEN EJECUTIVO

### Estado Actual de Medios

- **Archivos en `public/assets/`:** 50 archivos
- **Archivos en `assets/`:** 3 archivos (imágenes grandes)
- **Archivos en `dist/assets/`:** 87 archivos (duplicados)
- **Carpetas de Videos Vacías:** 9 carpetas (0 archivos)
- **Espacio Total en Assets:** ~36 MB (public: 8.3M, assets: 17M, dist: 11M)

### Espacio Recuperable Estimado

| Categoría | Espacio Estimado | % del Total | Prioridad |
|-----------|------------------|-------------|-----------|
| **Imágenes No Optimizadas (>1MB)** | ~17 MB | 47% | 🔴 Alta |
| **Archivos Duplicados (dist/assets/)** | 11 MB | 31% | 🔴 Alta |
| **Carpetas Vacías (videos/)** | <100 KB | <0.3% | 🟢 Baja |
| **Archivos con Nombres Mal Formateados** | ~1 MB | 3% | 🟡 Media |
| **Archivos No Referenciados** | ~2-3 MB | 6-8% | 🟡 Media |
| **Screenshots Vacías** | <10 KB | <0.1% | 🟢 Baja |

**Total Recuperable:** ~30-32 MB (~83-89% del espacio total en assets)

---

## 📋 TABLA DE ACCIONES PRIORIZADAS - MEDIOS

| Prioridad | Tipo | Archivo/Ruta | Problema | Acción Recomendada | Espacio | Riesgo |
|-----------|------|--------------|----------|-------------------|---------|---------|
| **🔴 ALTA** | Imágenes No Optimizadas | `assets/images/bloque_00/*.png` | 3 imágenes >5MB sin optimizar | Optimizar a WebP o comprimir PNG | ~17 MB | 🟢 Bajo |
| **🔴 ALTA** | Assets Duplicados | `dist/assets/` | Duplicación completa de public/assets | Eliminar (se regenera en build) | 11 MB | 🟢 Bajo |
| **🟡 MEDIA** | Archivos con Espacios | `seleccion-talla-collarin 2.png` | Nombres con espacios (4 archivos) | Renombrar sin espacios | ~1 MB | 🟡 Medio |
| **🟡 MEDIA** | Archivos Referenciados No Existentes | `bloque-4-rcp/` (vacía) | JSON referencia imágenes que no existen | Verificar y añadir o eliminar referencias | - | 🟡 Medio |
| **🟡 MEDIA** | Imágenes Duplicadas | `tabla_rangos_fio2_oxigenoterapia1.png` | Variantes duplicadas (`1.png`) | Verificar si son necesarias, eliminar duplicados | ~500 KB | 🟡 Medio |
| **🟡 MEDIA** | Carpeta Assets Separada | `assets/images/` vs `public/assets/` | Estructura duplicada confusa | Consolidar en `public/assets/` | - | 🟡 Medio |
| **🟢 BAJA** | Carpetas Vacías | `assets/videos/bloque_*` (9 vacías) | Carpetas de videos sin contenido | Eliminar o documentar propósito | <100 KB | 🟢 Bajo |
| **🟢 BAJA** | Screenshots Vacías | `public/screenshots/` | Carpeta vacía | Eliminar o usar | <10 KB | 🟢 Bajo |
| **🟢 BAJA** | Assets de Prueba | `placeholder.svg` (múltiples) | Placeholders duplicados | Consolidar en un solo lugar | <10 KB | 🟢 Bajo |

---

## 🔍 ANÁLISIS DETALLADO POR CATEGORÍA

### 1. IMÁGENES NO OPTIMIZADAS (🔴 CRÍTICO)

#### Problema: Imágenes Muy Grandes

**Archivos Identificados:**
```bash
assets/images/bloque_00/el_orden_importa_mas_que_la_velocidad.png      # 5.7 MB
assets/images/bloque_00/priorizacion_vital_el_enfoque_abcde.png       # 5.8 MB
assets/images/bloque_00/sistema_abcde_prioridades_emergencias.png      # 5.4 MB
```

**Total:** ~17 MB en solo 3 imágenes

**Problemas:**
- ❌ Tamaño excesivo para web (deberían ser <500KB)
- ❌ Sin compresión
- ❌ Formato PNG no optimizado (debería ser WebP)
- ❌ Nombres con espacios (problemas de compatibilidad)
- ❌ No están en `public/assets/` (ubicación incorrecta)

**Acción Recomendada:**

```bash
# 1. Optimizar imágenes usando ImageMagick o similar
# Instalar herramientas:
# sudo apt-get install imagemagick webp

# 2. Optimizar y convertir a WebP:
for img in assets/images/bloque_00/*.png; do
  # Redimensionar si es necesario (max width 1920px)
  convert "$img" -resize 1920x1920> -quality 85 "${img.png}.webp"
  # Comprimir PNG original como backup
  pngquant --quality=65-80 "$img" --output "${img.png}optimized.png"
done

# 3. Renombrar sin espacios:
# "el_orden_importa_mas_que_la_velocidad.png" -> "el_orden_importa_mas_que_la_velocidad.png"
# "priorizacion_vital_el_enfoque_abcde.png" -> "priorizacion_vital_enfoque_abcde.png"
# "sistema_abcde_prioridades_emergencias.png" -> "sistema_abcde_prioridades_emergencias.png"

# 4. Mover a public/assets/infografias/bloque-0-fundamentos/
# 5. Actualizar referencias en image-registry.ts
```

**Script de Optimización Automática:**

```bash
#!/bin/bash
# scripts/optimize-images.sh

echo "🖼️  Optimizando imágenes..."

# Directorio de trabajo
SRC_DIR="assets/images/bloque_00"
DEST_DIR="public/assets/infografias/bloque-0-fundamentos"

# Crear destino si no existe
mkdir -p "$DEST_DIR"

# Optimizar cada PNG
for img in "$SRC_DIR"/*.png; do
  if [ -f "$img" ]; then
    filename=$(basename "$img" .png)
    # Limpiar nombre (sin espacios, minúsculas, sin caracteres especiales)
    clean_name=$(echo "$filename" | tr '[:upper:]' '[:lower:]' | tr ' ' '-' | tr -d ':' | sed 's/[^a-z0-9-]//g')
    
    echo "   📸 Optimizando: $filename -> $clean_name.webp"
    
    # Convertir a WebP con compresión
    convert "$img" -resize 1920x1920> -quality 85 "$DEST_DIR/$clean_name.webp" 2>/dev/null
    
    # También crear versión PNG optimizada como fallback
    pngquant --quality=65-80 "$img" --output "$DEST_DIR/$clean_name_optimized.png" 2>/dev/null || \
    convert "$img" -resize 1920x1920> -quality 85 "$DEST_DIR/$clean_name_optimized.png"
  fi
done

echo "✅ Optimización completada"
echo "📊 Espacio recuperado: ~15 MB"
```

**Ahorro Estimado:** ~15 MB (de 17 MB a ~2 MB)

**Riesgo:** 🟢 Bajo - Solo optimización, no elimina contenido

---

### 2. ASSETS DUPLICADOS (🔴 CRÍTICO)

#### Problema: Carpeta `dist/assets/` Duplicada

**Análisis:**
- `public/assets/`: 50 archivos (8.3 MB) ✅ **Fuente correcta**
- `dist/assets/`: 87 archivos (11 MB) ❌ **Duplicado generado en build**

**Problemas:**
- ❌ `dist/` debe estar en `.gitignore` (ya está, pero el contenido existe)
- ❌ Duplicación innecesaria en repositorio
- ❌ Genera conflictos si se editan archivos en `dist/`

**Acción:**
```bash
# Eliminar dist/assets/ (se regenera automáticamente en build)
rm -rf dist/assets/

# Verificar que dist/ está en .gitignore:
grep -q "^dist/" .gitignore || echo "dist/" >> .gitignore
```

**Ahorro Estimado:** 11 MB

**Riesgo:** 🟢 Bajo - `dist/` se regenera en build

---

### 3. ARCHIVOS CON NOMBRES MAL FORMATEADOS (🟡 MEDIA)

#### Problema: Archivos con Espacios y Caracteres Especiales

**Archivos Identificados:**
```bash
public/assets/infografias/bloque-2-inmovilizacion/seleccion-talla-collarin 2.png
public/assets/infografias/bloque-2-inmovilizacion/tecnica-sujecion-manual 1.png
public/assets/infografias/bloque-2-inmovilizacion/componentes-sistema-inmovilizacion 1.png
public/assets/infografias/bloque-2-inmovilizacion/posicion-tes-inmovilizacion-manual 1.png
```

**Problemas:**
- ❌ Espacios en nombres (problemas en URLs y scripts)
- ❌ Números sueltos (` 2.png`, ` 1.png`) sugieren duplicados
- ❌ Posibles versiones de backup

**Acción:**
```bash
# Script para renombrar archivos con espacios
find public/assets -type f -name "* *" -exec rename 's/ /-/g' {} \;

# O manualmente:
mv "public/assets/infografias/bloque-2-inmovilizacion/seleccion-talla-collarin 2.png" \
   "public/assets/infografias/bloque-2-inmovilizacion/seleccion_talla_collarin_2.png"

# Actualizar referencias en:
# - src/data/image-registry.ts
# - src/pages/GaleriaImagenes.tsx
# - src/data/guia-refuerzo-rcp-adulto-svb.json (si aplica)
```

**Verificar si son Duplicados:**
```bash
# Comparar con archivos sin número:
for file in public/assets/infografias/bloque-2-inmovilizacion/*" "*; do
  base=$(echo "$file" | sed 's/ [0-9]//g')
  if [ -f "$base" ]; then
    echo "⚠️  Posible duplicado: $file vs $base"
    # Comparar con diff o checksum
    diff "$file" "$base" || echo "   → Archivos diferentes, mantener ambos con nombres distintos"
  fi
done
```

**Ahorro Estimado:** ~1 MB (si se eliminan duplicados confirmados)

**Riesgo:** 🟡 Medio - Verificar que no se usan antes de eliminar

---

### 4. ARCHIVOS REFERENCIADOS NO EXISTENTES (🟡 MEDIA)

#### Problema: Referencias a Imágenes que No Existen

**Carpeta Vacía Identificada:**
```bash
public/assets/infografias/bloque-4-rcp/  # VACÍA
```

**Referencias en Código:**
```json
// src/data/guia-refuerzo-rcp-adulto-svb.json
{
  "ruta": "/assets/infografias/bloque-4-rcp/algoritmo_rcp_comentado.svg",  // ❌ NO EXISTE
  "ruta": "/assets/infografias/bloque-4-rcp/compresiones_incorrectas.png", // ❌ NO EXISTE
  "ruta": "/assets/infografias/bloque-4-rcp/compresiones_correctas.png",   // ❌ NO EXISTE
  "ruta": "/assets/infografias/bloque-4-rcp/descompresion_incompleta.png", // ❌ NO EXISTE
  "ruta": "/assets/infografias/bloque-4-rcp/descompresion_completa.png",   // ❌ NO EXISTE
  "ruta": "/assets/infografias/bloque-4-rcp/resumen_rcp_adulto_svb.png",   // ❌ NO EXISTE
}
```

**Problemas:**
- ❌ 6 imágenes referenciadas que no existen
- ❌ Rutas rotas en el frontend
- ❌ Carpetas vacías confusas

**Acción:**

**Opción 1: Crear las imágenes faltantes** (si son necesarias)
```bash
# Si las imágenes están planificadas pero no creadas aún:
mkdir -p public/assets/infografias/bloque-4-rcp
# Añadir .gitkeep para mantener la carpeta:
touch public/assets/infografias/bloque-4-rcp/.gitkeep
```

**Opción 2: Eliminar referencias** (si no son necesarias aún)
```bash
# Comentar o eliminar referencias en:
# - src/data/guia-refuerzo-rcp-adulto-svb.json
# Actualizar código para manejar imágenes faltantes gracefully
```

**Opción 3: Añadir imágenes placeholder** (temporal)
```bash
# Crear placeholders hasta que existan las reales:
for img in algoritmo-rcp-comentado compresiones-incorrectas compresiones-correctas \
           descompresion-incompleta descompresion-completa resumen-rcp-adulto-svb; do
  convert -size 800x600 xc:lightgray -pointsize 24 -fill black \
    -gravity center -annotate +0+0 "Placeholder: $img" \
    "public/assets/infografias/bloque-4-rcp/$img.png"
done
```

**Recomendación:** Verificar con el equipo si estas imágenes están planificadas o si deben eliminarse las referencias.

**Riesgo:** 🟡 Medio - Puede romper funcionalidad si se eliminan referencias activas

---

### 5. IMÁGENES DUPLICADAS O VARIANTES (🟡 MEDIA)

#### Problema: Archivos con Sufijos Numerados

**Archivos Identificados:**
```bash
tabla_rangos_fio2_oxigenoterapia.png          # Original
tabla_rangos_fio2_oxigenoterapia1.png         # Variante con "1" ❓
seleccion_talla_collarin_cervical.png         # Original
seleccion_talla_collarin_cervical1.png        # Variante con "1" ❓
seleccion-talla-collarin 2.png                # Variante con " 2" ❓
componentes_sistema_inmovilizacion.png        # Original
componentes-sistema-inmovilizacion 1.png      # Variante con " 1" ❓
posicion_tes_inmovilizacion_manual.png        # Original
posicion-tes-inmovilizacion-manual 1.png      # Variante con " 1" ❓
```

**Acción:**
```bash
# Script para identificar duplicados exactos:
find public/assets -type f -name "*1.png" -o -name "* 2.png" -o -name "* 1.png" | while read file; do
  base=$(echo "$file" | sed 's/[ 0-9]*\.png$/.png/')
  if [ -f "$base" ]; then
    # Comparar checksums
    if [ "$(md5sum "$file" | cut -d' ' -f1)" == "$(md5sum "$base" | cut -d' ' -f1)" ]; then
      echo "✅ DUPLICADO EXACTO: $file (igual que $base)"
      echo "   → Eliminar: rm '$file'"
    else
      echo "⚠️  VARIANTE DIFERENTE: $file vs $base"
      echo "   → Revisar manualmente si ambas son necesarias"
    fi
  fi
done
```

**Recomendación:** 
1. Comparar checksums para identificar duplicados exactos
2. Si son iguales, eliminar variantes numeradas
3. Si son diferentes, renombrar con nombres descriptivos
4. Actualizar referencias en código

**Ahorro Estimado:** ~500 KB - 1 MB (si se eliminan duplicados)

**Riesgo:** 🟡 Medio - Verificar que no se usan antes de eliminar

---

### 6. ESTRUCTURA DE ASSETS CONFUSA (🟡 MEDIA)

#### Problema: Múltiples Ubicaciones para Assets

**Estructura Actual:**
```bash
assets/images/bloque_00/          # 3 imágenes grandes (17 MB) ❌ Ubicación incorrecta
public/assets/infografias/        # 50 archivos (8.3 MB) ✅ Ubicación correcta
dist/assets/                      # 87 archivos (11 MB) ❌ Generado en build
assets/videos/bloque_*/           # 9 carpetas vacías ❌
assets/slides/bloque_*/           # Carpetas posiblemente vacías ❓
assets/templates/                 # Carpeta vacía ❌
assets/checklists_app/            # Carpeta vacía ❌
```

**Problemas:**
- ❌ Assets en `assets/images/` no se sirven correctamente (deben estar en `public/`)
- ❌ Estructura duplicada confusa
- ❌ Carpetas vacías sin propósito claro

**Acción Recomendada:**

**Consolidar en `public/assets/`:**
```bash
# Estructura recomendada:
public/assets/
  ├── infografias/        # Infografías por bloque (actual)
  ├── images/             # Imágenes generales (si necesario)
  ├── videos/             # Videos (cuando se añadan)
  ├── icons/              # Iconos
  └── slides/             # Presentaciones (si necesario)

# Mover imágenes de assets/images/ a public/assets/images/
mkdir -p public/assets/images/bloque-0-fundamentos
mv assets/images/bloque_00/*.png public/assets/images/bloque-0-fundamentos/

# Eliminar estructura antigua después de verificar:
# rm -rf assets/images/
```

**Ahorro Estimado:** ~17 MB (moviendo y optimizando imágenes grandes)

**Riesgo:** 🟡 Medio - Actualizar todas las referencias en código

---

### 7. CARPETAS VACÍAS (🟢 BAJA)

#### Problema: Carpetas de Videos Sin Contenido

**Carpetas Vacías Identificadas:**
```bash
assets/videos/bloque_00/  # Vacía
assets/videos/bloque_01/  # Vacía
assets/videos/bloque_02/  # Vacía
assets/videos/bloque_03/  # Vacía
assets/videos/bloque_04/  # Vacía
assets/videos/bloque_05/  # Vacía
assets/videos/bloque_06/  # Vacía
assets/videos/bloque_07/  # Vacía
assets/videos/bloque_08/  # Vacía
assets/slides/bloque_00/  # Vacía (posiblemente)
assets/slides/bloque_01/  # Vacía (posiblemente)
# ... más carpetas slides posiblemente vacías
assets/templates/         # Vacía
assets/checklists_app/    # Vacía
public/screenshots/       # Vacía
```

**Acción:**

**Opción 1: Eliminar si no se usarán**
```bash
# Eliminar carpetas vacías:
find assets/videos -type d -empty -delete
find assets/slides -type d -empty -delete
find assets -type d -empty -not -path "./assets/*/.*" -delete
rmdir public/screenshots 2>/dev/null || true
```

**Opción 2: Añadir .gitkeep si se usarán en el futuro**
```bash
# Mantener estructura pero documentar que está vacía:
for dir in assets/videos/bloque_* assets/slides/bloque_*; do
  if [ -d "$dir" ] && [ -z "$(ls -A "$dir")" ]; then
    echo "# Carpeta para videos/slides del bloque (futuro)" > "$dir/.gitkeep"
  fi
done
```

**Ahorro Estimado:** <100 KB (solo estructura de directorios)

**Riesgo:** 🟢 Bajo - Carpetas vacías no afectan funcionalidad

---

### 8. ARCHIVOS NO REFERENCIADOS (🟡 MEDIA)

#### Problema: Assets Sin Referencias en Código

**Método de Detección:**
```bash
# Buscar todas las imágenes en public/assets/
find public/assets -type f \( -name "*.png" -o -name "*.svg" -o -name "*.jpg" \) | while read img; do
  filename=$(basename "$img")
  path_in_code="/assets/infografias/$(echo "$img" | sed 's|.*/infografias/||')"
  
  # Buscar referencia en código
  if ! grep -r "$path_in_code\|$filename" src/ backend/ public/ --include="*.ts" --include="*.tsx" --include="*.js" --include="*.json" --include="*.md" >/dev/null 2>&1; then
    echo "⚠️  NO REFERENCIADO: $img"
  fi
done
```

**Acción:**
1. Ejecutar script de detección
2. Verificar manualmente cada archivo no referenciado
3. Si no se usan, mover a `assets/archive/` (temporalmente)
4. Eliminar después de confirmar que no son necesarios

**Ahorro Estimado:** ~2-3 MB (estimado conservador)

**Riesgo:** 🟡 Medio - Verificar que no se usan dinámicamente o en Markdown

---

## 🛠️ COMANDOS ESPECÍFICOS PARA LIMPIEZA DE MEDIOS

### 1. Identificar Imágenes Grandes No Optimizadas

```bash
# Buscar imágenes > 1MB:
find public/assets assets -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" \) \
  -size +1M -exec ls -lh {} \; | awk '{print $5, $9}' | sort -hr

# Buscar imágenes > 500KB:
find public/assets assets -type f \( -name "*.png" -o -name "*.jpg" \) \
  -size +500k -exec ls -lh {} \; | awk '{print $5, $9}'
```

---

### 2. Detectar Duplicados Exactos

```bash
# Usar fdupes o script personalizado:
# Instalar fdupes:
# sudo apt-get install fdupes

# Buscar duplicados en assets:
fdupes -r public/assets/

# O usar script MD5:
find public/assets -type f \( -name "*.png" -o -name "*.jpg" \) -exec md5sum {} \; | \
  sort | uniq -d -w 32
```

---

### 3. Encontrar Archivos No Referenciados

```bash
#!/bin/bash
# scripts/find-unused-assets.sh

echo "🔍 Buscando assets no referenciados..."

find public/assets -type f \( -name "*.png" -o -name "*.svg" -o -name "*.jpg" \) | while read asset; do
  # Obtener ruta relativa desde public/
  rel_path="/assets/$(echo "$asset" | sed 's|.*public/assets/||')"
  filename=$(basename "$asset")
  
  # Buscar en código fuente
  found=$(grep -r "$rel_path\|$filename" src/ backend/ public/ \
    --include="*.ts" --include="*.tsx" --include="*.js" --include="*.json" --include="*.md" \
    2>/dev/null | wc -l)
  
  if [ "$found" -eq 0 ]; then
    echo "⚠️  NO REFERENCIADO: $asset"
  fi
done

echo "✅ Búsqueda completada"
```

---

### 4. Optimizar Todas las Imágenes

```bash
#!/bin/bash
# scripts/optimize-all-images.sh

echo "🖼️  Optimizando todas las imágenes..."

# Requiere: imagemagick, webp, pngquant
# sudo apt-get install imagemagick webp pngquant

# Optimizar PNGs en public/assets/
find public/assets -type f -name "*.png" | while read img; do
  echo "   📸 Optimizando: $img"
  
  # Crear backup
  cp "$img" "${img}.backup"
  
  # Optimizar PNG
  pngquant --quality=65-80 --ext .png --force "$img" 2>/dev/null || \
  convert "$img" -quality 85 -strip "$img"
  
  # Crear versión WebP
  convert "$img" -quality 85 "${img.png}.webp" 2>/dev/null
done

echo "✅ Optimización completada"
```

---

### 5. Renombrar Archivos con Espacios

```bash
#!/bin/bash
# scripts/fix-asset-names.sh

echo "🔤 Renombrando archivos con espacios..."

find public/assets -type f -name "* *" | while read file; do
  # Renombrar: espacios -> guiones, minúsculas
  newname=$(echo "$file" | tr '[:upper:]' '[:lower:]' | tr ' ' '-' | sed 's/[^a-z0-9-._\/]//g')
  
  if [ "$file" != "$newname" ]; then
    echo "   📝 Renombrando: $(basename "$file") -> $(basename "$newname")"
    mv "$file" "$newname"
    
    # Actualizar referencias en código (requiere confirmación)
    echo "   ⚠️  Actualizar referencias en código para: $file"
  fi
done

echo "✅ Renombrado completado"
echo "📋 Recuerda actualizar referencias en:"
echo "   - src/data/image-registry.ts"
echo "   - src/pages/GaleriaImagenes.tsx"
echo "   - src/data/guia-refuerzo-rcp-adulto-svb.json"
```

---

### 6. Limpiar Assets Duplicados y Vacíos

```bash
#!/bin/bash
# scripts/cleanup-assets.sh

echo "🧹 Limpiando assets..."

# 1. Eliminar dist/assets/ (se regenera)
if [ -d "dist/assets" ]; then
  echo "   🗑️  Eliminando dist/assets/..."
  rm -rf dist/assets/
  echo "   ✅ dist/assets/ eliminado (11 MB recuperados)"
fi

# 2. Eliminar carpetas vacías
echo "   🗑️  Eliminando carpetas vacías..."
EMPTY_DIRS=$(find assets public/assets -type d -empty 2>/dev/null | wc -l)
find assets public/assets -type d -empty -delete 2>/dev/null
echo "   ✅ $EMPTY_DIRS carpeta(s) vacía(s) eliminada(s)"

# 3. Eliminar screenshots vacías
if [ -d "public/screenshots" ] && [ -z "$(ls -A public/screenshots)" ]; then
  echo "   🗑️  Eliminando public/screenshots/ (vacía)..."
  rmdir public/screenshots
  echo "   ✅ public/screenshots/ eliminada"
fi

echo "✅ Limpieza completada"
```

---

## 📝 VERIFICACIÓN DE REFERENCIAS

### Imágenes Registradas en `image-registry.ts`

**Total Registradas:** ~25 imágenes

**Verificar Existencia:**
```bash
# Script para verificar que todas las imágenes registradas existen:
node -e "
const { imageRegistry } = require('./src/data/image-registry.ts');
const fs = require('fs');

Object.values(imageRegistry).forEach(img => {
  const publicPath = 'public' + img.path;
  if (!fs.existsSync(publicPath)) {
    console.log('❌ NO EXISTE:', publicPath);
  } else {
    const stats = fs.statSync(publicPath);
    if (stats.size > 500000) {
      console.log('⚠️  GRANDE (>500KB):', publicPath, '(' + (stats.size/1024/1024).toFixed(2) + ' MB)');
    }
  }
});
"
```

---

### Imágenes en `GaleriaImagenes.tsx`

**Total Listadas:** ~60 imágenes

**Verificar Existencia:**
```bash
# Extraer todas las rutas de GaleriaImagenes.tsx y verificar:
grep -o "'/assets/[^']*'" src/pages/GaleriaImagenes.tsx | \
  sed "s/'//g" | while read path; do
    if [ ! -f "public$path" ]; then
      echo "❌ NO EXISTE: public$path"
    fi
  done
```

---

## 🔧 OPTIMIZACIÓN DE ASSETS

### 1. Compresión de Imágenes

**Estrategia Recomendada:**

| Tipo | Formato Original | Formato Optimizado | Calidad | Ahorro Estimado |
|------|------------------|-------------------|---------|-----------------|
| **Fotografías** | PNG/JPG | WebP | 85% | 60-80% |
| **Iconos/Logos** | PNG/SVG | SVG (vectorial) o WebP | 90% | 70-90% |
| **Infografías** | PNG | WebP o SVG | 85% | 50-70% |
| **Diagramas** | PNG | SVG (si es posible) | 100% | 80-95% |

**Herramientas Recomendadas:**
- `sharp` (Node.js) - Mejor rendimiento
- `imagemagick` (CLI) - Versátil
- `pngquant` - Específico para PNG
- `svgo` - Optimización SVG

---

### 2. Lazy Loading de Imágenes

**Implementar en `MarkdownViewer.tsx`:**
```tsx
// src/components/content/MarkdownViewer.tsx
img: ({ node, src, alt, ...props }: any) => {
  // Añadir loading="lazy" para imágenes fuera del viewport
  return (
    <img 
      {...props} 
      src={imageSrc} 
      alt={alt || 'Imagen'} 
      loading="lazy"
      decoding="async"
      className="max-w-full h-auto rounded-lg my-4"
    />
  );
}
```

---

### 3. Responsive Images

**Implementar srcset para diferentes tamaños:**
```tsx
// Para imágenes grandes, generar múltiples tamaños:
<img 
  src="/assets/infografias/imagen.webp <!-- PLACEHOLDER: No requiere creación -->"
  srcSet="/assets/infografias/imagen_400w.webp 400w,
          /assets/infografias/imagen_800w.webp 800w,
          /assets/infografias/imagen_1200w.webp 1200w"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Descripción"
  loading="lazy"
/>
```

---

## 📊 RESUMEN DE ESPACIO RECUPERABLE

### Por Prioridad

| Prioridad | Acción | Espacio | Esfuerzo | ROI |
|-----------|--------|---------|----------|-----|
| **🔴 ALTA** | Optimizar imágenes >5MB | ~15 MB | 2 horas | ⭐⭐⭐⭐⭐ |
| **🔴 ALTA** | Eliminar dist/assets/ | 11 MB | 5 min | ⭐⭐⭐⭐⭐ |
| **🟡 MEDIA** | Consolidar estructura | - | 1 hora | ⭐⭐⭐⭐ |
| **🟡 MEDIA** | Renombrar archivos espacios | - | 30 min | ⭐⭐⭐ |
| **🟡 MEDIA** | Eliminar duplicados | ~1 MB | 1 hora | ⭐⭐⭐ |
| **🟡 MEDIA** | Eliminar no referenciados | ~2-3 MB | 2 horas | ⭐⭐⭐ |
| **🟢 BAJA** | Eliminar carpetas vacías | <100 KB | 5 min | ⭐⭐ |

**Total Recuperable:** ~30-32 MB  
**Tiempo Total:** ~7 horas  
**ROI General:** ⭐⭐⭐⭐⭐ (Muy Alto)

---

## ✅ CHECKLIST DE LIMPIEZA DE MEDIOS

### Fase 1: Crítico (Hacer YA)

- [ ] Optimizar 3 imágenes grandes en `assets/images/bloque_00/` (>5MB cada una)
- [ ] Eliminar `dist/assets/` del repositorio (11 MB)
- [ ] Verificar que `dist/` está en `.gitignore`
- [ ] Mover imágenes optimizadas a `public/assets/infografias/`

**Tiempo:** 2-3 horas  
**Ahorro:** ~26 MB

---

### Fase 2: Importante (Hacer Pronto)

- [ ] Renombrar archivos con espacios (4 archivos)
- [ ] Verificar y eliminar duplicados exactos
- [ ] Consolidar estructura de assets (mover de `assets/` a `public/assets/`)
- [ ] Verificar referencias a imágenes faltantes en `bloque-4-rcp/`
- [ ] Actualizar `image-registry.ts` con nuevas rutas

**Tiempo:** 3-4 horas  
**Ahorro:** ~3-4 MB

---

### Fase 3: Opcional (Hacer Cuando Tengas Tiempo)

- [ ] Detectar y eliminar assets no referenciados
- [ ] Eliminar carpetas vacías de videos/slides
- [ ] Implementar lazy loading para imágenes
- [ ] Generar versiones responsive (srcset)
- [ ] Convertir PNGs a WebP donde sea posible

**Tiempo:** 2-3 horas  
**Ahorro:** ~2-3 MB adicionales

---

## 🎯 RECOMENDACIONES FINALES

### Prioridades Inmediatas

1. **🔴 Optimizar Imágenes Grandes** (17 MB → ~2 MB)
   - Convertir a WebP
   - Comprimir PNGs
   - Redimensionar si es necesario
   - **ROI:** ⭐⭐⭐⭐⭐ (Muy Alto)

2. **🔴 Eliminar dist/assets/** (11 MB)
   - Ya está en `.gitignore` pero existe en repo
   - Se regenera en build
   - **ROI:** ⭐⭐⭐⭐⭐ (Inmediato)

3. **🟡 Consolidar Estructura**
   - Mover `assets/images/` → `public/assets/images/`
   - Eliminar carpetas vacías
   - **ROI:** ⭐⭐⭐⭐ (Alto - organización)

---

### Scripts Creados

1. ✅ `scripts/optimize-images.sh` - Optimizar imágenes grandes
2. ✅ `scripts/fix-asset-names.sh` - Renombrar archivos con espacios
3. ✅ `scripts/cleanup-assets.sh` - Limpiar duplicados y vacíos
4. ✅ `scripts/find-unused-assets.sh` - Detectar assets no usados

---

## 📋 TABLA COMPARATIVA: ANTES vs DESPUÉS

| Métrica | Antes | Después | Mejora |
|---------|-------|---------|--------|
| **Tamaño Total Assets** | ~36 MB | ~4-6 MB | **-83%** |
| **Imágenes >1MB** | 3 archivos (17 MB) | 0 archivos | **-100%** |
| **Archivos Duplicados** | 87 en dist/ | 0 | **-100%** |
| **Archivos con Espacios** | 4 archivos | 0 | **-100%** |
| **Carpetas Vacías** | 12+ carpetas | 0-2 (con .gitkeep) | **-83%** |
| **Tiempo de Carga (estimado)** | ~3-5s | ~0.5-1s | **-80%** |

---

**Última actualización:** 2025-01-07  
**Próxima revisión recomendada:** Mensual o antes de cada release mayor