mauri/hostingdelsur.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mauri 2026-06-09 13:36:01 -03:00
parent e0becb9690
commit ed552fae06
5 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
public/images/404/README.md
View File

@ -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)
├── robot-mate.webp (preferido moderno, <50KB)
└── robot-mate.avif (óptimo, <30KB)
├── robo-mate.png (PNG fallback, 800x436, ~320KB)
├── robo-mate.webp (WebP, 800x436, ~15KB)
└── 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/webp" srcset="/images/404/robot-mate.webp" />
<img src="/images/404/robot-mate.png" alt="..." onerror="fallback" />
<source type="image/avif" srcset="/images/404/robo-mate.avif" />
<source type="image/webp" srcset="/images/404/robo-mate.webp" />
<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
convert robot-mate-original.png -quality 82 -resize 600x600 robot-mate.webp
# AVIF (~8KB)
avifenc --min 25 --max 35 -o robo-mate.avif robo-mate-orig.png
# AVIF
avifenc --min 25 --max 35 --speed 6 -o robot-mate.avif robot-mate-original.png
# WebP (~15KB)
convert robo-mate-orig.png -quality 82 -define webp:method=6 robo-mate.webp
# PNG fallback
convert robot-mate-original.png -quality 90 -resize 480x480 robot-mate.png
# PNG fallback (~320KB)
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/`
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
Original: `https://nube.hostingdelsur.net/s/56N5mT9BEdNXSXB` (Robo-mate.png, 1408x768).

BIN
public/images/404/robo-mate.avif Normal file
View File

Binary file not shown.

BIN
public/images/404/robo-mate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 KiB

BIN
public/images/404/robo-mate.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

10
src/pages/404.astro
View File

@ -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/webp" srcset="/images/404/robot-mate.webp" />
<source type="image/avif" srcset="/images/404/robo-mate.avif" />
<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"
height="480"
width="800"
height="436"
class="w-full max-w-md mx-auto h-auto"
loading="eager"
decoding="async"