planetazuzu/codigo0

Fork 0

planetazuzu 0014c17873 Actualizar herramientas y contenidos

2026-01-19 09:10:16 +01:00

26 KiB

Raw Blame History

📸 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:

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:

# 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:

#!/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:

# 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:

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:

# 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:

# 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:

public/assets/infografias/bloque-4-rcp/  # VACÍA

Referencias en Código:

// 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)

# 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)

# 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)

# 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:

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:

# 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:

Comparar checksums para identificar duplicados exactos
Si son iguales, eliminar variantes numeradas
Si son diferentes, renombrar con nombres descriptivos
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:

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/:

# 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:

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

# 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

# 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:

# 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:

Ejecutar script de detección
Verificar manualmente cada archivo no referenciado
Si no se usan, mover a assets/archive/ (temporalmente)
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

# 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

# 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

#!/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

#!/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

#!/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

#!/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:

# 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:

# 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:

// 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:

// 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

🔴 Optimizar Imágenes Grandes (17 MB → ~2 MB)
- Convertir a WebP
- Comprimir PNGs
- Redimensionar si es necesario
- ROI: ⭐⭐⭐⭐⭐ (Muy Alto)
🔴 Eliminar dist/assets/ (11 MB)
- Ya está en .gitignore pero existe en repo
- Se regenera en build
- ROI: ⭐⭐⭐⭐⭐ (Inmediato)
🟡 Consolidar Estructura
- Mover assets/images/ → public/assets/images/
- Eliminar carpetas vacías
- ROI: ⭐⭐⭐⭐ (Alto - organización)

Scripts Creados

✅ scripts/optimize-images.sh - Optimizar imágenes grandes
✅ scripts/fix-asset-names.sh - Renombrar archivos con espacios
✅ scripts/cleanup-assets.sh - Limpiar duplicados y vacíos
✅ 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

26 KiB Raw Blame History

📸 ANÁLISIS DE MEDIOS SUPERFLUOS (Recursos Multimedia)

📊 RESUMEN EJECUTIVO

Estado Actual de Medios

Espacio Recuperable Estimado

📋 TABLA DE ACCIONES PRIORIZADAS - MEDIOS

🔍 ANÁLISIS DETALLADO POR CATEGORÍA

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

Problema: Imágenes Muy Grandes

2. ASSETS DUPLICADOS (🔴 CRÍTICO)

Problema: Carpeta dist/assets/ Duplicada

3. ARCHIVOS CON NOMBRES MAL FORMATEADOS (🟡 MEDIA)

Problema: Archivos con Espacios y Caracteres Especiales

4. ARCHIVOS REFERENCIADOS NO EXISTENTES (🟡 MEDIA)

Problema: Referencias a Imágenes que No Existen

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

Problema: Archivos con Sufijos Numerados

6. ESTRUCTURA DE ASSETS CONFUSA (🟡 MEDIA)

Problema: Múltiples Ubicaciones para Assets

7. CARPETAS VACÍAS (🟢 BAJA)

Problema: Carpetas de Videos Sin Contenido

8. ARCHIVOS NO REFERENCIADOS (🟡 MEDIA)

Problema: Assets Sin Referencias en Código

🛠️ COMANDOS ESPECÍFICOS PARA LIMPIEZA DE MEDIOS

1. Identificar Imágenes Grandes No Optimizadas

2. Detectar Duplicados Exactos

3. Encontrar Archivos No Referenciados

4. Optimizar Todas las Imágenes

5. Renombrar Archivos con Espacios

6. Limpiar Assets Duplicados y Vacíos

📝 VERIFICACIÓN DE REFERENCIAS

Imágenes Registradas en image-registry.ts

Imágenes en GaleriaImagenes.tsx

🔧 OPTIMIZACIÓN DE ASSETS

1. Compresión de Imágenes

2. Lazy Loading de Imágenes

3. Responsive Images

📊 RESUMEN DE ESPACIO RECUPERABLE

Por Prioridad

✅ CHECKLIST DE LIMPIEZA DE MEDIOS

Fase 1: Crítico (Hacer YA)

Fase 2: Importante (Hacer Pronto)

Fase 3: Opcional (Hacer Cuando Tengas Tiempo)

🎯 RECOMENDACIONES FINALES

Prioridades Inmediatas

Scripts Creados

📋 TABLA COMPARATIVA: ANTES vs DESPUÉS

26 KiB

Raw Blame History

Problema: Carpeta `dist/assets/` Duplicada

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

Imágenes en `GaleriaImagenes.tsx`