Bun.Image: Resim işleme artık çalışma ortamının içinde

Eski yol: sharp ve yerel bağımlılık

Node.js ile sunucuda resim işleyen çoğu proje sharp kütüphanesini kullanıyor. Next.js’in resim optimizasyonu da arka planda ona dayanıyor. sharp hızlı ve olgun, ama C ile yazılmış libvips kütüphanesine bağlı. Bu yüzden her kurulumda işletim sistemine ve işlemciye uygun derlenmiş dosyanın inmesi gerekiyor. Docker imajı ya da CI ortamı beklenenden farklıysa kurulum bozulabiliyor.

Bun.Image ne getiriyor?

Bun, 13 Mayıs’ta yayınlanan 1.3.14 sürümüyle resim işlemeyi doğrudan çalışma ortamının içine koydu. Ayrı bir npm paketi yok, kurulacak bir şey yok.

Kullanımı zincir şeklinde. Önce resmi açıyorsun, sonra adımları sıralıyorsun:

await Bun.file("foto.jpg").image()
  .resize(800, 800, { fit: "inside" })
  .webp({ quality: 80 })
  .write("foto-kucuk.webp");

Yapabildikleri:

• Yeniden boyutlandırma: Farklı sığdırma modları ve yeniden örnekleme filtreleriyle.
• Döndürme ve aynalama.
• Parlaklık ve doygunluk ayarı.
• Bilgi okuma: Genişlik, yükseklik ve biçimi pikselleri açmadan öğrenmek.
• Biçim çevirme: JPEG, PNG ve WebP her platformda. HEIC ve AVIF ise macOS ve Windows’ta işletim sisteminin kendi kodlayıcılarıyla çalışıyor, Linux’ta yok.

İki tasarım kararı önemli. Birincisi, zincir tembel: write() ya da bytes() gibi son adımı çağırana kadar hiçbir şey çalışmıyor. İkincisi, iş JavaScript’in ana iş parçacığının dışında yapılıyor. Yani büyük bir resmi işlerken sunucun diğer isteklere cevap vermeye devam ediyor.

Ne kadar hızlı?

Bun’ın kendi ölçümleri Linux’ta sharp 0.34.5 ile karşılaştırma yapıyor. Resmin boyutunu ve biçimini okumak yaklaşık 70 kat hızlı. Asıl iş olan boyutlandırıp yeniden kaydetme ise yüzde 20 ile 38 arası daha hızlı. Yani fark var, ama büyük kısmı küçük işlerde. Bunların üreticinin ölçümleri olduğunu da unutma.

Bulanık ön izleme hilesi

Videodaki en kullanışlı örnek, yavaş bağlantılar için. Bun.Image, bir resmin çok küçük, bulanık bir özetini ThumbHash yöntemiyle üretebiliyor. Belgelere göre bu ön izleme birkaç yüz baytlık bir metin olarak sayfaya gömülebiliyor.

Fikir şu: Sayfa açılınca önce bu bulanık görüntü anında gösteriliyor, asıl resim gelince yerini alıyor. Ön izleme sayfanın içine gömülü olduğu için ayrıca bir ağ isteği gerekmiyor. Videoda bütün blog resimleri bir döngüyle küçültülüp her biri için böyle bir ön izleme hazırlanıyor.

Kullanmalı mısın?

Videonun cevabı dengeli: Zaten Bun kullanıyorsan düşünmeden kullan. Node.js kullanıyorsan, sadece resim işlemek için çalışma ortamını değiştirmeye değmez. sharp yıllardır denenmiş bir araç.

Daha büyük resim de ilginç. Bun daha önce SQLite, Postgres ve S3 desteğini de çalışma ortamına eklemişti. Videodaki yorum, Bun’ın JavaScript için “her şeyi içinde getiren” bir temel olmaya çalıştığı yönünde. Bu yaklaşımın bedeli de var: Çalışma ortamı büyüdükçe, ondaki bir hata ya da değişiklik daha çok şeyi etkiliyor. Bun’ın sonraki hikâyesini Bun’ın Rust’a taşınması yazısında anlattık.

Düşün

• Projende sadece tek bir iş için kurduğun, kurulumda sorun çıkaran bir yerel bağımlılık var mı?
• Bir çalışma ortamının her şeyi içinde getirmesi mi, küçük kalıp işi paketlere bırakması mı sana daha mantıklı geliyor?

Kendi cümlelerimizle yazılmış bir özettir, çeviri değildir. Tüm kaynaklar yukarıda.