On yıl önce, bir web sitesinde bir görseli düzenlemek onu yüklemek, bir sunucunun işi yapmasını beklemek ve sonucu indirmek demekti. Bugün bir tarayıcı, bir sunucuyla hiç iletişim kurmadan 30 MB'lık bir fotoğrafı sıkıştırabilir, bir PNG'yi WebP'ye dönüştürebilir ya da bir grup görseli yeniden boyutlandırabilir. İki teknoloji bu değişimi mümkün kıldı: Canvas ve WebAssembly. Her birinin ne yaptığını gördüğünüzde ikisi de gizemli değildir.
Canvas: piksel düzeyinde erişimi olan bir çizim yüzeyi
Her modern tarayıcı bir Canvas API'si ile gelir — JavaScript ile üzerine çizebileceğiniz boş bir dikdörtgen. Görsel araçları için asıl gücü şekiller çizmek değildir; Canvas'ın koda bir görselin ayrı piksellerine doğrudan erişim vermesidir.
Bir fotoğrafı bir tuvale yüklediğinizde, tarayıcı kodunuza bir sayı dizisi verir: her piksel için kırmızı, yeşil, mavi ve alfa (saydamlık) değerleri. Oradan sıradan işlemler basitleşir:
- Yeniden boyutlandırma, o piksel ızgarasını daha küçük ya da daha büyük birine örneklemek demektir.
- Kırpma, dikdörtgen bir bölgeyi yeni bir tuvale kopyalamak demektir.
- Döndürme ve çevirme, çizmeden önce uygulanan geometrik dönüşümlerdir.
- Format dönüştürme, tuvali dışa aktardığınızda gerçekleşir — bir JPEG, bir PNG ya da bir WebP isteyin ve tarayıcı pikselleri buna göre kodlar.
Bunların hepsi kendi cihazınızda, CPU'nuzu ve mümkün olduğunda GPU'nuzu kullanarak çalışır. Hiçbir şey yüklenmez, çünkü pikseller sayfadan asla ayrılmaz. Görsel Dönüştürücünün bir PNG'yi bıraktığınız an WebP'ye çevirebilmesinin nedeni budur — beklenecek bir gidiş dönüş yoktur.
WebAssembly: tarayıcının içinde neredeyse yerel hız
Canvas yaygın dönüşümleri halleder, ama bazı işler ciddi hesaplama kası gerektirir — yüksek kaliteli JPEG kodlama, PNG optimizasyonu, bir arka planı kesmek için bir yapay zeka modeli çalıştırma. Tek başına JavaScript bunlar için fazla yavaş olabilir. WebAssembly'nin (çoğunlukla Wasm olarak kısaltılır) devreye girdiği yer burasıdır.
WebAssembly, tarayıcıların neredeyse yerel hızda yürütebildiği kompakt, düşük seviyeli bir formattır. Geliştiriciler C, C++ ya da Rust gibi dillerde yazılmış hızlı, çok denenmiş kodu — masaüstü görsel yazılımına güç veren aynı kitaplıkları — alır ve Wasm'a derler. Tarayıcı sonra o kodu sıkı, korumalı bir ortamda, eşdeğer JavaScript'ten çok daha hızlı çalıştırır.
Pratikte bu, bir tarayıcı sekmesinin artık eskiden bir sunucu ya da bir masaüstü uygulaması gerektiren işi yapabileceği anlamına gelir: görselleri profesyonel düzeyde sıkıştırmayla kodlamak, üst veriyi çıkarmak ya da arka plan kaldırma için bir sinir ağı çalıştırmak — hepsi yerel olarak.
Yerel işleme neden hem gizli hem hızlı
Canvas ile WebAssembly'yi bir araya getirin ve faydalar doğal olarak ortaya çıkar.
Gizlilik bir söz değil, yapısaldır. Pikseller sayfada kaldığından ve işleme CPU'nuzda çalıştığından, yükleme adımı yoktur. Depolanacak, kaydedilecek, önbelleğe alınacak ya da eğitilecek dosyanızın bir sunucu kopyası yoktur — çünkü dosya asla iletilmedi. Bir gizlilik politikasına güvenmek zorunda değilsiniz; uçak modunu açıp aracın çalışmaya devam etmesini izleyerek onu doğrulayabilirsiniz.
Hız, ağı tümüyle kesmekten gelir. Bir sunucu aracının en yavaş adımı genellikle dosyanızı yukarı ve geri aşağı taşımaktır. Bunu kaldırın, 40 MB'lık bir fotoğraf 40 KB'lık biri kadar hızlı işlenir. Kuyruk da yoktur — cihazınız binlerce başka insanınkinde değil, yalnızca sizin görselinizde çalışır.
Çoğu insanın beklemediği bir bonus var: tüm araç yalnızca kod ve varlıklar olduğundan, bir tarayıcı onu önbelleğe alabilir. IMG.DIY bir servis çalışanı olan bir PWA'dır, dolayısıyla ilk ziyaretinizden sonra araçlar cihazınızda depolanır ve çevrimdışı çalışmaya devam eder — uçak modunda, bir uçakta, herhangi bir yerde. Sıkıştırma ve dönüştürme hiç bağlantı gerektirmez.
Ödünler, dürüstçe
Tarayıcı içi işleme sihir değildir ve sınırlardan arınmış değildir. Çok büyük toplu işler düşük donanımlı bir telefonun belleğini zorlayabilir, çünkü iş bir veri merkezinin yerine cihazınızın kaynaklarını kullanır. Ve birkaç özellik gerçekten ağa ihtiyaç duyar — bir sayfa hızı denetimi gibi harici bir hizmeti çağıran her şey çevrimdışı çalışamaz. Arka plan kaldırma bir ara durumdur: yerel olarak çalışır, ama yalnızca model dosyasının tek seferlik bir indirmesinden sonra.
Yine de günlük işler için — sıkıştır, dönüştür, yeniden boyutlandır, kırp, döndür — tarayıcı artık bir sekmede yaşayan eksiksiz, gizli, hızlı bir görsel atölyesidir. Yükleme yok, sunucu yok, bekleme yok.