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 eksport PNG z Figmy, 6 MB WebP z narzędzia do zrzutów ekranu — niemal zawsze ma więcej bitów, niż obraz naprawdę potrzebuje. Kompresor koduje ponownie te same piksele w innym ustawieniu jakości, usuwa nadmiarowe dane i zapisuje mniejszy plik, który wygląda identycznie na ekranie.
Kompresor obrazów obsługuje PNG, JPG i WebP. Działa w całości w Twojej przeglądarce na API canvas: dekoduj obraz na piksele, zakoduj ponownie w wybranej jakości, oddaj wynik. JPG i WebP w 75% jakości zwykle kurczą się o 50–60% bez widocznej straty. PNG jest formatem bezstratnym, więc oszczędności są tam mniejsze — zwykle 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
Trzech konkurentów pojawia się najczęściej i każdy z nich robi inny kompromis niż my.
TinyPNG to ten słynny. Mają autentycznie świetny kompresor PNG i JPG zbudowany na pngquant i mozjpeg — lepszy, niż może wyprodukować API canvas przeglądarki, zwłaszcza na PNG. Kompromis: Twój obraz uploaduje się na ich serwer, kompresuje, wraca. Ich darmowa warstwa ma limit 5 MB na plik i 20 obrazów na partię. Powyżej tego się rejestrujesz. Jeśli Twój PNG to logo albo ikona i musisz wycisnąć każdy kilobajt, TinyPNG produkuje mniejszy plik niż my — o może 10–20% konkretnie na PNG.
iLoveIMG też kompresuje po stronie serwera, z podobnym przepływem upload-pobieranie. Wspierają uploady partiowe, ale darmowa warstwa ma limit 25 MB na plik i ogranicza liczbę kompresji dziennie, zanim trafisz na paywall. Jakość kompresji jest w porządku — używają libjpeg-turbo i podobnego oprzyrządowania — ale to kolejna podróż w obie strony do serwera, którego nie kontrolujesz.
Convertio to opcja kuchenny zlew: 200+ formatów, po stronie serwera, z klasycznym tańcem upload-czekaj-pobierz. Mocne pokrycie formatów, najsłabsza dedykowana jakość obrazu z trójki. Darmowa warstwa z limitem 100 MB łącznie dziennie i 2 jednoczesnymi konwersjami.
Kompromis, który wybraliśmy: robimy tę samą kompresję w Twojej przeglądarce używając natywnego enkodera canvas. Wolniej o może 1–2 sekundy na obraz (podróż canvas nie jest darmowa). Twoje bajty nigdy nie opuszczają karty. Bez limitu partii, bez kontyngentu dziennego, bez rejestracji. Wyjście jest nieco większe niż TinyPNG konkretnie na PNG — dla wszystkiego innego różnica jest pomijalna.
Jak używać Kompresora obrazów
Upuść swoje obrazy. Narzędzie akceptuje PNG, JPG i WebP, do 50 MB na plik i 200 MB łącznie na partię. Mieszane formaty są w porządku — każdy obraz zostaje skompresowany i zakodowany ponownie w swoim formacie.
- Upuść lub wybierz swoje obrazy. Uploady folderów działają; folder z 50 zdjęciami leci naraz.
- Wybierz poziom jakości. 75% (domyślny) to słodki punkt dla JPG i WebP — wizualnie identyczne ze źródłem, około 50–60% mniejsze. Niższa jakość znaczy mniejsze pliki z widocznymi artefaktami na tekście i ostrych krawędziach. PNG w dużej mierze ignoruje suwak, bo jest bezstratny.
- Kliknij Kompresuj. Każdy obraz koduje się ponownie w 1–3 sekundy. Różnica rozmiaru w wierszu pokazuje dokładnie, ile każdy się zmniejszył.
- Pobierz każdy osobno przyciskiem strzałki w dół albo kliknij Pobierz wszystko do pobierania po kolei. Nazwy plików wyjścia to wejście z sufiksem
-compressed(vacation.jpgstaje sięvacation-compressed.jpg).
Każda operacja jest lokalna. Dekodowanie używa natywnego ładowarki obrazów przeglądarki, ponowne kodowanie używa canvas.toBlob(), a pobranie to URL Blob. Otwórz zakładkę sieci podczas kroku kompresji — zobaczysz zero wychodzących żądań.
Wybór właściwego poziomu jakości
Suwak jakości to jedyna decyzja, która ma znaczenie. Są cztery częste ustawienia i każde pasuje do konkretnej roboty.
| Jakość | Rozmiar pliku JPG/WebP | Widoczna strata | Zastosowanie |
|---|---|---|---|
| 95% (archiwizacja) | ~80% oryginału | Brak przy każdym zoomie | Trzymanie kopii wzorcowej, profesjonalna fotografia |
| 85% (wysoka jakość) | ~55% oryginału | Brak dla nieuzbrojonego oka | Publikacja zdjęć w pełnym rozmiarze, portfolio, jakość druku na webie |
| 75% (domyślne) | ~40% oryginału | Niewidoczna przy normalnej odległości oglądania | Publikacja w sociale, blogi, większość użyć webowych |
| 50% (agresywne) | ~25% oryginału | Widoczne artefakty na tekście i krawędziach | Załączniki e-mail, gdzie liczy się prędkość, miniatury |
Domyślne 75% jest skalibrowane nieprzypadkowo: to najwyższa kompresja, przy której większość ludzi nie zauważa różnicy przy normalnej odległości oglądania. Zejście niżej zaczyna produkować widoczne artefakty JPG — kratki 8×8 wokół ostrych krawędzi, błotne gradienty na niebach, halo wokół tekstu. Jeśli Twój obraz ma dużo tekstu albo cienkie linie, zostań na 85% lub wyżej.
Przykład z rzeczywistymi liczbami
Realny test: folder 12 zdjęć wakacyjnych z iPhone 14, wyeksportowanych jako JPG w pełnej jakości. Startowa partia ma 51 MB łącznie — za duża, by wysłać mailem, wolna w uploadzie do Google Photos.
| Ustawienie jakości | Łączny rozmiar | Redukcja | Uwagi |
|---|---|---|---|
| Źródło (bez kompresji) | 51,0 MB | — | Domyślne iPhone'a; dużo więcej jakości, niż ekran kiedykolwiek pokaże |
| 85% JPG | 28,3 MB | 45% | Nieodróżnialne od źródła na każdym ekranie telefonu albo laptopa |
| 75% JPG (domyślne) | 21,6 MB | 58% | Nadal nieodróżnialne; to powinno wybierać większość ludzi |
| 60% JPG | 14,2 MB | 72% | Lekkie zmiękczenie przy bliskim oglądzie obszarów ze szczegółami |
| 50% JPG | 10,8 MB | 79% | Widoczne artefakty w cieniach i na drobnych szczegółach |
W 75% partia spadła z 51 MB do 21,6 MB — komfortowo mieści się w załączniku Gmaila (limit 25 MB), uploaduje się do iCloud w czwartej części 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ę udostępnić moje zdjęcia”.
Porównaj z tą samą partią przez TinyPNG: około 19 MB wyjścia (12% mniejsze niż nasze) z ich firmowym enkoderem na bazie mozjpeg, po uploadzie 51 MB na ich serwery i czekaniu na podróż w obie strony. Za 3 MB dodatkowych oszczędności na prywatnym zestawie zdjęć kompromis nie jest oczywisty.
Czemu oszczędności PNG są mniejsze niż JPG
PNG to format bezstratny. Obraz, który dekodujesz, jest bajt po bajcie taki sam jak obraz, który zakodowałeś — żadna informacja o jakości nie jest wyrzucana. Rozmiar pliku PNG zależy od tego, jak wydajnie enkoder pakuje dane, a nie od ustawienia jakości.
Natywny enkoder PNG przeglądarki jest w porządku, ale niespecjalny. Dedykowane optymalizatory PNG, jak pngquant (silnik wewnątrz TinyPNG), optipng i ImageOptim, używają technik, których canvas przeglądarki nie ma — redukcji palety, sprytniejszych drzew Huffmana, stratnej-ale-niezauważalnej kwantyzacji koloru dla 24-bitowych PNG. Te narzędzia dają 50–70% redukcji na typowym PNG. My dajemy 10–30%.
Dwie praktyczne wnioski:
- Jeśli Twój obraz to fotografia zapisana jako PNG, zamień ją najpierw na JPG lub WebP — oszczędności są 5–10× większe, niż jakikolwiek optymalizator PNG może wyprodukować. Nasz Image Format Converter robi to jednym kliknięciem.
- Jeśli Twój obraz to logo, ikona, zrzut ekranu albo cokolwiek z ostrymi krawędziami i kilkoma kolorami, PNG to właściwy format. Dostajesz skromny spadek rozmiaru. Do agresywnej kompresji specyficznej dla PNG TinyPNG albo desktopowe ImageOptim wypadają lepiej. Użyj obu: nas do prywatności-przyjaznego przejścia partiowego, ich, gdy musisz wycisnąć ostatnie kilobajty z zasobu, który leci na produkcję.
Co dzieje się z przezroczystością, EXIF i profilami kolorów
Kilka detali ma znaczenie dla konkretnych procesów.
Przezroczystość. PNG i WebP zachowują alfę przez kompresję. Piksele, które były przezroczyste, zostają przezroczyste. JPG nie może nieść alfy — wszędzie tam, gdzie obraz źródłowy jest przezroczysty, zostaje zamalowany na biało przed kodowaniem. Jeśli potrzebujesz przezroczystości, kompresuj jako PNG lub WebP, nie JPG.
Metadane EXIF. API canvas usuwa większość EXIF, gdy koduje ponownie. Model aparatu, współrzędne GPS, dane ekspozycji, info o obiektywie — wszystko znika. Dla większości użytkowników to zaleta: współrzędne GPS są usuwane, zanim publicznie udostępnisz zdjęcie. Dla użytkowników archiwizujących prace fotograficzne, gdzie EXIF ma znaczenie, użyj narzędzia z jawnym przepustem EXIF (jpegtran albo ExifTool na desktopie). Moglibyśmy to dodać później, ale to mała publiczność.
Profile kolorów. Osadzone profile ICC są usuwane podczas ponownego kodowania przez canvas. Obraz wyświetla się poprawnie w każdej przeglądarce (która domyślnie zakłada sRGB), ale jeśli pracujesz z plikami źródłowymi prophoto albo display-P3 na druk, informacje o szerokiej gamie kolorów nie przetrwają. Fotografowie i procesy druku powinni używać kompresora świadomego kolorów.
Obrazy animowane. Canvas przeglądarki daje nam tylko pierwszą klatkę animowanego GIF-a albo animowanego WebP. Kompresja pierwszej klatki i porzucenie animacji to rzadko to, czego ktokolwiek chce, więc wykluczamy formaty animowane z tego narzędzia. Do kompresji animowanego GIF-a albo WebP użyj ezgif albo dedykowanego narzędzia.
Powiązane narzędzia obrazu
Kompresor obrazów to jeden element szerszego zestawu narzędzi do obrazów:
- Image Resizer — zmień wymiary pikselowe (1920×1080 → 960×540). Często większa wygrana przy „zmniejsz ten plik” — najpierw zmień rozmiar, potem skompresuj.
- Image Format Converter — konwertuj między PNG, JPG i WebP. Jeśli masz fotografię PNG, konwersja na WebP zwykle zmniejsza ją bardziej niż kompresja samego PNG kiedykolwiek mogła.
- PNG na WebP — konkretnie do konwersji PNG na WebP. WebP w 80% jest zwykle 60–70% mniejszy niż źródłowy PNG bez widocznej straty.
- WebP na JPG — do udostępniania plików WebP komuś, kogo narzędzie ich nie akceptuje.
- Compress PDF — jeśli Twój prawdziwy cel to zmniejszenie dokumentu, wersja PDF tego narzędzia.
Najczęściej zadawane pytania
Jak to się ma do TinyPNG?
Ten sam wynik (mniejsze pliki obrazów), przeciwny model zaufania. TinyPNG uploaduje Twój obraz na ich serwer i tam przetwarza — szybko, ale Twoje bajty opuszczają Twoją maszynę. Mają darmową warstwę z limitem 5 MB i 20 obrazami na partię, plany płatne wyżej. My robimy tę samą robotę w Twojej przeglądarce używając natywnego API canvas — wolniej o może 1–2 sekundy na obraz, ale Twoje bajty nigdy nie opuszczają karty. Bez limitu partii, bez limitu rozmiaru pliku poza 50 MB na plik. Oba narzędzia są dobre; wybierz na podstawie tego, który kompromis wolisz.
Czemu kompresja PNG jest mniej dramatyczna niż JPG?
Bo PNG to format bezstratny — kompresja jest czysto strukturalna (deflate, optymalizacja palety). Natywny enkoder PNG przeglądarki nie ma zaawansowanych optymalizacji dedykowanych kompresorów PNG (pngquant, optipng, ImageOptim). Do agresywnej kompresji PNG nasze narzędzie daje 10–30%; dedykowany optymalizator PNG potrafi 50–70%. Szybki test: jeśli Twój obraz to fotografia, zamień ją zamiast tego na JPG lub WebP — oszczędności są 5–10× większe.
Czy mój obraz naprawdę nie jest wysyłany?
Zgadza się. Każda operacja działa w Twojej przeglądarce. Dekodowanie używa natywnego HTMLImageElement; ponowne kodowanie używa canvas.toBlob(). Otwórz zakładkę sieci podczas kompresji: zero wychodzących żądań po załadowaniu strony. HTML, CSS i JS dla strony pochodzą z naszego CDN; bajty Twojego obrazu nigdy nie opuszczają karty.
Jaką jakość wybrać?
Do udostępniania zdjęć: 75% jest niewidoczne dla oka i daje ~50–60% redukcji rozmiaru. Do załączników e-mail, gdzie liczy się prędkość: 50–60% (widoczne artefakty na krawędziach tekstu, ale akceptowalne dla większości treści fotograficznych). Do archiwizacji: 90–95% (niemal bez widocznej straty, mniejsze oszczędności). Dla PNG: suwak jakości właściwie nie ma znaczenia; wybierz 100% i zaakceptuj skromną redukcję 10–30%.
Czy mogę kompresować wiele obrazów partiami?
Tak. Upuść lub wybierz wiele plików (folder z 50+ zdjęciami jest w porządku). Kompresują się jeden po drugim i dostajesz osobne pobrania. Limit 200 MB łącznie chroni Twoją przeglądarkę przed wyczerpaniem pamięci — dla większych partii rób je w grupach.
Czy wyjście zachowuje metadane EXIF?
Głównie nie. Re-enkoder canvas przeglądarki usuwa większość EXIF (model aparatu, GPS, dane ekspozycji). Jeśli konkretnie potrzebujesz zachowanego EXIF, użyj narzędzia uruchamiającego dedykowany enkoder JPG z przepustem EXIF. Dla większości użytkowników (udostępnianie w sociale, wysyłka mailem, upload webowy) utracony EXIF to właściwie zaleta — usuwa współrzędne GPS, których nie chciałeś udostępniać.
A co z przezroczystością?
Wyjścia PNG i WebP zachowują przezroczystość przez kompresję. JPG nie może nieść alfy — wszędzie tam, gdzie obraz źródłowy jest przezroczysty, zostaje zamalowany na biało przed kodowaniem. Aby zachować przezroczystość, kompresuj jako PNG lub WebP, nie JPG.
Czemu nie ma formatów animowanych (GIF, animowany WebP)?
Dekodery canvas przeglądarki dają nam tylko pierwszą klatkę obrazów animowanych. Kompresja pierwszej klatki i porzucenie animacji to rzadko to, czego użytkownicy chcą, więc całkowicie wykluczamy formaty animowane z tego narzędzia. Do kompresji animowanego GIF-a albo WebP użyj ezgif albo dedykowanego narzędzia.