Jak działa konwersja obrazów w przeglądarce
Każda konwersja to czterostopniowy pipeline działający w przeglądarce. Dla JPEG i PNG własne Canvas API przeglądarki obsługuje kodowanie bezpośrednio. Dla WebP w Safari i AVIF w każdej przeglądarce strona ładuje na żądanie lekki kodek WebAssembly — wciąż wszystko lokalnie, obrazy nigdy nie opuszczają urządzenia.
- Odczytuje każdy przesłany plik jako Blob i tworzy URL obiektu, aby przeglądarka mogła go zdekodować bez kopiowania bajtów na serwer.
- Rysuje zdekodowany obraz na pozaekranowym elemencie Canvas, stosując ograniczenia rozmiaru przy zachowaniu oryginalnych proporcji.
- Wywołaj
canvas.toBlob(callback, targetMimeType, quality), aby ponownie zakodować piksele dla PNG, JPEG i Chrome/Firefox WebP. Dla Safari WebP i kodowania AVIF przy pierwszym użyciu ładowany jest worker kodeka WebAssembly, który obsługuje kodowanie w wątku tła. Wyjście PNG jest zawsze bezstratne; JPEG, WebP i AVIF respektują suwak jakości, który jest mapowany bezpośrednio na ustawienie kwantyzacji kodera. - Wyświetla miniaturę przed/po z wymiarami wyjściowymi i rozmiarem pliku, a następnie oferuje przycisk pobierania dla każdego obrazu lub pojedynczy ZIP dla całej partii.
Dlaczego warto konwertować formaty obrazów?
- Przejście z PNG na WebP zmniejsza typowe rozmiary plików o 25–35% bez widocznej utraty jakości przy wartości 0,8, co bezpośrednio obniża wagę strony i poprawia wyniki LCP Core Web Vitals.
- PNG zachowuje przezroczystość, którą JPEG odrzuca, więc PNG→JPEG renderuje przezroczyste piksele na białym tle — przydatne, gdy docelowe miejsce (e-mail, stary CMS) nie akceptuje PNG.
- Platformy społecznościowe i sieci reklamowe mają rygorystyczne wymagania dotyczące formatów: Facebook i LinkedIn preferują JPEG dla zdjęć; pipeline OG preview Twittera obsługuje WebP; niektóre serwery reklamowe odrzucają kreacje inne niż JPEG.
- Standaryzacja partii obrazów o różnych formatach (zrzuty ekranu PNG, zdjęcia JPEG, eksporty WebP) do jednego formatu przed przesłaniem do CMS lub DAM eliminuje złożoność obsługi formatów w pipeline’ie importu.
Typowe zastosowania
Konwersja formatu pojawia się zawsze, gdy format źródłowy i oczekiwania odbiorcy się nie zgadzają.
- Przygotowanie zdjęć produktów dla sklepu Shopify lub WooCommerce — oryginały JPEG konwertowane do WebP z jakością 0,85 dla witryny sklepowej, PNG zachowany do eksportów gotowych do druku.
- Konwersja eksportów PNG dostarczonych przez grafika do JPEG lub WebP przed osadzeniem w projekcie React lub Next.js, aby optymalizator obrazów frameworka zaczynał od mniejszego źródła.
- Wsadowe przetwarzanie folderu zrzutów ekranu z testów QA — PNG do JPEG z jakością 0,9, aby zmniejszyć rozmiar archiwum przed dołączeniem do zgłoszenia w systemie śledzenia błędów.
Przykład praktyczny: PNG 2 MB → WebP 300 KB
PNG hero image 2 MB przy rozdzielczości 2400×1600 pikseli to typowy ładunek na marketingowych stronach docelowych.
Upuść PNG tutaj, wybierz WebP jako format docelowy, ustaw jakość na 0,8 i opcjonalnie ustaw maks. szerokość na 1200, aby zmniejszyć wymiary w pikselach o połowę. Pipeline canvas rysuje obraz w rozmiarze 1200×800 (zachowane proporcje), ponownie koduje do WebP, a karta wyjściowa pokazuje wynik — zazwyczaj 280–320 KB, redukcja o 85%. Kliknij Pobierz na karcie lub pobierz wsadowo ZIP, jeśli konwertowałeś kilka obrazów.
Jakie formaty są obsługiwane?
Po stronie wejściowej akceptowany jest każdy format, który przeglądarka może zdekodować: PNG, JPEG, WebP, GIF i BMP obejmują praktycznie każdy plik wyprodukowany przez projektanta lub narzędzie do zrzutów ekranu. Formaty wyjściowe to PNG (zawsze bezstratny), JPEG, WebP i AVIF. Wyjście AVIF jest obsługiwane przez koder WebAssembly ładowany na żądanie w każdej przeglądarce — nie jest potrzebny natywny koder Canvas.
Czy to dzieje się na moim urządzeniu?
Tak. Strona używa natywnego Canvas API przeglądarki i Web File API. Żadne dane obrazów nie są wysyłane na serwer; pipeline konwersji działa w całości w karcie przeglądarki. Możesz to zweryfikować, otwierając DevTools i sprawdzając panel Sieć — po załadowaniu strony nie ma żadnych żądań wychodzących.
Jakie są różnice jakościowe między PNG a JPEG?
PNG to format bezstratny — każdy piksel przeżywa cykl kodowania dokładnie. JPEG używa kompresji DCT i odrzuca drobne szczegóły, których oko rzadko zauważa; jakość 0,8 to powszechny punkt optymalny, gdzie wizualna różnica od oryginału jest niezauważalna dla większości widzów, ale plik jest 4–6 razy mniejszy niż PNG. WebP może działać zarówno w trybie bezstratnym, jak i stratnym; suwak jakości tutaj steruje koderem stratnym, a jakość 0,85 zazwyczaj przewyższa JPEG 0,85 o 25–30% na naturalnych zdjęciach.
Jak działa wyjście AVIF?
Kodowanie AVIF używa kodeka WebAssembly, który ładuje się na żądanie przy pierwszym wyborze formatu AVIF — bez wtyczki, bez flagi przeglądarki, bez czekania na przyszłe wydanie Chrome. Plik binarny WASM jest serwowany z naszego własnego źródła, koduje obraz w całości w wątku tła i zwraca standardowy blob image/avif gotowy do pobrania. Jedynym żądaniem sieciowym jest jednorazowe pobranie samego kodeka; żadne dane obrazu nigdy nie opuszczają urządzenia. Po załadowaniu koder pozostaje w pamięci podręcznej na czas sesji, dzięki czemu kolejne konwersje są szybsze. Pliki AVIF są zazwyczaj o 20-30% mniejsze niż WebP i o 50% mniejsze niż JPEG przy równoważnej jakości, co czyni je najlepszym wyborem dla witryn wrażliwych na wydajność.
Upuść obrazy, wybierz format, konwertuj. Wszystko działa w Twojej karcie — bez przesyłania, bez konta, bez czekania na serwer.