Jak skompresować obrazy na stronę

Na typowej stronie obrazy ważą więcej niż HTML, CSS i skrypty razem wzięte. Jedno zdjęcie skopiowane prosto z telefonu potrafi mieć od 3 do 6 MB, podczas gdy cała reszta strony to kilkaset kilobajtów. Poprawienie obrazów to najtańszy zysk wydajności, jaki jest do wzięcia, i przekłada się bezpośrednio na Largest Contentful Paint – wskaźnik Core Web Vitals, który mierzy, jak szybko pojawia się główna treść.

Ten poradnik opisuje cały proces: ustalasz, w jakim rozmiarze obraz jest wyświetlany, wybierasz właściwy format, kompresujesz, sprawdzasz wynik i poprawnie go serwujesz. Sprawdzi się na stronie pisanej ręcznie, w sklepie i na blogu w dowolnym systemie CMS.

Zanim zaczniesz, ustal budżet

Dobrze mieć w głowie konkretne liczby. To praktyczne cele, nie sztywne reguły:

• Zdjęcie hero lub baner na całą szerokość: około 150–300 KB.
• Obraz w treści artykułu: 50–150 KB.
• Karta produktu lub miniatura w siatce: 20–60 KB.
• Logo lub ikona: kilka kilobajtów, najlepiej SVG.

Strona z jednym obrazem hero i dziesięcioma obrazami w treści, która mieści się w tych liczbach, waży w obrazach około 1–2 MB. Ta sama strona zbudowana z nieobrobionych zdjęć z telefonu bez trudu przekracza 30 MB.

Krok 1. Zmniejsz do rozmiaru, w jakim obraz jest wyświetlany

Liczba pikseli wpływa na rozmiar pliku bardziej niż jakiekolwiek ustawienie jakości. Zdjęcie 4000×3000 ma 12 milionów pikseli, a w rozdzielczości 1600×1200 – niecałe 2 miliony. To 85% mniej, zanim kompresja w ogóle się zacznie.

Sprawdź największą szerokość, w jakiej obraz kiedykolwiek się pojawia, i dolicz zapas na ekrany o wysokiej gęstości pikseli:

• Hero na całą szerokość: 1600–2000 px szerokości wystarczy dla większości laptopów i ekranów retina.
• Kolumna artykułu o szerokości 700–800 px: eksportuj w 1200–1600 px, żeby obraz był ostry na ekranach 2×.
• Karta w siatce trzykolumnowej: 600–800 px.

W narzędziu Zmień rozmiar obrazu online wpisz szerokość i wyczyść pole wysokości, żeby zachować proporcje, albo wpisz tę samą liczbę w oba pola przy włączonej opcji „Zachowaj proporcje”, żeby ograniczyć dłuższy bok w mieszanej partii zdjęć pionowych i poziomych. Pamiętaj, że obrazy mniejsze niż zadany prostokąt zostaną do niego powiększone, więc nie wrzucaj małych ikon do partii z dużym prostokątem.

Zmiana rozmiaru zachowuje format wejściowy. JPG i WebP są ponownie kodowane z wysoką jakością (0,92), PNG pozostaje bezstratny. Przy okazji usuwane są metadane lokalizacji i aparatu, czego i tak chcesz w przypadku publikowanych zdjęć.

Krok 2. Wybierz właściwy format

Wybieraj według treści, nie z przyzwyczajenia:

• Zdjęcia i wszystko z gradientami → WebP. Przy tej samej jakości wizualnej jest zwykle o 25–35% mniejszy niż JPG, a wyświetla go każda współczesna przeglądarka.
• Zdjęcia tam, gdzie WebP nie wchodzi w grę → JPG z jakością 75–85. Niektóre szablony e-maili, stare systemy CMS i feedy marketplace’ów wciąż oczekują JPG.
• Zrzuty ekranu, logotypy, diagramy, płaska grafika → PNG, a potem redukcja palety. Takie obrazy mają mało kolorów i ostre krawędzie, na których JPG robi widoczne smugi.
• Grafika z przezroczystością, duża lub fotograficzna → WebP. Zachowuje kanał alfa i przy wyciętych zdjęciach produktów jest znacznie mniejszy niż PNG.
• Ikony i proste ilustracje → SVG, jeśli masz oryginał wektorowy. Żaden format rastrowy nie dorówna mu rozmiarem ani ostrością.

Najczęstszy błąd to zdjęcie zapisane jako PNG. Fotografia w PNG bywa pięć do dziesięciu razy większa niż dobry JPG, bez żadnej widocznej korzyści.

Krok 3. Kompresja

Zdjęcia do WebP

Konwertuj JPG na WebP online startuje z jakością 85, która pasuje do większości obrazów w treści. Zejdź do 70–75 przy miniaturach i obrazach tła pod tekstem, a podnieś do 90 przy hero z drobnymi detalami albo tekstem na zdjęciu. Narzędzie przyjmuje też PNG i zachowuje przezroczystość.

Do zrzutów ekranu i grafiki z przezroczystością służy Konwertuj PNG na WebP online, które startuje z jakością 90 – cienkie linie i drobny tekst pozostają wyraźne.

Kodowanie WebP korzysta z wbudowanego kodera przeglądarki. Safari nie potrafi kodować WebP, więc na tym etapie użyj Chrome, Edge albo Firefoksa; strona pokaże błąd zamiast zapisać plik z błędnym rozszerzeniem.

Płaska grafika jako PNG

