Sin pérdida · código abierto · Apache-2.0

Un formato de imagen sin pérdida para gráficas, logotipos e íconos

BIC guarda los gráficos planos en menos bytes que un PNG optimizado. Las fotografías se conservan como su JPEG original. El decodificador corre en el navegador, y puedes probarlo abajo con archivos reales.

Leer la documentación Ver en GitHub Paquete en npm

Decodificador para navegador y Node.js

npm install @proteo5/bic-runtime

Paso de build para Vite y webpack

npm install --save-dev @proteo5/bic-build

5.7 KiBdecodificador, gzip, una sola dependencia (fzstd)

53casos verificados contra el decodificador de Rust

46%más pequeño que el mejor formato sin pérdida, mejor caso

Por qué BIC: ahorrar ancho de banda en imágenes de color sólido

Las gráficas, capturas de interfaz, logotipos, iconos y diagramas están hechos de grandes áreas de un solo color. Un PNG ya los comprime, pero BIC guarda cada tramo de píxeles idénticos en pocos bytes y después vuelve a comprimir el resultado. Un archivo más pequeño son menos datos que descargar en cada visita, y en una conexión lenta es la diferencia entre una imagen que aparece de inmediato y una que tarda.

Buen caso: gráficos planos con pocos colores. Para ellos BIC puede ser más pequeño que un PNG optimizado (ver los resultados).
No es buen caso: las fotografías no tienen tramos largos de píxeles iguales. BIC conserva su JPEG original dentro del archivo y añade 32 bytes, así que para fotos usa JPEG o WebP.
Exacto: cada .bic se decodifica a los mismos píxeles que su original. Los ejemplos de abajo lo comprueban byte por byte.

Elegir archivo

Exporta tu propia imagen a .bic

Esta página decodifica archivos .bic, pero todavía no los codifica, así que exportar se hace desde la línea de comandos. Estos comandos comparan tu archivo igual que la tabla de resultados.

bic inspect foto.png --json   # tamaños de PNG, oxipng, WebP y BIC
bic encode foto.png foto.bic   # conserva la estrategia más pequeña
bic verify foto.png foto.bic   # los píxeles decodificados deben coincidir exactamente

El algoritmo BIC: cuando es más pequeño que el original. Es el resultado habitual en gráficas, interfaces, iconos y diagramas.
Un envoltorio: cuando el archivo original ya es más pequeño (PNG, JPEG, WebP o HEIF), se guarda dentro del .bic sin cambios. Añade --transcode para guardar el algoritmo BIC de todas formas.

Resultados

Medido en las imágenes de ejemplo. Tamaños en KiB. Cada fila usó una de dos estrategias: el algoritmo BIC (gráficos planos), o un envoltorio que guarda el JPEG original dentro del .bic con 32 bytes de cabecera (fotografías). "Mejor sin pérdida" es el más pequeño de PNG, oxipng y WebP sin pérdida. Las últimas tres columnas son formatos con pérdida, que cambian los valores de los píxeles. "MB ahorrados por cada 1,000 vistas" multiplica la diferencia por 1,000 transferencias. Los valores negativos significan que BIC es más grande.

Ejemplo	Píxeles	PNG	oxipng	WebP sin pérdida	Archivo BIC	Mejor sin pérdida	BIC más pequeño por	MB ahorrados / 1,000 vistas	WebP q80	AVIF q50	JPEG q85	Veredicto
Interfaz de software (captura)	1600×859	204.5	114.5	130.4	136.3	oxipng: 114.5	-19%	-22.38	50.8	29.6	111.2	Mantén el PNG oxipng es más pequeño. Mantenlo. AVIF q50 con pérdida es 78% más pequeño que BIC, si no se necesitan píxeles exactos.
Diagrama de flujo	706×905	60.5	10.0	11.8	11.1	oxipng: 10.0	-12%	-1.20	15.6	8.3	37.2	Mantén el PNG oxipng es más pequeño. Mantenlo. AVIF q50 con pérdida es 25% más pequeño que BIC, si no se necesitan píxeles exactos.
Gráfica de barras	1600×800	256.7	87.7	109.2	47.3	oxipng: 87.7	+46%	+41.41	74.2	30.7	158.6	Usa BIC 46% más pequeño que oxipng. AVIF q50 con pérdida es 35% más pequeño que BIC, si no se necesitan píxeles exactos.
Ícono con transparencia	512×512	25.1	7.3	14.8	7.3	oxipng: 7.3	+0%	+0.02	6.5	6.4	19.4	Usa BIC 0% más pequeño que oxipng. AVIF q50 con pérdida es 13% más pequeño que BIC, si no se necesitan píxeles exactos.
Pixel art	800×480	538.3	77.2	190.9	89.0	oxipng: 77.2	-15%	-12.14	109.7	59.3	151.1	Mantén el PNG oxipng es más pequeño. Mantenlo. AVIF q50 con pérdida es 33% más pequeño que BIC, si no se necesitan píxeles exactos.
Fotografía de paisaje	1600×1064	3,550.0	2,257.5	1,860.5	492.5	WebP lossless: 1,860.5	n/d	n/d	270.5	139.9	436.2	Mantén el JPEG El JPEG original se guarda tal cual, así que BIC no aporta nada aquí. Los formatos sin pérdida son mucho más grandes para fotografías.
Fotografía de paisaje	1600×1067	2,957.8	1,571.5	1,601.7	418.8	oxipng: 1,571.5	n/d	n/d	236.3	110.3	365.2	Mantén el JPEG El JPEG original se guarda tal cual, así que BIC no aporta nada aquí. Los formatos sin pérdida son mucho más grandes para fotografías.

