simpleblog

Generador estatico minimalista de blog
git clone https://git.fedi.ovh/simpleblog
Log | Files | Refs

2026-05-21-imagenes.md (1306B)

      1 title: Imagenes en simpleblog
      2 date: 2026-05-21
      3 description: Como insertar imagenes redimensionadas automaticamente.
      4 tags: imagenes, simpleblog
      5 
      6 # Imagenes
      7 
      8 Las imagenes originales viven en `images/` (alta resolucion). El build
      9 genera variantes en `public/img/` para los anchos definidos en `config`
     10 (`image_sizes`).
     11 
     12 Para usarlas en un post enlazas la URL con el sufijo del ancho:
     13 
     14 Imagen a 640 px de ancho:
     15 
     16 ![Imagen de prueba a 640px](/img/ejemplo-640.jpg)
     17 
     18 La misma a 320 px:
     19 
     20 ![Imagen de prueba a 320px](/img/ejemplo-320.jpg)
     21 
     22 Y a 1280:
     23 
     24 ![Imagen de prueba a 1280px](/img/ejemplo-1280.jpg)
     25 
     26 Original (sin sufijo, tal cual):
     27 
     28 ![Imagen original 2400x1600](/img/ejemplo.jpg)
     29 
     30 ## Variantes WebP
     31 
     32 Si en `config` defines `image_extra_formats: webp`, se generan tambien
     33 variantes WebP (pesan ~30-75% menos). Tres formas de usarlas:
     34 
     35 1. **WebP directo** (recomendado, soporte universal en navegadores
     36    modernos):
     37 
     38         ![alt](/img/ejemplo-640.webp)
     39 
     40 2. **Con fallback `<picture>`** para navegadores antiguos. Como smu no
     41    genera `<picture>`, escribelo en un post `.html`:
     42 
     43         <picture>
     44           <source srcset="/img/ejemplo-640.webp" type="image/webp">
     45           <img src="/img/ejemplo-640.jpg" alt="...">
     46         </picture>
     47 
     48 3. **Solo JPEG** (no usar WebP):
     49 
     50         ![alt](/img/ejemplo-640.jpg)