Bun.Image hace que todo tu proceso de imágenes quede obsoleto
BBetter Stack
Computing/SoftwareInternet Technology
Transcript
00:00:00Esto es Bun Image, una API de procesamiento de imágenes integrada en Bun 1.3.14 que puede redimensionar,
00:00:06recortar y convertir imágenes entre distintos formatos sin dependencias nativas,
00:00:10y todo ello se ejecuta fuera del hilo principal, lo que significa que no bloqueará tu servidor
00:00:14mientras procesa. Pero Bun ya es un entorno de ejecución, un gestor de paquetes, un bundler, un ejecutor de tests,
00:00:19¿y ahora también un procesador de imágenes? ¿Es demasiado, o nos está indicando algo
00:00:24más grande sobre hacia dónde se dirige Bun? Suscríbete y averigüémoslo.
00:00:30Si alguna vez has procesado imágenes en el servidor con JavaScript, quizás hayas usado una librería llamada
00:00:35Sharp sin siquiera saberlo, que tiene más de 55 millones de descargas semanales en npm, e incluso
00:00:41es utilizada por Next.js internamente para la optimización de imágenes. Pero Sharp depende de un binario nativo llamado libvips,
00:00:47lo que significa que cada instalación debe descargar la versión correcta para tu plataforma. Y si alguna vez has tenido
00:00:51un fallo en una compilación de Docker o en tu pipeline de CI debido a esto, sabes lo frustrante que es. Así que Bun decidió
00:00:57simplemente integrar el procesamiento de imágenes en el propio entorno de ejecución, y es más rápido que Sharp en
00:01:02la mayoría de los benchmarks. La lectura de metadatos es 70 veces más rápida y el redimensionamiento es aproximadamente un 30% más veloz. Ahora, muchos
00:01:08desarrolladores están confundidos sobre por qué Bun añadió esto, pero creo ver hacia dónde va todo esto,
00:01:13y te hablaré un poco de eso más tarde. Pero por ahora, veamos algunas demos de cómo usar
00:01:17la API de imágenes de Bun. Vamos a probarla en mi blog, que es un sitio Waku estático, el cual tiene
00:01:22imágenes muy grandes. Para empezar, hagamos un script sencillo que optimice una imagen,
00:01:27que es la foto de perfil con mi cara, y es capaz de reducir su tamaño en un 99%, lo cual es una locura.
00:01:33Veamos cómo. Primero, obtenemos la imagen, y fíjate que usamos Bun.image aquí, pero también podrías usar
00:01:37Bun.file con la función de imagen. Luego redimensionamos la imagen para reducir su tamaño, dándole un ancho de 800
00:01:43píxeles, y la altura se calcula automáticamente según la relación de aspecto. Pero si quisieras,
00:01:47podríamos añadirla también aquí. Luego le damos un formato de salida WebP con calidad reducida. Por
00:01:52supuesto, otros formatos de salida son compatibles, y luego guardamos la nueva imagen en un archivo,
00:01:56lo cual es una promesa, por lo que requiere la palabra clave await. Y puedes ver lo sencillo que es.
00:02:01De hecho, todo este código es innecesario, así que podríamos eliminarlo y hacerlo aún más simple.
00:02:06También podríamos establecer un filtro de redimensionamiento, cambiando el kernel de remuestreo, reduciendo aún más el tamaño de la imagen.
00:02:10Podríamos rotar o voltear la imagen, y esto es genial. Incluso podríamos cambiar el brillo o
00:02:15la saturación, lo que podría dar lugar a imágenes bastante extrañas. Pero hay algo muy inteligente que
00:02:19puedes hacer cuando tienes conexiones lentas, que es usar la función de marcador de posición (placeholder) para
00:02:23mostrar automáticamente una imagen borrosa mientras la principal se está cargando. Y para hacer eso, tengo este bucle for que
00:02:29recorre cada archivo que contiene estas extensiones dentro del directorio donde están todas
00:02:34las imágenes del blog. Así que cada imagen se redimensiona, se escala hacia abajo sin recortarse, y sin
00:02:39escalarse hacia arriba. Luego creamos un marcador de posición para cada imagen, lo que crea un 'thumb hash', lo que significa que codifica
00:02:45cualquier imagen en un hash de 28 bytes, perfecto como marcador de posición borroso.
00:02:49Este hash se añade a un objeto de marcadores de posición, y luego se escribe en un archivo,
00:02:53que se ve así. Ahora, la razón por la que el marcador de posición es una imagen en base64 en lugar de una
00:02:58imagen WebP más pequeña separada es para que la red no tenga que hacer una petición para obtenerla.
00:03:02Así que lo que podría hacer es importar todos los marcadores y añadirlos como imagen de fondo en CSS,
00:03:07mientras espero a que la imagen principal se cargue, lo cual funcionará para cada imagen de mi blog.
00:03:11Pero si quisieras hacer eso para una sola imagen en un archivo MDX, podrías simplemente añadir el código base64
00:03:16manualmente, lo cual funciona igual de bien. Nota: también puedes obtener un comportamiento similar usando
00:03:20imágenes JPEG estableciendo 'progressive' como true. Por supuesto, hay muchas otras cosas que Bun Image
00:03:24soporta que aún no he cubierto, como poder obtener imágenes de un bucket compatible con S3,
00:03:28o escribir imágenes en un bucket, usar el pipeline de imágenes como un cuerpo de respuesta válido,
00:03:33y configurar un formato de respaldo si un sistema operativo específico no soporta uno.
00:03:37Entonces, ¿vale la pena usarlo? Bueno, si ya estás usando Bun, entonces sí, es una decisión fácil.
00:03:41Pero si usas Node, entonces Sharp funciona muy bien y ha sido probado en batalla,
00:03:45y no hay necesidad de cambiar a un entorno de ejecución completamente diferente solo para el procesamiento de imágenes.
00:03:49Recuerdas cuando dije que hay una razón más grande por la que Bun añadió esto? Bueno, si miras lo que Bun ha estado
00:03:54haciendo durante el último año, SQLite integrado, S3, Postgres, y ahora imágenes, eso es básicamente
00:03:59todo lo que necesitas para una aplicación full-stack, excepto quizás autenticación y email. Pero esto me hace preguntarme,
00:04:04¿está intentando Bun construir el Laravel o Rails para JavaScript, pero al nivel del entorno de ejecución? Si lo están haciendo,
00:04:11entonces lo siguiente en lo que trabajarán será la autenticación. Y si es así, recuerda, lo escuchaste aquí primero.
00:04:15Pero desafortunadamente, hoy en día, no puedes hablar de Bun sin mencionar la enorme reescritura de Zig a Rust
00:04:20que, crucemos los dedos, saldrá en la próxima versión. Esperemos que todo salga bien.
00:04:25Hablando de Zig, si quieres aprender más sobre Language Zero de Vercel, que parece Zig,
00:04:29pero no es Zig, y está construido para agentes de IA, echa un vistazo a este video de James.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video