Dekadę temu edycja obrazu na stronie oznaczała przesłanie go, czekanie, aż serwer wykona robotę, i pobranie wyniku. Dziś przeglądarka potrafi skompresować zdjęcie 30 MB, przekonwertować PNG na WebP albo zmienić rozmiar partii obrazów, nigdy nie kontaktując się z serwerem. Ta zmiana stała się możliwa dzięki dwóm technologiom: Canvas i WebAssembly. Żadna nie jest tajemnicza, gdy zobaczysz, co robi każda.
Canvas: powierzchnia do rysowania z dostępem na poziomie pikseli
Każda nowoczesna przeglądarka ma Canvas API — pusty prostokąt, na którym możesz rysować za pomocą JavaScriptu. Jego prawdziwa moc dla narzędzi do obrazów to nie rysowanie kształtów; to że Canvas daje kodowi bezpośredni dostęp do pojedynczych pikseli obrazu.
Gdy ładujesz zdjęcie do płótna, przeglądarka wręcza Twojemu kodowi tablicę liczb: wartości czerwieni, zieleni, niebieskiego i alfa (przezroczystości) dla każdego piksela. Stamtąd zwykłe operacje stają się proste:
- Zmiana rozmiaru oznacza próbkowanie tej siatki pikseli do mniejszej albo większej.
- Kadrowanie oznacza skopiowanie prostokątnego obszaru do nowego płótna.
- Obracanie i odbijanie to przekształcenia geometryczne stosowane przed rysowaniem.
- Konwersja formatu dzieje się, gdy eksportujesz płótno — poproś o JPEG, PNG albo WebP, a przeglądarka odpowiednio zakoduje piksele.
Wszystko to działa na Twoim własnym urządzeniu, korzystając z Twojego procesora, a gdzie dostępne — karty graficznej. Nic nie jest przesyłane, bo piksele nigdy nie opuszczają strony. Dlatego konwerter obrazów potrafi zamienić PNG w WebP w chwili, gdy go wrzucisz — nie ma rundy do serwera, na którą trzeba czekać.
WebAssembly: prędkość bliska natywnej wewnątrz przeglądarki
Canvas obsługuje typowe przekształcenia, ale niektóre zadania potrzebują poważnej siły obliczeniowej — kodowanie JPEG wysokiej jakości, optymalizacja PNG, uruchomienie modelu AI do wycięcia tła. Sam JavaScript może być do tego za wolny. Tu wkracza WebAssembly (często skracane do Wasm).
WebAssembly to zwarty, niskopoziomowy format, który przeglądarki potrafią wykonywać z prędkością bliską natywnej. Deweloperzy biorą szybki, sprawdzony w boju kod napisany w językach jak C, C++ albo Rust — te same biblioteki, które napędzają oprogramowanie graficzne na komputery — i kompilują go do Wasm. Przeglądarka uruchamia potem ten kod w ciasnym, odizolowanym środowisku, znacznie szybciej niż odpowiadający mu JavaScript.
W praktyce oznacza to, że karta przeglądarki potrafi teraz wykonać pracę, która kiedyś wymagała serwera albo aplikacji na komputer: kodować obrazy z kompresją klasy profesjonalnej, usuwać metadane albo uruchamiać sieć neuronową do usuwania tła — wszystko lokalnie.
Dlaczego przetwarzanie lokalne jest zarazem prywatne i szybkie
Połącz Canvas i WebAssembly, a korzyści wypływają naturalnie.
Prywatność jest wpisana w konstrukcję, nie jest obietnicą. Ponieważ piksele zostają na stronie, a przetwarzanie działa na Twoim procesorze, nie ma kroku przesyłania. Nie ma serwerowej kopii Twojego pliku do przechowywania, logowania, buforowania ani trenowania — bo plik nigdy nie został przesłany. Nie musisz ufać polityce prywatności; możesz ją zweryfikować, włączając tryb samolotowy i patrząc, jak narzędzie działa dalej.
Szybkość bierze się z całkowitego wycięcia sieci. Najwolniejszym krokiem narzędzia serwerowego jest zwykle przerzucanie Twojego pliku w górę i z powrotem w dół. Usuń to, a zdjęcie 40 MB przetwarza się mniej więcej tak szybko jak 40 KB. Nie ma też kolejki — Twoje urządzenie pracuje nad samym Twoim obrazem, a nie tysiącami cudzych.
Jest bonus, którego większość ludzi się nie spodziewa: ponieważ całe narzędzie to tylko kod i zasoby, przeglądarka może je zapisać w pamięci podręcznej. IMG.DIY to PWA z service workerem, więc po pierwszej wizycie narzędzia są przechowywane na Twoim urządzeniu i działają dalej offline — w trybie samolotowym, w samolocie, gdziekolwiek. Kompresja i konwersja w ogóle nie potrzebują połączenia.
Kompromisy, uczciwie
Przetwarzanie w przeglądarce nie jest magią i nie jest wolne od limitów. Bardzo duże partie mogą obciążyć pamięć słabszego telefonu, bo praca korzysta z zasobów Twojego urządzenia zamiast centrum danych. A kilka funkcji naprawdę potrzebuje sieci — cokolwiek, co wywołuje zewnętrzną usługę, jak audyt szybkości strony, nie może działać offline. Usuwanie tła to przypadek pośredni: działa lokalnie, ale dopiero po jednorazowym pobraniu pliku modelu.
Ale do codziennych zadań — kompresja, konwersja, zmiana rozmiaru, kadrowanie, obracanie — przeglądarka jest teraz kompletnym, prywatnym, szybkim warsztatem obrazów, który akurat mieszka w karcie. Bez przesyłania, bez serwera, bez czekania.