Módulo de Imágenes

Etiqueta <img> simple

<img
  src="https://cdn.webability.info/abcdefghij/productos/800x600/zapatilla.jpg.webp"
  alt="Zapatilla deportiva"
  width="800" height="600"
/>

Elemento <picture> con AVIF y WebP

<picture>
  <source
    type="image/avif"
    srcset="https://cdn.webability.info/abcdefghij/blog/1200x630/portada.jpg.avif"
  />
  <source
    type="image/webp"
    srcset="https://cdn.webability.info/abcdefghij/blog/1200x630/portada.jpg.webp"
  />
  <img
    src="https://cdn.webability.info/abcdefghij/blog/1200x630/portada.jpg.jpg"
    alt="Portada del artículo"
    width="1200" height="630"
  />
</picture>

srcset responsivo

<img
  srcset="
    https://cdn.webability.info/abcdefghij/hero/480x320/banner.jpg.webp  480w,
    https://cdn.webability.info/abcdefghij/hero/768x512/banner.jpg.webp  768w,
    https://cdn.webability.info/abcdefghij/hero/1200x800/banner.jpg.webp 1200w
  "
  sizes="(max-width: 600px) 480px, (max-width: 900px) 768px, 1200px"
  src="https://cdn.webability.info/abcdefghij/hero/1200x800/banner.jpg.webp"
  alt="Banner principal"
/>

Imagen de fondo en CSS

.hero {
  background-image: url(
    "https://cdn.webability.info/abcdefghij/home/1920x1080/fondo.jpg.webp"
  );
  background-size: cover;
}

Imagen básica en WebP (formato por defecto)

<img
  class="wa-lazy"
  data-src="/imagenes/logo.png"
  data-width="50"
  data-height="50"
  style="width:50px; height:50px;"
  alt="Logo"
/>

Imagen en AVIF con dimensiones explícitas

<img
  class="wa-lazy"
  data-src="/fotos/producto.jpg"
  data-width="400"
  data-height="300"
  data-format="avif"
  style="width:400px; height:300px;"
  alt="Producto"
/>

Hero banner en WebP

<img
  class="wa-lazy rounded-xl"
  data-src="/static/images.png"
  data-width="600"
  data-height="450"
  data-format="webp"
  style="width:600px;"
  alt="Hero"
/>

Formato original (sin conversión)

<img
  class="wa-lazy"
  data-src="/catalogos/ficha.gif"
  data-width="300"
  data-height="200"
  data-format="original"
  alt="Animación de ficha"
/>

cURL — obtener imagen

curl -X GET \
  -H "X-WA-Token: {token}" \
  -H "X-WA-Timestamp: {unix}" \
  -H "X-WA-Digest: {hmac}" \
  "https://api.webability.info/v1/image/productos/800x600/zapatilla.jpg.webp" \
  -o zapatilla.webp

Go — HTTP client

req, _ := http.NewRequest("GET",
  "https://api.webability.info/v1/image/productos/800x600/zapatilla.jpg.webp", nil)
req.Header.Set("X-WA-Token", token)
req.Header.Set("X-WA-Timestamp", ts)
req.Header.Set("X-WA-Digest", digest)
resp, _ := http.DefaultClient.Do(req)
// resp.Body contiene la imagen binaria

cURL — subir imagen

curl -X POST \
  -H "X-WA-Token: {token}" \
  -H "X-WA-Timestamp: {unix}" \
  -H "X-WA-Digest: {hmac}" \
  -F "file=@/local/zapatilla.jpg" \
  "https://api.webability.info/v1/image/productos/zapatilla.jpg"

Respuesta JSON

{
  "status": "ok",
  "path": "productos/zapatilla.jpg",
  "filename": "zapatilla.jpg",
  "size": 284560,
  "cache_purged": 12
}

cURL — purgar imagen específica

curl -X DELETE \
  -H "X-WA-Token: {token}" \
  -H "X-WA-Timestamp: {unix}" \
  -H "X-WA-Digest: {hmac}" \
  "https://api.webability.info/v1/image/productos/zapatilla.jpg"

Respuesta JSON

{
  "status": "ok",
  "deleted_firstcache": 1,
  "deleted_secondcache": 8,
  "total": 9
}

Go

import (
  "crypto/hmac"
  "crypto/sha256"
  "fmt"
  "time"
)

token  := "mi_token_secreto"
method := "GET"
path   := "/v1/image/productos/800x600/item.jpg.webp"
ts     := fmt.Sprintf("%d", time.Now().Unix())
msg    := method + "|" + path + "|" + ts + "|" + token

mac := hmac.New(sha256.New, []byte(token))
mac.Write([]byte(msg))
digest := fmt.Sprintf("%x", mac.Sum(nil))

JavaScript (Node.js)

const crypto = require('crypto');

const token  = 'mi_token_secreto';
const method = 'GET';
const path   = '/v1/image/productos/800x600/item.jpg.webp';
const ts     = Math.floor(Date.now() / 1000).toString();
const msg    = `${method}|${path}|${ts}|${token}`;

const digest = crypto
  .createHmac('sha256', token)
  .update(msg)
  .digest('hex');