Kompresor obrazów online — JPEG, PNG i WebP

Czym jest kompresja obrazów?

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

Kluczowe funkcje

JPEG vs PNG vs WebP

Przykłady kompresji

photo-landscape.jpg (2.1 MB, 4000×3000)

photo-landscape.jpg (680 KB at quality 75)

logo-transparent.png (450 KB, 1200×800)

logo-transparent.webp (85 KB at quality 80)

hero-banner.webp (800 KB, 1920×1080)

hero-banner.webp (250 KB at quality 75)

Jak kompresować obrazy online

1. 1

   Wgraj obrazy

   Przeciągnij i upuść obrazy w polu wgrywania lub kliknij, aby wybrać pliki. Można wybrać do 20 obrazów JPEG, PNG lub WebP jednocześnie, każdy do 10 MB.

2. 2

   Wyreguluj jakość

   Użyj suwaka jakości, aby ustawić pożądany poziom kompresji (0–100). Wartość domyślna to 75, zapewniająca dobrą równowagę. Obserwuj rozmiary plików i stopnie kompresji aktualizujące się w czasie rzeczywistym.

3. 3

   Pobierz wyniki

   Kliknij „Pobierz” przy dowolnym pliku lub użyj „Pobierz wszystko”, aby zapisać każdy skompresowany obraz. Użyj przycisku „Porównaj”, aby wizualnie sprawdzić jakość przed pobraniem.

Zastosowania

Optymalizacja wydajności strony

Zmniejsz rozmiary plików obrazów przed wgraniem ich na stronę. Mniejsze obrazy ładują się szybciej, poprawiając wyniki Core Web Vitals (zwłaszcza Largest Contentful Paint), zmniejszając koszty przepustowości i poprawiając pozycję w wynikach wyszukiwania.

Zmniejszanie rozmiaru załączników e-mail

Skompresuj obrazy przed załączeniem ich do wiadomości e-mail, aby zmieścić się w limitach rozmiaru załączników (zwykle 10–25 MB). Partia 20 zdjęć często może zostać skompresowana z 50 MB do mniej niż 10 MB.

Przygotowanie obrazów do mediów społecznościowych

Wstępnie skompresuj obrazy przed wgraniem ich do serwisów społecznościowych. Choć platformy ponownie kompresują obrazy automatycznie, rozpoczęcie od optymalnie skompresowanego pliku daje większą kontrolę nad ostateczną jakością.

Optymalizacja zasobów aplikacji i gier

Skompresuj zasoby interfejsu, tekstury i sprite'y dla aplikacji mobilnych, gier i progresywnych aplikacji webowych. Mniejsze zasoby oznaczają szybsze pobieranie, mniejsze zużycie pamięci i płynniejsze doświadczenie użytkownika.

Optymalizacja dokumentów i prezentacji

Zmniejsz rozmiar obrazów osadzonych w plikach PDF, dokumentach Word i prezentacjach. Talia slajdów o wadze 50 MB ze zdjęciami w wysokiej rozdzielczości często może zostać zredukowana do 10 MB bez zauważalnej utraty jakości.

Szczegóły techniczne

Kompresja przez Canvas API

Narzędzie wykorzystuje metodę toBlob() z Canvas API HTML5 do kompresji. Obraz jest rysowany na niewidocznym elemencie canvas, a następnie ponownie kodowany z określonym parametrem jakości. Dla JPEG i WebP parametr jakości (0.0–1.0) kontroluje poziom kompresji stratnej. Dla PNG Canvas API ignoruje parametr jakości w całości — kodowanie PNG przez Canvas jest zawsze bezstratne.

Konwersja PNG do WebP

Ponieważ Canvas toBlob() ignoruje parametr jakości dla obrazów PNG (wynik jest zawsze bezstratny), narzędzie konwertuje pliki PNG do formatu WebP, gdy suwak jakości jest ustawiony poniżej 100. WebP obsługuje zarówno kompresję stratną (z kontrolą jakości), jak i przezroczystość, co czyni go idealną stratną alternatywą dla PNG. Gdy jakość jest ustawiona na 100, pliki PNG są zachowywane w oryginalnym formacie.

Zachowanie parametru jakości

Suwak jakości mapuje się na parametr jakości Canvas toBlob(): 100 = 1.0 (najwyższa jakość, największy plik), 0 = 0.0 (najniższa jakość, najmniejszy plik). Dla JPEG jakość 75 (0.75) jest zwykle złotym środkiem — poniżej 50 artefakty stają się zauważalne. Dla WebP ta sama wartość jakości daje nieco mniejsze pliki niż JPEG przy porównywalnej jakości wizualnej.

Pamięć przeglądarki i ograniczenia

Każdy obraz istnieje w pamięci zarówno jako oryginalny obiekt File, jak i skompresowany Blob, plus dwa object URL-e do podglądu. Przy 20 obrazach po 10 MB szczytowe zużycie pamięci może sięgnąć około 400 MB. Object URL-e są zwalniane, gdy obrazy zostaną usunięte lub strona zostanie zamknięta, aby zapobiec wyciekom pamięci.

Najlepsze praktyki

Zacznij od jakości 75 dla JPEG/WebP

Jakość 75 to zalecany punkt startowy dla większości zastosowań. Zwykle zmniejsza rozmiar pliku o 60–80% przy minimalnej widocznej utracie jakości. Zwiększaj jakość powyżej 85 tylko w przypadku obrazów, w których zachowanie drobnych detali jest krytyczne (np. obrazowanie medyczne, fotografia w jakości druku).

Używaj WebP, kiedy to możliwe

WebP daje pliki o 25–35% mniejsze niż JPEG przy tej samej jakości wizualnej i obsługuje przezroczystość jak PNG. Wszystkie nowoczesne przeglądarki obsługują WebP od 2024 roku. Konwertuj obrazy JPEG i PNG do WebP, aby uzyskać najlepszy stosunek kompresji do jakości w sieci.

Zachowaj oryginalne pliki

Zawsze zachowuj oryginalne, nieskompresowane obrazy jako pliki źródłowe. Kompresja stratna jest nieodwracalna — ponowna kompresja już skompresowanego obrazu pogarsza jakość bez znaczącej redukcji rozmiaru (zjawisko znane jako strata pokoleniowa).

Sprawdź jakość przed pobraniem

Użyj przycisku „Porównaj”, aby wizualnie sprawdzić artefakty kompresji przed pobraniem. Zwróć szczególną uwagę na obszary z tekstem, ostrymi krawędziami i subtelnymi gradientami — to tam artefakty JPEG są najbardziej widoczne.

Grupuj podobne obrazy razem

Obrazy o podobnej charakterystyce (ten sam typ tematu, rozdzielczość, głębia kolorów) najlepiej kompresują się z tym samym ustawieniem jakości. Kompresuj zdjęcia oddzielnie od grafik/logotypów, aby uzyskać optymalne wyniki.

Najczęściej zadawane pytania