Mauri
46af1316de
- 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ó)
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:
<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:
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
- Mauri guarda la imagen IA final (la del robot vago con mate) en
public/images/404/ - Correr el script de arriba para generar AVIF/WebP/PNG
- Rebuild + deploy
- El sitio muestra la imagen IA automáticamente; si no carga, fallback SVG