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ó)
49 lines
1.4 KiB
Markdown
49 lines
1.4 KiB
Markdown
# 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
|