Jak działa kompresja obrazów w przeglądarce
Każdy przebieg kompresji działa w całości w JavaScript. Żadna biblioteka kodeków nie jest pobierana i żaden serwer nie jest zaangażowany. Własny Canvas API przeglądarki dekoduje obraz, koduje go ponownie przy niższej jakości i przekazuje Blob, który strona może podglądać, pobierać lub spakować do ZIP. Ponieważ każdy krok pozostaje w piaskownicy karty, oryginalne pliki nigdy nie trafiają do sieci.
- Odczytuje każdy przesłany plik jako Blob i tworzy URL obiektu, aby przeglądarka mogła go zdekodować lokalnie, bez kopiowania bajtów na serwer ani zapisywania ich na dysku.
- Rysuje zdekodowany obraz na pozaekranowym elemencie Canvas w jego oryginalnych wymiarach pikseli, gotowy do ponownego kodowania.
- Wywołuje
canvas.toBlob(callback, mimeType, quality), aby ponownie zakodować piksele. W trybie jakości wartość suwaka jest bezpośrednio mapowana na ustawienie kwantyzacji kodera; w trybie docelowego rozmiaru strona bisekcjonuje wartość jakości, aż wyjściowy Blob zmieści się poniżej Twojego budżetu bajtowego. - Wyświetla odczyt przed/po z oryginalnym rozmiarem, skompresowanym rozmiarem i procentem oszczędności, a następnie oferuje pobieranie dla każdego obrazu lub pojedynczy ZIP dla całego wsadu. ZIP jest tworzony w pamięci przy użyciu fflate, biblioteki 8 KB ładowanej przy pierwszym użyciu.
Dlaczego warto kompresować obrazy?
- Mniejsze obrazy ładują się szybciej. Zmniejszenie obrazu hero z 4 MB do 600 KB bezpośrednio poprawia Largest Contentful Paint — jeden ze wskaźników Core Web Vitals używanych przez Google do rankingu. Na stronie z kilkoma zdjęciami oszczędności sumują się w szybsze pierwsze wyświetlenie.
- Limity przesyłania i załączników są wszędzie. Wiele platform CMS, narzędzi do zgłoszeń i systemów e-mail odrzuca pliki powyżej 1 lub 2 MB. Szybka kompresja pozwala zmieścić zdjęcie poniżej limitu bez otwierania pełnego edytora.
- Przepustowość i przechowywanie kosztują przy dużej skali. Wysyłanie WebP z jakością 0,8 zamiast pełnowymiarowego PNG może zmniejszyć ładunek obrazów o jedną trzecią lub więcej, co obniża rachunki za ruch wychodzący CDN i zużycie danych mobilnych przez odwiedzających.
- Prywatność ma znaczenie w przypadku wrażliwych obrazów. Ponieważ wszystko działa w przeglądarce, skany dokumentów, obrazy medyczne i wewnętrzne zrzuty ekranu pozostają na Twoim urządzeniu — nie ma przesyłania do zewnętrznych serwerów takich jak TinyPNG.
Typowe zastosowania
Kompresja pojawia się zawsze, gdy obraz jest większy niż miejsce, do którego trafia. Trzy schematy, które widzimy wciąż na nowo.
- Przygotowanie zdjęć produktów dla sklepu internetowego. Oryginały JPEG są kompresowane do jakości 0,8 (lub celu 200 KB), aby sklep pozostał szybki i przeszedł Core Web Vitals na urządzeniach mobilnych.
- Zmniejszanie zrzutów ekranu przed dołączeniem do systemu śledzenia błędów lub wiki. Wsad zdjęć PNG przekonwertowanych do JPEG z jakością 0,85 często zmniejsza się z dziesiątek megabajtów do kilku.
- Zmieszczenie zdjęcia poniżej limitu przesyłania — portal rekrutacyjny odrzucający pliki powyżej 1 MB, system e-mail z wąskim limitem załączników albo awatar forum, który musi mieścić się w określonym budżecie bajtowym.
Przykład praktyczny: JPEG 4 MB do 400 KB
JPEG 4 MB prosto z aparatu to częsty plik, który przekracza limity przesyłania i spowalnia strony. To uczciwy wzorzec dla tego, co kompresja oszczędza.
Upuść JPEG do strefy przesyłania, pozostaw format na JPEG i albo przesuń suwak jakości do 0,7, albo przełącz na tryb docelowego rozmiaru i wpisz 400 KB. W trybie jakości pipeline Canvas koduje raz i pokazuje wynik — zazwyczaj około 500–700 KB w zależności od zdjęcia. W trybie docelowego rozmiaru strona wypróbowuje kilka wartości jakości, wybiera najwyższą mieszczącą się poniżej 400 KB i podaje procent oszczędności. Kliknij Pobierz na karcie, aby pobrać pojedynczy plik, lub kliknij Pobierz .zip, jeśli skompresujesz kilka obrazów jednocześnie. Cały cykl działa w dużo poniżej sekundy dla obrazu tej wielkości i nie zużywa żadnej przepustowości po zakończeniu ładowania samej strony.
Jaka jest różnica między trybem jakości a trybem docelowego rozmiaru?
Tryb jakości daje jeden suwak od 0,1 do 1,0, który odpowiada ustawieniu kwantyzacji kodera JPEG lub WebP — niższe wartości oznaczają mniejsze pliki i bardziej widoczne artefakty. Tryb docelowego rozmiaru odwraca problem: podajesz rozmiar w kilobajtach, a strona bisekcjonuje wartość jakości, kodując kilkakrotnie, aż znajdzie najwyższą jakość mieszczącą się poniżej budżetu. Tryb docelowego rozmiaru przydaje się, gdy obowiązuje twardy limit (np. limit przesyłania 1 MB); tryb jakości jest szybszy i lepszy, gdy zależy Ci na przewidywalnym efekcie wizualnym. PNG jest bezstratny, więc żaden tryb go nie dotyczy.
Czy to odbywa się na moim urządzeniu?
Tak, w całości. Strona używa natywnego Canvas API przeglądarki i Web File API do dekodowania i ponownego kodowania każdego obrazu w pamięci. Żadne dane obrazów nie są wysyłane na serwer, nie ma tymczasowego przesyłania ani żadnego obiegu przez chmurę. Możesz to sam sprawdzić: otwórz DevTools, przejdź do panelu Sieć i uruchom kompresję. Jedyne żądania wychodzące, które zobaczysz, to wstępne załadowanie strony i wywołania reklamowe. Nic w kształcie obrazu nie opuszcza karty.
Dlaczego kompresja PNG czasami prawie nie zmniejsza pliku?
PNG jest formatem bezstratnym, więc Canvas API nie może odrzucać szczegółów, aby zmniejszyć plik — może tylko przepakować te same piksele. W przypadku fotografii PNG jest już duży, a bezstratne ponowne kodowanie niewiele oszczędza. Prawdziwy zysk pochodzi z przełączenia formatu wyjściowego na JPEG lub WebP, które używają stratnej kompresji odpowiedniej do zdjęć i rutynowo dają 4–10 razy mniejsze pliki. Zachowaj PNG tylko wtedy, gdy potrzebujesz bezstratnej jakości lub przezroczystości; w przeciwnym razie wybierz JPEG do zdjęć lub WebP dla najlepszego balansu rozmiaru i jakości.
Który format powinienem wybrać?
Dla fotografii WebP z jakością 0,8 daje najlepszy balans rozmiaru do jakości i jest obsługiwany przez każdą przeglądarkę wydaną od 2021 roku; JPEG jest bezpiecznym, uniwersalnym zamiennikiem, gdy odbiorca jest starszy lub bardziej rygorystyczny. Wybierz PNG tylko wtedy, gdy potrzebujesz bezstratnej jakości lub kanału alfa — grafika liniowa, zrzuty UI, loga z przezroczystością. Jeśli optymalizujesz szybkość strony i Twoi odbiorcy używają nowoczesnych przeglądarek, WebP jest prawie zawsze właściwym wyborem; jeśli planujesz stary CMS lub pipeline druku odrzucający WebP, trzymaj się JPEG.
Upuść obrazy, wybierz poziom jakości lub docelowy rozmiar, kompresuj. Wszystko działa w Twojej karcie. Bez przesyłania, bez konta, bez czekania na serwer.