Imágenes Tesela en una página web

Las imágenes de la izquierda son archivos .tsl decodificados en tu navegador con WebAssembly, en paralelo y fuera del hilo principal. Incluyen una vista previa diminuta (~300 bytes) que aparece desenfocada mientras se descarga el resto. A la derecha, el mismo original en JPEG con calidad 85. Ambos tienen una calidad visual parecida.

Transparencia

Tesela guarda el canal alfa sin pérdida. Debajo, una imagen con un degradado radial de transparencia sobre un fondo de cuadros.

Con HTML normal

Con tesela-auto.js también funcionan <img src="foto.tsl"> y los fondos CSS sin elementos especiales: ver la demo.

Cómo usarlo

<script type="module" src="tesela.js"></script>

<tesela-img src="foto.tsl" alt="Descripción" fallback="foto.jpg" loading="lazy"></tesela-img>

También puedes decodificar desde JavaScript:

import { decode, encode, toObjectURL } from './tesela.js';

const imageData = await decode(await (await fetch('foto.tsl')).arrayBuffer());
const url = await toObjectURL(bytes);          // para usarla en cualquier <img>
const tsl = await encode(imageData, { quality: 85 });   // codificar en el navegador