Kompresja PNG online redukuje obraz do palety 256, 128 lub 64 kolorów i zachowuje przezroczystość. Zrzuty ekranu i logotypy przy 256 kolorach tracą zwykle 50–70% wagi bez widocznej zmiany. Zacznij od 256, przy zrzutach interfejsu spróbuj 128, a 64 zostaw dla wykresów i prostych ikon. Narzędzie nie stosuje ditheringu, więc na płynnych gradientach mogą pojawić się pasy; jeśli tak się stanie, wróć do wyższej wartości albo przełącz ten obraz na WebP.

Zostajesz przy JPG

Kompresja JPG online startuje od 80. W przypadku treści na stronę złoty środek to zwykle 75–80. Jeśli plik jest już dobrze zoptymalizowany i ponowne kodowanie by go powiększyło, narzędzie zwraca nietknięty oryginał.

Krok 4. Sprawdź przed publikacją

Ustawienia kompresji to zawsze kompromis, więc obejrzyj wynik tam, gdzie JPEG i WebP psują się najpierw: na płynnych gradientach nieba czy ścian, na ostrych, kontrastowych krawędziach i na nasyconych czerwieniach. Porównaj dwa obrazy umieszcza oryginał i wersję skompresowaną pod jednym suwakiem, więc różnice łatwo wyłapać.

Potem sprawdź liczby. Każdy wiersz pliku pokazuje rozmiar przed i po; jeśli coś nadal mocno przekracza budżet, to zwykle za duże są wymiary, a nie za wysoka jakość.

Krok 5. Serwuj poprawnie

Kompresja to połowa pracy. O tym, jak przeglądarka załaduje gotowy plik, decyduje kod:

• Zawsze ustawiaj width i height na <img>. Przeglądarka rezerwuje miejsce, zanim plik dotrze, co zapobiega przesunięciom układu – to kolejny wskaźnik Core Web Vitals.
• Ładuj leniwie to, co poniżej linii zgięcia, przez loading="lazy". Nigdy nie ładuj leniwie hero: zwykle to on jest elementem Largest Contentful Paint i opóźnienie go pogarsza wynik. Zamiast tego daj mu fetchpriority="high".
• Używaj srcset i sizes, gdy jeden obraz pojawia się w bardzo różnych szerokościach na telefonie i komputerze. Wyeksportuj dwie lub trzy szerokości, na przykład 800, 1200 i 1600 px, i pozwól przeglądarce wybrać.
• Używaj <picture> z zapasowym JPG tylko wtedy, gdy musisz obsłużyć bardzo stare przeglądarki. Dla większości stron wystarczy zwykły WebP.
• Ustaw długie cache’owanie. Daj plikom obrazów długi czas życia w cache i zmieniaj nazwę pliku, gdy zmienia się obraz.

Wiele systemów CMS generuje pomniejszone kopie przy wgrywaniu. To pomaga, ale zmniejszają one to, co wgrasz, więc oryginał 6 MB nadal oznacza powolne wgrywanie i spuchnięte miejsce na dysku. Wgrywaj obrazy, które są już bliskie największemu potrzebnemu rozmiarowi.

Wbudowane opcje na komputerze i telefonie

Przy kilku obrazach może nie być potrzebne nic więcej:

• Podgląd w macOS: Narzędzia → Dopasuj wielkość, żeby zmienić wymiary, potem Plik → Eksportuj z suwakiem jakości dla JPG. Szybkie przy jednym czy dwóch plikach.
• Zdjęcia w Windows: opcja „Zmień rozmiar obrazu” oferuje gotowe rozmiary i ustawienie jakości. Paint też potrafi zmienić rozmiar, ale zapisuje JPG bez możliwości wyboru jakości.
• iPhone i Android: wbudowane edytory przycinają, ale nie pozwalają ustawić wymiarów w pikselach ani kompresji, więc zdjęcia z telefonu na stronę najlepiej obrabiać po drodze.

Narzędzia przeglądarkowe opisane wyżej przydają się przy większych partiach: wrzucasz cały folder, pobierasz wyniki jako jeden ZIP i nic nie jest nigdzie wysyłane.

Rozwiązywanie problemów

• WebP jest większy niż JPG. Źródłowy JPG był już mocno skompresowany albo jakość ustawiono na 95–100. Obniż jakość do 80 albo zostaw JPG.
• PNG prawie się nie zmniejszył. Był już indeksowany lub zoptymalizowany. Narzędzie informuje, że zachowano oryginał.
• Przezroczyste obszary zrobiły się białe. Obraz przeszedł przez kompresję JPG, a JPG nie obsługuje przezroczystości. Przy wycinkach użyj konwersji PNG na WebP albo kompresji PNG.
• Tekst na zrzutach ekranu jest rozmyty. Używaj PNG albo WebP z jakością 90+, nigdy JPG.
• Obrazy są nieostre na ekranach retina. Zmniejszyłeś je do szerokości z CSS; eksportuj mniej więcej dwukrotnie większe.

Lista kontrolna

1. Zmierz największą szerokość wyświetlania każdego obrazu.
2. Zmniejsz obraz najwyżej do około dwukrotności tej szerokości.
3. Zdjęcia do WebP z jakością 80–85, płaska grafika do PNG z paletą.
4. Porównaj wynik na gradientach i krawędziach.
5. Sprawdź każdy plik względem budżetu.
6. Dodaj width, height, leniwe ładowanie poniżej linii zgięcia i wysoki priorytet dla hero.