Jak zmniejszyć rozmiar plików graficznych dla szybszych stron

Na typowej stronie obrazy odpowiadają za 50-70% całkowitej wagi. Jeśli twoja strona wydaje się ociężała, obrazy są prawie na pewno częścią problemu. A ponieważ Google oficjalnie uwzględnia prędkość strony (konkretnie Core Web Vitals) w rankingach, powolne obrazy bezpośrednio kosztują cię ruch.

Dobra wiadomość: większość stron może zmniejszyć wagę obrazów o połowę w pięć minut pracy na obraz, bez widocznej utraty jakości.

Dlaczego rozmiar obrazu ma większe znaczenie, niż myśli większość deweloperów

Nowoczesne łącza szerokopasmowe są szybkie - więc czemu kilkaset kilobajtów wciąż ma znaczenie?

Globalnie ponad połowa ruchu WWW to urządzenia mobilne, często na słabym 4G albo 3G. Obraz 2 MB, który ładuje się błyskawicznie w biurowym Wi-Fi, może zajmować 8+ sekund w pociągu. Google mierzy i publikuje, jak szybka wydaje się twoja strona - dwie z trzech kluczowych metryk (Largest Contentful Paint i Cumulative Layout Shift) są bezpośrednio kształtowane przez zachowanie obrazów. No i koszty transferu: milion odwiedzających miesięcznie, każdy pobiera 3 MB obrazów, to 3 TB ruchu wychodzącego. U większości hostingów to nie jest darmowe.

Zmniejszenie wagi obrazów o połowę zwykle daje mierzalne efekty: szybsze ładowanie, niższy bounce rate, lepsze rankingi, niższe rachunki.

Cztery dźwignie redukcji rozmiaru

W kolejności wpływu:

1. Wymiary

Największa wygrana, którą ludzie najczęściej pomijają. Zdjęcie 4000×3000 px wyświetlane w 800×600 niesie dwadzieścia pięć razy więcej pikseli, niż potrzebuje przeglądarka.

Sprawdź finalny rozmiar wyświetlania każdego obrazu. Zdjęcie produktu pokazywane w 600×600? Zmień rozmiar źródła na 1200×1200 (podwójnie dla ekranów retina) przed uploadem. Hero na pełną szerokość w layoucie 1440 px? Wystarczy 1920 px szerokości. Nie wysyłaj obrazów 4K, żeby wyświetlać je w 800 px - to czyste marnotrawstwo.

2. Wybór formatu

Każdy format najlepiej kompresuje inny typ treści:

• Zdjęcia → JPG lub WebP (stratne). WebP zwykle bije JPG o 25-35%.
• Grafiki z płaskimi kolorami i ostrymi krawędziami (loga, UI, diagramy) → PNG lub WebP bezstratny
• Zdjęcia, gdzie każdy bajt się liczy, a odbiorcy mają nowoczesne przeglądarki → AVIF (kolejne 30-50% mniej niż WebP, ale wolniejsze kodowanie)

Nie możesz po prostu zmienić nazwy pliku z .jpg na .webp - musisz go przekodować. Nasz Image Compressor zachowuje oryginalny format. Do samej konwersji formatu użyj dedykowanego konwertera.

3. Ustawienie kompresji / jakości

Każdy format stratny ma suwak jakości. Większość edytorów domyślnie ustawia 80-85%, co jest rozsądnym środkiem, ale zwykle przesadą dla obrazów webowych.

Praktyczna zasada dla zdjęć:

• Jakość 90-95: ledwo odróżnialne od oryginału, ale 40%+ większe niż jakość 75
• Jakość 80-85: doskonała - nieodróżnialna dla większości widzów z normalnej odległości
• Jakość 70-75: bardzo dobra - używaj tego domyślnie dla webu
• Jakość 60-65: zauważalne zmiękczenie w drobnych szczegółach; OK dla miniatur
• Jakość poniżej 55: widoczne artefakty

Dla większości stron jakość 75 to złoty środek. Różnica między 75 a 90 jest niewidoczna w webie, ale podwaja rozmiar pliku.

4. Metadane i profile kolorów

Typowy JPG z aparatu zawiera tłusty blob metadanych EXIF: współrzędne GPS, marka i model aparatu, ustawienia zdjęcia, miniatura, czasem pełnowymiarowy podgląd. Wyrzuć to i zaoszczędzisz 30-300 KB na obraz bez żadnej widocznej różnicy.

