# 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