Bun.Image делает весь ваш пайплайн обработки изображений устаревшим
BBetter Stack
Computing/SoftwareInternet Technology
Transcript
00:00:00Это Bun Image, встроенный API для обработки изображений, появившийся в Bun 1.3.14, который умеет изменять размер,
00:00:06кадрировать и конвертировать изображения между различными форматами без сторонних зависимостей,
00:00:10и всё это работает вне основного потока, а значит, не будет блокировать ваш сервер во время
00:00:14обработки. Но Bun — это уже среда выполнения, менеджер пакетов, бандлер, инструмент для тестирования,
00:00:19а теперь ещё и обработчик изображений? Не слишком ли это много, или это говорит нам о
00:00:24чём-то более важном в развитии Bun? Подписывайтесь, и давайте выясним.
00:00:30Если вы когда-либо обрабатывали изображения на сервере с помощью JavaScript, возможно, вы использовали библиотеку
00:00:35Sharp, даже не подозревая об этом. У неё более 55 миллионов скачиваний в неделю на npm, и она даже
00:00:41используется в Next.js для оптимизации изображений. Но Sharp опирается на нативный бинарный файл libvips,
00:00:47что означает, что при каждой установке нужно скачивать подходящую сборку для вашей платформы. И если у вас
00:00:51когда-нибудь падал Docker-билд или CI-пайплайн из-за этого, вы знаете, как это неприятно. Поэтому в Bun решили
00:00:57просто встроить обработку изображений в саму среду выполнения, и она на самом деле быстрее, чем Sharp в
00:01:02большинстве тестов. Чтение метаданных — в 70 раз быстрее, а изменение размера — примерно на 30% быстрее. Сейчас многие
00:01:08разработчики искренне недоумевают, зачем Bun добавил это, но я начинаю догадываться, к чему всё идет,
00:01:13и расскажу об этом позже. А пока давайте разберем несколько демо того, как использовать
00:01:17API Bun Image. Попробуем его на моем блоге, который представляет собой статический сайт на Waku и содержит
00:01:22несколько огромных изображений. Для начала создадим простой скрипт, который оптимизирует одно изображение,
00:01:27— это фото моего профиля, и он способен уменьшить размер на 99%, что просто безумие.
00:01:33Посмотрим как. Сначала мы получаем изображение, заметьте, мы используем Bun.image здесь, но можно также сделать
00:01:37Bun.file с функцией image. Затем мы меняем размер изображения, чтобы уменьшить его, задавая ширину 800
00:01:43пикселей, а высота вычисляется автоматически на основе соотношения сторон. Но если бы мы хотели,
00:01:47мы могли бы добавить её здесь. Затем мы задаем выходной формат WebP с пониженным качеством. Конечно,
00:01:52поддерживаются и другие выходные форматы, а потом мы записываем новое изображение в файл,
00:01:56что является промисом, поэтому требует ключевого слова await. И вы видите, насколько это просто.
00:02:01На самом деле, весь этот код здесь лишний, так что мы могли бы его удалить и сделать код еще проще.
00:02:06Мы также могли бы установить фильтр изменения размера, изменив ядро ресемплинга, дополнительно уменьшая размер изображения.
00:02:10Мы могли бы повернуть или отразить изображение, и это действительно круто. Мы могли бы даже изменить яркость или
00:02:15насыщенность, что могло бы привести к некоторым странным результатам. Но есть кое-что действительно умное, что
00:02:19можно сделать при медленном соединении — использовать функцию заполнителя (placeholder), чтобы автоматически
00:02:23показывать размытое изображение, пока загружается основное. Чтобы сделать это, у меня есть цикл for, который
00:02:29проходит по каждому файлу, имеющему эти расширения в директории, где находятся все
00:02:34изображения блога. Каждое изображение изменяется в размере, масштабируется вниз без кадрирования и
00:02:39не увеличивается. Затем мы создаем заполнитель для каждого изображения, который создает thumb-хэш, то есть он кодирует
00:02:45любое изображение в 28-байтовый хэш, идеально подходящий для размытого заполнителя.
00:02:49Этот хэш добавляется в объект заполнителей, а затем записывается в файл,
00:02:53который выглядит вот так. Теперь, причина, по которой заполнитель является base64 изображением, а не
00:02:58отдельным меньшим WebP изображением, заключается в том, чтобы сети не пришлось делать запрос на его получение.
00:03:02Так что я могу импортировать все заполнители и добавить их как фоновое изображение в CSS,
00:03:07пока ожидается загрузка основного изображения, что будет работать для каждого изображения в моем блоге.
00:03:11Но если вы хотите сделать это для одного изображения в MDX-файле, можно просто добавить base64-код
00:03:16вручную, что сработает так же хорошо. Заметьте, что вы также можете получить похожее поведение с
00:03:20JPEG изображениями, установив свойство progressive в true. Конечно, есть ещё много вещей, которые поддерживает
00:03:24Bun Image, о которых я еще не рассказал, например, возможность получения изображений из S3-совместимого
00:03:28бакета, или записи изображений в бакет, использование конвейера изображений как допустимого тела ответа,
00:03:33и настройка резервного формата, если конкретная ОС не поддерживает какой-то из них.
00:03:37Стоит ли это использовать? Ну, если вы уже на Bun, то да, это очевидный выбор.
00:03:41Но если вы используете Node, то Sharp работает очень хорошо и проверен в бою,
00:03:45и нет необходимости менять среду выполнения только ради обработки изображений.
00:03:49Помните, я сказал, что есть более важная причина, по которой Bun добавил это? Что ж, если посмотреть на то, что Bun
00:03:54делал за последний год: встроенный SQLite, S3, Postgres, а теперь и изображения — это по сути
00:03:59всё, что нужно для полнофункционального приложения, за исключением, возможно, аутентификации и email. Но это заставляет меня задуматься,
00:04:04пытается ли Bun создать Laravel или Rails для JavaScript, но на уровне среды выполнения? Если это так,
00:04:11то следующее, над чем они будут работать — это аутентификация. И если так, помните, вы услышали это здесь первыми.
00:04:15Но, к сожалению, сегодня нельзя говорить о Bun, не упоминая огромный переход с Zig на Rust,
00:04:20который, будем надеяться, выйдет в следующей версии. Будем надеяться, что все пройдет хорошо.
00:04:25Раз уж заговорили о Zig, если вы хотите узнать больше о языке Vercel Language Zero, который выглядит как Zig,
00:04:29но не является им, и создан для AI-агентов, посмотрите это видео от Джеймса.