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"
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');