Jak działa konwersja obrazów w przeglądarce
Każda konwersja to czterostopniowy pipeline działający w całości w JavaScript. Żadna biblioteka kodeków nie jest pobierana — własny Canvas API przeglądarki obsługuje dekodowanie i ponowne kodowanie.
- 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łuje
canvas.toBlob(callback, targetMimeType, quality), aby ponownie zakodować piksele. Wyjście PNG jest zawsze bezstratne; JPEG i WebP respektują suwak jakości. - 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?
Obrazy źródłowe: dowolny format, który przeglądarka może zdekodować — PNG, JPEG, WebP, GIF i BMP są wszystkie akceptowane. Formaty wyjściowe: PNG (bezstratny), JPEG i WebP. Wyjście AVIF nie jest jeszcze obsługiwane, ponieważ koder Canvas API jest dostępny tylko w Chrome 105+ i jest nieobecny w Safari i Firefox; ścieżka AVIF oparta na WASM jest planowana na przyszłe wydanie.
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.
Kiedy pojawi się obsługa AVIF?
Kodowanie AVIF przez canvas.toBlob(…, 'image/avif') działa dziś tylko w Chrome 105+; Safari i Firefox tego nie obsługują. Przyszłe wydanie doda opcjonalną ścieżkę AVIF z lekkim koderem WebAssembly, aby funkcja działała we wszystkich przeglądarkach. Do tego czasu opcja AVIF jest wyświetlana jako „wkrótce”, a koder WebP (powszechnie obsługiwany w nowoczesnych przeglądarkach) jest zalecaną alternatywą nowej generacji.
Upuść obrazy, wybierz format, konwertuj. Wszystko działa w Twojej karcie — bez przesyłania, bez konta, bez czekania na serwer.