Podobnie z profilami kolorów - obraz webowy powinien używać sRGB, nie ogromnego profilu ProPhoto RGB. Większość narzędzi do kompresji usuwa metadane automatycznie.

Praktyczny workflow

Dla nowego obrazu trafiającego do twojego workflow:

1. Sprawdź wymiary. Zmień rozmiar na nie więcej niż 2× największy rozmiar wyświetlania.
2. Wybierz format. Zdjęcie → JPG/WebP. Grafika → PNG/WebP.
3. Ustaw jakość 75 dla zdjęć lub użyj bezstratnej dla grafik.
4. Skompresuj. Nasz Image Compressor działa w przeglądarce z suwakiem jakości na żywo - widzisz kompromis od razu.
5. Zweryfikuj. Rzuć okiem na wynik w docelowym rozmiarze wyświetlania. Jeśli wygląda dobrze - wysyłaj.

Całkowity czas na obraz: około 30 sekund. Typowa oszczędność: 40-70% vs surowe źródło.

Oczekiwane oszczędności według typu zawartości

Źródło	Typowy surowy rozmiar	Po kompresji webowej	Oszczędność
Zdjęcie z iPhone’a (12 MP JPG)	3-4 MB	300-500 KB	~85%
JPG z aparatu bezlusterkowego (24 MP)	8-12 MB	500-800 KB	~90%
Zrzut ekranu (PNG)	500 KB-2 MB	80-200 KB	~80%
Logo (PNG z przezroczystością)	30-100 KB	10-40 KB	~60%
Zestaw ikon PNG	20-80 KB	5-20 KB	~70%
Już skompresowany JPG webowy	300-500 KB	120-200 KB	~50%

Jeśli widzisz oszczędność poniżej 30%, obraz był pewnie już zoptymalizowany. Jeśli widzisz 80%+, źródło było grubo przewymiarowane jak na zastosowanie webowe.

Co sprawdzić w DevTools

Otwórz Chrome i wciśnij F12. Zakładka Network, filtr Img, przeładowanie. Zobaczysz każdy obraz, który strona ładuje, z jego rozmiarem.

Posortuj po rozmiarze. Wszystko powyżej 200 KB to kandydat do kompresji. Wszystko powyżej 500 KB prawdopodobnie potrzebuje kompresji. Wszystko powyżej 1 MB jest prawie na pewno źle.

Zakładka Lighthouse, uruchom audyt, sekcja “Performance”. Szukaj:

• “Properly size images” - flaguje obrazy serwowane większe niż wyświetlane
• “Efficiently encode images” - flaguje obrazy, które mogłyby się lepiej skompresować
• “Serve images in next-gen formats” - sugeruje WebP/AVIF tam, gdzie używany jest JPG/PNG

Każda rekomendacja ma konkretną oszczędność w KB. Zbijaj w kolejności wielkości.

Błędy, których unikaj

Kompresja tego samego obrazu dwukrotnie. JPG jest stratny - kompresowanie już skompresowanego JPG kumuluje straty. Zawsze zaczynaj od oryginału.

Używanie PNG do zdjęć. Zdjęcie w PNG może być 5-10× większe od JPG bez widocznej korzyści. PNG jest do grafik, nie do zdjęć.

Zapominanie o obrazach responsywnych. Nawet po kompresji serwowanie obrazu 1920 px telefonowi wyświetlającemu go w 375 px to marnotrawstwo. Użyj elementu <picture> lub atrybutu srcset, żeby serwować różne rozmiary różnym urządzeniom.

Optymalizacja raz i zapominanie. Kompresja obrazów staje się lepsza co roku. AVIF nie istniał parę lat temu, teraz jest szeroko wspierany. Przepuszczaj najstarsze obrazy przez kompresję co 12-18 miesięcy.

Jeśli masz teraz folder z obrazami do skompresowania, przeciągaj je po kolei do naszego Image Compressor. Działa w całości w przeglądarce - żadnych uploadów - i daje suwak jakości na żywo. Dla typowego zdjęcia w jakości 75 zobaczysz 50-80% oszczędności w niecałą sekundę.

Mniejsze obrazy, szybsze strony, lepsze rankingi. Jedna z najprostszych wygranych w wydajności WWW.