feat(404): preparar infraestructura para imagen IA del robot, SVG fallback funcional

- src/pages/404.astro refactorizado: usa <picture> con AVIF/WebP/PNG + onerror que activa SVG inline fallback - public/images/404/ creado con README.md explicando el workflow de optimizacion - El SVG procedural del robot (con mate, vapor, ojos medio cerrados, mejillas coral) queda como fallback visible mientras se espera la imagen IA - Cuando Mauri suba el robot_404.png (o avif/webp), basta con copiar a public/images/404/ y rebuild Pendiente: que Mauri suba el archivo robot_404.png a public/images/404/ (o confirme la ruta donde lo dejó)
2026-06-09 09:54:13 -03:00
parent db6668793e
commit 46af1316de
2 changed files with 167 additions and 104 deletions
@@ -0,0 +1,48 @@
+# 404 Robot Image Assets
+
+Cuando se suba la imagen final del robot (PNG/WebP/AVIF), debe ir en esta carpeta:
+
+```
+public/images/404/
+├── robot-mate.png      (fallback, mínimo 480x480)
+├── robot-mate.webp     (preferido moderno, <50KB)
+└── robot-mate.avif     (óptimo, <30KB)
+```
+
+## Cómo se usa
+
+El `src/pages/404.astro` usa `<picture>` con esta estructura:
+
+```html
+<picture>
+  <source type="image/avif" srcset="/images/404/robot-mate.avif" />
+  <source type="image/webp" srcset="/images/404/robot-mate.webp" />
+  <img src="/images/404/robot-mate.png" alt="..." onerror="fallback" />
+</picture>
+```
+
+Si **ninguna** de las versiones existe, el `onerror` muestra el SVG inline de respaldo (mismo robot dibujado en SVG).
+
+## Generar las versiones optimizadas
+
+Una vez que se tenga la imagen original (PNG o JPG) en `public/images/404/robot-mate-original.png`:
+
+```bash
+cd public/images/404
+
+# WebP
+convert robot-mate-original.png -quality 82 -resize 600x600 robot-mate.webp
+
+# AVIF
+avifenc --min 25 --max 35 --speed 6 -o robot-mate.avif robot-mate-original.png
+
+# PNG fallback
+convert robot-mate-original.png -quality 90 -resize 480x480 robot-mate.png
+```
+
+## Reemplazo
+
+1. Mauri guarda la imagen IA final (la del robot vago con mate) en `public/images/404/`
+2. Correr el script de arriba para generar AVIF/WebP/PNG
+3. Rebuild + deploy
+4. El sitio muestra la imagen IA automáticamente; si no carga, fallback SVG