feat: ilustración IA de Robo-mate en el 404 (AVIF + WebP + PNG)

public/images/404/README.md

@@ -1,12 +1,14 @@
-# 404 Robot Image Assets
+# 404 Robo-Mate Image Assets
 
-Cuando se suba la imagen final del robot (PNG/WebP/AVIF), debe ir en esta carpeta:
+Ilustración de Mauri para la página 404. Procesada con ImageMagick + avifenc.
+
+## Archivos
 
 ```
 public/images/404/
-├── robot-mate.png      (fallback, mínimo 480x480)
+├── robo-mate.png      (PNG fallback, 800x436, ~320KB)
-├── robot-mate.webp     (preferido moderno, <50KB)
+├── robo-mate.webp     (WebP, 800x436, ~15KB)
-└── robot-mate.avif     (óptimo, <30KB)
+└── robo-mate.avif     (AVIF, 800x436, ~8KB — preferido)
 ```
 
 ## Cómo se usa
@@ -15,34 +17,32 @@ 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/avif" srcset="/images/404/robo-mate.avif" />
-  <source type="image/webp" srcset="/images/404/robot-mate.webp" />
+  <source type="image/webp" srcset="/images/404/robo-mate.webp" />
-  <img src="/images/404/robot-mate.png" alt="..." onerror="fallback" />
+  <img src="/images/404/robo-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).
+Si **ninguna** de las versiones existe, el `onerror` muestra el SVG inline de respaldo
+(robot procedural con mate, vapor, mejillas coral y mano abierta).
 
-## Generar las versiones optimizadas
+## Regenerar
 
-Una vez que se tenga la imagen original (PNG o JPG) en `public/images/404/robot-mate-original.png`:
+Si Mauri quiere actualizar la ilustración:
 
 ```bash
 cd public/images/404
 
-# WebP
+# AVIF (~8KB)
-convert robot-mate-original.png -quality 82 -resize 600x600 robot-mate.webp
+avifenc --min 25 --max 35 -o robo-mate.avif robo-mate-orig.png
 
-# AVIF
+# WebP (~15KB)
-avifenc --min 25 --max 35 --speed 6 -o robot-mate.avif robot-mate-original.png
+convert robo-mate-orig.png -quality 82 -define webp:method=6 robo-mate.webp
 
-# PNG fallback
+# PNG fallback (~320KB)
-convert robot-mate-original.png -quality 90 -resize 480x480 robot-mate.png
+convert robo-mate-orig.png -resize 800x -quality 88 -strip robo-mate.png
 ```
 
-## Reemplazo
+## Fuente
 
-1. Mauri guarda la imagen IA final (la del robot vago con mate) en `public/images/404/`
+Original: `https://nube.hostingdelsur.net/s/56N5mT9BEdNXSXB` (Robo-mate.png, 1408x768).
-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

src/pages/404.astro

@@ -13,13 +13,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 
         <div class="order-2 lg:order-1" aria-hidden="true">
           <picture>
-            <source type="image/avif" srcset="/images/404/robot-mate.avif" />
+            <source type="image/avif" srcset="/images/404/robo-mate.avif" />
-            <source type="image/webp" srcset="/images/404/robot-mate.webp" />
+            <source type="image/webp" srcset="/images/404/robo-mate.webp" />
             <img
-              src="/images/404/robot-mate.png"
+              src="/images/404/robo-mate.png"
               alt="Robot tomando mate con cara de vago"
-              width="480"
+              width="800"
-              height="480"
+              height="436"
               class="w-full max-w-md mx-auto h-auto"
               loading="eager"
               decoding="async"