Jak skompresować obrazy na stronę

Jedno nieskompresowane zdjęcie potrafi ważyć więcej niż cała reszta strony razem wzięta. Ogarnięcie obrazów to najtańszy sposób na poprawę wydajności — i ma bezpośredni wpływ na Largest Contentful Paint, jeden ze wskaźników Core Web Vitals, którym kieruje się Google przy rankingu.

1. Zmień rozmiar na taki, jaki faktycznie wyświetlasz

Zdjęcie hero pokazywane na szerokości 1200 px nie potrzebuje 4000 px. Otwórz Zmień rozmiar obrazu, ustaw szerokość (1600 px to bezpieczne maksimum dla obrazów na całą szerokość na ekranach retina, 800 px dla obrazów w treści) i przetwórz cały folder naraz.

2. Wybierz właściwy format

• Zdjęcia → WebP (albo JPG, jeśli musisz wspierać bardzo stare przeglądarki). WebP jest o 25–35% mniejszy niż JPG przy tej samej jakości, a otwiera go każda aktualna przeglądarka.
• Logo, ikony, zrzuty ekranu z płaskimi kolorami → PNG, a potem zredukuj paletę. Trzymanie zdjęć w PNG to błąd — plik wychodzi pięć do dziesięciu razy większy bez żadnego zysku.
• Ikony i proste ilustracje → SVG, jeśli tylko masz wersję wektorową.

3. Skompresuj

• JPG na WebP przy jakości 80–85% dla zdjęć.
• Kompresja PNG — redukcja palety, ten sam trik co w pngquant, zmniejsza płaskie grafiki o 50–70% bez widocznej zmiany i zachowuje przezroczystość.
• Kompresja JPG na poziomie 75–80%, jeśli zostajesz przy JPG.

4. Serwuj to poprawnie

Dodaj atrybuty width i height do każdego <img>, żeby przeglądarka od razu zarezerwowała miejsce (brak przesunięć layoutu), ładuj leniwie obrazy poniżej pierwszego ekranu przez loading="lazy" i sięgnij po srcset, jeśli chcesz pójść o krok dalej. Kroki kompresji opisane wyżej to właśnie to, co większość stron pomija — a to one mają największe znaczenie.