Cuándo usar BIC

Las mediciones deciden los casos. Los gráficos planos con pocos colores son donde BIC ocupa menos que un PNG optimizado. Lo demás de la tabla no.

Usa BIC para

Gráficas, diagramas y esquemas con áreas sólidas
Logotipos y marcas
Íconos y pixel art con pocos colores
Cualquier imagen que deba seguir sin pérdida y sea más pequeña en BIC

No uses BIC para

Fotografías: guárdalas como JPEG o WebP
Capturas de software con texto suavizado: tienen miles de colores y BIC es más grande
Imágenes que pueden ser con pérdida: WebP o AVIF son mucho más pequeños

El paso de build convierte una imagen solo cuando BIC es al menos 10% más pequeño que el mejor formato sin pérdida, y nunca para JPEG ni para imágenes con más de 4096 colores.

Úsalo en tu proyecto

El decodificador funciona donde corre JavaScript. El paso de build convierte tus imágenes y las sirve con un Service Worker, bajo sus URL originales, así que tu HTML y tu CSS no cambian.

Cómo funciona

Las imágenes se codifican por planos, con paletas o transformadas de color, predictores y bloques de longitud de series, y luego se comprimen con Zstandard.
El codificador prueba un conjunto pequeño de candidatos y se queda con el más pequeño. El resultado se decodifica a exactamente los mismos píxeles.
Con el paso de build, un Service Worker responde las peticiones de las imágenes convertidas. Sin él, el navegador descarga el PNG de siempre.
La imagen decodificada queda en la caché del navegador, así que cada .bic se descarga una vez por dispositivo.

Cómo se verifica

53 casos hechos con el codificador de Rust: cada uno se decodifica en el runtime de JavaScript a los píxeles exactos del decodificador de Rust.
Los archivos mal formados o dañados al azar producen un error, nunca un fallo.
Pruebas de extremo a extremo en Chrome con Vite y webpack: la primera visita descarga el PNG; las siguientes muestran el .bic con píxeles idénticos.
Sin probar todavía: Firefox y Safari.

Referencia completa en la documentación →

Descargas

La herramienta de línea de comandos y el visor para Windows, Linux y macOS, del release v0.2.1. El paso de build instala el binario correcto por sí solo.

Windows x64bic-v0.2.1-x86_64-pc-windows-msvc.zipDescargar

Linux x64bic-v0.2.1-x86_64-unknown-linux-gnu.tar.gzDescargar

macOS Apple Siliconbic-v0.2.1-aarch64-apple-darwin.tar.gzDescargar

macOS Intelbic-v0.2.1-x86_64-apple-darwin.tar.gzDescargar

Todos los releases y sumas de verificación

Imágenes de ejemplo y licencias

Cada ejemplo se republica bajo su licencia, desde Wikimedia Commons. Las imágenes de más de 1600 px se redujeron, como se indica.

Interfaz de software (captura): Itemis_ANALYZE_user-interface.png, por Colofonius, CC0. Reducida para caber en 1600 px.
Diagrama de flujo: Flowchart_of_a_code_health_checker_program.png, por Ddefeat, CC0.
Gráfica de barras: Bar_Chart_Showing_South_African_Internet_Usage_by_Year.png, por ChatGPT, Public domain. Reducida para caber en 1600 px.
Ícono con transparencia: Search-icon-transparent-background.png, por Kurt Kaiser, CC0.
Pixel art: Atari_STF_demo_scene_1989-1994_Jovis_-_Pixel_art.png, por Dpla-fr, CC BY-SA 4.0.
Fotografía de paisaje: Landscape_Arnisee-region.JPG, por Simon Koopmann, CC BY-SA 2.5. Reducida para caber en 1600 px.
Fotografía de paisaje: Tuscan_landscape_with_lonely_tree.jpg, por Eric Kilby, CC BY-SA 2.0. Reducida para caber en 1600 px.