Czym właściwie jest kompresja obrazów
Kompresja obrazów to proces zmniejszania pliku obrazu bez (widocznej) zmiany tego, jak wygląda. Plik, od którego zacząłeś — 4 MB zdjęcie z telefonu, 2 MB PNG eksportowany z Figmy, 6 MB WebP ze screenshotów — niemal zawsze ma więcej bitów, niż obraz naprawdę potrzebuje. Kompresor ponownie koduje te same piksele w innym ustawieniu jakości, odrzuca nadmiarowe dane i zapisuje mniejszy plik, który na ekranie wygląda identycznie.
Kompresor obrazów obsługuje PNG, JPG i WebP. Działa w całości w przeglądarce dzięki API canvas: dekoduje obraz do pikseli, koduje ponownie w wybranej jakości, oddaje wynik. JPG i WebP w 75% zwykle tracą 50–60% bez widocznej różnicy. PNG jest bezstratny, więc oszczędności są mniejsze — typowo 10–30% z czystszego kodowania, nie ze straty jakości. Bez wysyłki, bez znaku wodnego, bez limitu 5 MB.
Jak to się ma do TinyPNG, iLoveIMG i Convertio
Trzy najczęstsze konkurencje, każda z innym kompromisem.
TinyPNG jest tym sławnym. Mają naprawdę świetny kompresor PNG i JPG zbudowany na pngquant i mozjpeg — lepszy niż API canvas, zwłaszcza dla PNG. Kompromis: obraz wysyła się na ich serwer, kompresuje, wraca. Darmowy poziom: 5 MB na plik i 20 obrazów na partię. Powyżej rejestrujesz się. Jeśli PNG to logo albo ikona i potrzebujesz wycisnąć każdy kilobajt, TinyPNG produkuje plik mniejszy od naszego — może o 10–20% specjalnie dla PNG.
iLoveIMG też kompresuje po stronie serwera, w podobnym schemacie upload-pobierz. Wspierają wsad, ale darmowy poziom ma limit 25 MB na plik i ogranicza liczbę kompresji dziennie. Jakość kompresji jest w porządku — używają libjpeg-turbo i podobnych — ale to kolejny round-trip do serwera, którego nie kontrolujesz.
Convertio to opcja „wszystko w jednym”: 200+ formatów, strona serwerowa, z klasycznym tańcem upload-czekaj-pobierz. Mocne pokrycie formatów, najsłabsza jakość obrazu z tej trójki. Darmowy poziom: 100 MB łącznie dziennie i 2 jednoczesne konwersje.
Wybrany przez nas kompromis: tę samą kompresję robimy w przeglądarce natywnym koderem canvas. Wolniej może o 1–2 sekundy na obraz (round-trip canvas nie jest darmowy). Bajty nie opuszczają karty. Bez limitu partii, bez dziennej kwoty, bez rejestracji. Wynik jest nieco większy od TinyPNG specjalnie dla PNG — w pozostałych przypadkach różnica jest pomijalna.
Jak używać kompresora obrazów
Upuść obrazy. Narzędzie przyjmuje PNG, JPG i WebP, do 50 MB na plik i 200 MB na partię. Mieszane formaty są OK — każdy obraz zostanie skompresowany i zakodowany ponownie w swoim formacie.
- Upuść lub wybierz obrazy. Folder uploads działają; folder 50 zdjęć wpada za jednym razem.
- Wybierz poziom jakości. 75% (domyślnie) to złoty środek dla JPG i WebP — wizualnie identyczne z oryginałem, ok. 50–60% mniejsze. Niższa jakość znaczy mniejsze pliki z widocznymi artefaktami na tekście i ostrych krawędziach. PNG zasadniczo ignoruje suwak, bo jest bezstratny.
- Kliknij Skompresuj. Każdy obraz koduje się w 1–3 s. Różnica rozmiaru pokazuje, ile dokładnie ubyło.
- Pobierz każdy osobno strzałką w dół albo kliknij „Pobierz wszystko” dla pobierania sekwencyjnego. Nazwy wyjścia to wejście z sufiksem
-compressed(wakacje.jpg→wakacje-compressed.jpg).
Wszystko dzieje się lokalnie. Dekodowanie używa natywnego loadera obrazów, ponowne kodowanie — canvas.toBlob(), pobieranie — Blob URL. Otwórz zakładkę Network podczas kompresji — zobaczysz zero żądań wychodzących.
Wybór właściwej jakości
Suwak jakości to jedna decyzja, która naprawdę się liczy. Cztery typowe ustawienia, każde do konkretnego zadania.
| Jakość | Rozmiar JPG/WebP | Widoczna strata | Zastosowanie |
|---|---|---|---|
| 95% (archiwum) | ~80% oryginału | Brak przy każdym powiększeniu | Master copy, profesjonalna fotografia |
| 85% (wysoka jakość) | ~55% oryginału | Brak dla gołego oka | Pełnoformatowe zdjęcia, portfolia, druk-jakości web |
| 75% (domyślnie) | ~40% oryginału | Niewidoczne przy normalnym oglądaniu | Social, blogi, większość użycia webowego |
| 50% (agresywnie) | ~25% oryginału | Widoczne artefakty na tekście i krawędziach | Załączniki mailowe priorytetowo na szybkość, miniatury |
Domyślne 75% jest ustawione nieprzypadkowo: to najwyższa kompresja, przy której większość ludzi nie zauważa różnicy przy normalnej odległości oglądania. Niżej pojawiają się widoczne artefakty JPG — blokowe siatki 8×8 wokół ostrych krawędzi, ubłocone gradienty na niebie, halo wokół tekstu. Jeśli obraz ma dużo tekstu albo cienkich linii, zostań przy 85% lub wyżej.
Przykład z prawdziwymi liczbami
Realny test: folder 12 zdjęć z wakacji z iPhone'a 14, wyeksportowanych jako pełnej jakości JPG. Wsad startowy to 51 MB — za duże dla maila, wolno wgrywać do Google Photos.
| Ustawienie jakości | Łączny rozmiar | Redukcja | Uwagi |
|---|---|---|---|
| Źródło (bez kompresji) | 51,0 MB | — | Domyślne z iPhone'a; znacznie więcej jakości, niż pokaże ekran |
| 85% JPG | 28,3 MB | 45% | Nieodróżnialne od źródła na każdym ekranie telefonu czy laptopa |
| 75% JPG (domyślnie) | 21,6 MB | 58% | Wciąż nieodróżnialne; to wybór dla większości |
| 60% JPG | 14,2 MB | 72% | Lekka miękkość przy bliskim oglądaniu detali |
| 50% JPG | 10,8 MB | 79% | Widoczne artefakty w cieniach i na detalach |
Przy 75% wsad spadł z 51 MB do 21,6 MB — wygodnie mieści się w załączniku Gmaila (limit 25 MB), wgrywa do iCloud w jednej czwartej czasu, wygląda identycznie na każdym ekranie, na którym ktoś je obejrzy. To właściwa odpowiedź dla niemal każdego przypadku „muszę wysłać zdjęcia”.
Porównanie z tym samym wsadem przez TinyPNG: około 19 MB wyjścia (o 12% mniej niż nasze) z ich proprietary mozjpeg, po wysłaniu 51 MB na ich serwery i czekaniu na round-trip. Za 3 MB dodatkowych oszczędności na prywatnym zestawie zdjęć kompromis nie jest oczywisty.
Czemu oszczędności PNG są mniejsze od JPG
PNG to format bezstratny. Obraz, który dekodujesz, jest bajt po bajcie tym samym, co zakodowałeś — żadna informacja o jakości nie ginie. Rozmiar pliku PNG zależy od tego, jak sprawnie koder pakuje dane, a nie od ustawienia jakości.
Natywny koder PNG przeglądarki jest dobry, ale nieszczególny. Wyspecjalizowane optymalizatory PNG, jak pngquant (silnik TinyPNG), optipng i ImageOptim, używają technik, których canvas nie ma — redukcja palety, sprytniejsze drzewa Huffmana, stratna-ale-niezauważalna kwantyzacja kolorów dla 24-bitowych PNG. Te narzędzia dają 50–70% na typowym PNG. My — 10–30%.
Dwa praktyczne wnioski:
- Jeśli obraz to fotografia zapisana jako PNG, zamień ją najpierw na JPG albo WebP — oszczędności są 5–10× większe niż dowolny optymalizator PNG. Nasz Konwerter formatu obrazu robi to jednym kliknięciem.
- Jeśli to logo, ikona, zrzut ekranu albo cokolwiek z ostrymi krawędziami i małą liczbą kolorów, PNG jest właściwym formatem. Damy umiarkowany spadek rozmiaru. Dla agresywnej kompresji PNG TinyPNG albo desktopowe ImageOptim radzą sobie lepiej. Użyj obu: nas do pierwszego przebiegu szanującego prywatność, ich, gdy potrzebujesz wycisnąć ostatnie kilobajty z produkcyjnego zasobu.
Co dzieje się z przezroczystością, EXIF i profilami kolorów
Kilka szczegółów ważnych dla konkretnych workflowów.
Przezroczystość. PNG i WebP zachowują alfę przy kompresji. Piksele, które były przezroczyste, takie zostają. JPG nie potrafi nieść alfy — wszędzie, gdzie źródło jest przezroczyste, ląduje biel przed kodowaniem. Jeśli potrzebujesz przezroczystości, kompresuj jako PNG albo WebP, nie JPG.
Metadane EXIF. API canvas usuwa większość EXIF przy ponownym kodowaniu. Model aparatu, GPS, dane ekspozycji, info o obiektywie — wszystko znika. Dla większości użytkowników to zaleta: GPS znika przed publicznym udostępnieniem. Dla osób archiwizujących pracę fotograficzną, gdzie EXIF jest ważny, użyj narzędzia z jawnym EXIF passthrough (jpegtran albo ExifTool). Możemy dodać to później, ale to mała grupa.
Profile kolorów. Osadzone profile ICC są usuwane przy ponownym kodowaniu w canvasie. Obraz wyświetla się poprawnie w każdej przeglądarce (która domyślnie zakłada sRGB), ale jeśli pracujesz z prophoto albo display-P3 do druku, szerokie informacje o kolorze nie przetrwają. Fotografowie i workflowy druku powinni używać kompresora świadomego kolorów.
Obrazy animowane. Canvas daje tylko pierwszą klatkę animowanego GIF-a lub animowanego WebP. Kompresowanie pierwszej klatki i odrzucenie animacji rzadko jest tym, czego ktoś chce, więc wyłączamy animowane formaty z tego narzędzia. Do animowanych GIF lub WebP użyj ezgif lub dedykowanego narzędzia.
Powiązane narzędzia do obrazów
Kompresor to jeden element szerszego zestawu:
- Skalowanie obrazów — zmień wymiary w pikselach (1920×1080 → 960×540). Często większy zysk dla „zmniejsz plik” — najpierw skaluj, potem kompresuj.
- Konwerter formatu obrazu — między PNG, JPG i WebP. Jeśli masz fotografię w PNG, zamiana na WebP zwykle zmniejsza plik bardziej niż jakakolwiek kompresja PNG.
- PNG na WebP — specjalnie dla tego przypadku. WebP w 80% jest zwykle 60–70% mniejszy od źródłowego PNG bez widocznej straty.
- WebP na JPG — do udostępniania WebP komuś, kogo narzędzie tego nie akceptuje.
- Kompresja PDF — jeśli realnym celem jest zmniejszenie dokumentu, wersja PDF tego narzędzia.
Najczęściej zadawane pytania
Jak to się ma do TinyPNG?
Ten sam wynik (mniejsze pliki), odwrotny model zaufania. TinyPNG wysyła obraz na ich serwer i tam przetwarza — szybko, ale bajty opuszczają Twoją maszynę. Darmowy poziom ma limit 5 MB i 20 obrazów na partię, płatne plany powyżej. My robimy tę samą pracę w przeglądarce, natywnym API canvas — wolniej może o 1–2 sekundy na obraz, ale bajty nie opuszczają karty. Bez limitu partii, bez limitu rozmiaru poza 50 MB na plik. Obydwa narzędzia są dobre — wybierz wedle kompromisu.
Dlaczego kompresja PNG jest mniej spektakularna niż JPG?
Bo PNG to format bezstratny — kompresja jest czysto strukturalna (deflate, optymalizacja palety). Natywny koder PNG przeglądarki nie ma zaawansowanych optymalizacji wyspecjalizowanych kompresorów PNG (pngquant, optipng, ImageOptim). Dla agresywnej kompresji PNG nasze narzędzie daje 10–30%; dedykowany optymalizator potrafi 50–70%. Szybki test: jeśli obraz jest fotografią, zamień na JPG lub WebP — oszczędności są 5–10× większe.
Czy mój obraz naprawdę nie jest wysyłany?
Zgadza się. Wszystko dzieje się w przeglądarce. Dekodowanie używa natywnego HTMLImageElement; ponowne kodowanie — canvas.toBlob(). Otwórz zakładkę Network podczas kompresji: zero żądań wychodzących po załadowaniu strony. HTML, CSS i JS strony idą z naszego CDN; bajty obrazu nie opuszczają karty.
Jaką jakość wybrać?
Do udostępniania zdjęć: 75% jest niewidoczne i daje ~50–60% redukcji. Do załączników mailowych, gdzie liczy się szybkość: 50–60% (widoczne artefakty na krawędziach tekstu, akceptowalne dla większości fotografii). Do archiwum: 90–95% (niemal bez straty, mniejsze oszczędności). Dla PNG suwak ma niewielkie znaczenie; wybierz 100% i pogódź się ze skromnymi 10–30% redukcji.
Czy mogę zrobić wsad wielu obrazów?
Tak. Upuść lub wybierz wiele plików (folder 50+ jest OK). Kompresują się po kolei, pobierania indywidualne. Limit 200 MB łącznie chroni pamięć przeglądarki — większe partie rób w pakietach.
Czy wynik zachowuje metadane EXIF?
Głównie nie. Re-koder canvas w przeglądarce usuwa większość EXIF (model aparatu, GPS, dane ekspozycji). Jeśli EXIF jest ważny, użyj narzędzia z dedykowanym koderem JPG z passthrough EXIF. Dla większości użytkowników (social, mail, web upload) utrata EXIF jest wręcz zaletą — usuwa GPS, którego nie chciałbyś udostępniać.
A co z przezroczystością?
PNG i WebP zachowują przezroczystość przy kompresji. JPG nie obsługuje alfy — gdzie źródło jest przezroczyste, pojawia się biel przed kodowaniem. Aby zachować przezroczystość, kompresuj jako PNG lub WebP, nie JPG.
Dlaczego brak formatów animowanych (GIF, animowany WebP)?
Dekodery canvas w przeglądarce dają tylko pierwszą klatkę obrazów animowanych. Kompresja pierwszej klatki i porzucenie animacji rzadko jest tym, czego użytkownicy chcą, więc formaty animowane są wyłączone z tego narzędzia. Do animowanych GIF lub WebP użyj ezgif albo dedykowanego narzędzia.