Jak kompresować obrazy na stronę (bez niszczenia jakości)

Dlaczego kompresja obrazów ma znaczenie

Liczby mówią same za siebie:

• 53% użytkowników mobilnych opuszcza stronę, która ładuje się dłużej niż 3 sekundy (Google)
• Każde 100 ms szybszego ładowania zwiększa konwersję o 1% (Deloitte)
• Core Web Vitals bezpośrednio wpływają na pozycje w Google - LCP (Largest Contentful Paint) to niemal zawsze obraz
• Przeciętna strona serwuje 1,5 MB obrazów - w większości nieoptymalizowanych

Lista kontrolna kompresji obrazów

1. Wybierz właściwy format: WebP do sieci, JPG do zdjęć, PNG tylko wtedy, gdy potrzebujesz przezroczystości i nie możesz użyć WebP
2. Najpierw zmień rozmiar: nie serwuj obrazu 4000 px w kontenerze 800 px. Zmień rozmiar obrazów do wielkości wyświetlania (lub 2x dla ekranów retina).
3. Kompresuj: dla formatów stratnych używaj jakości 75-85. Większość osób nie zauważy różnicy.
4. Używaj WebP: zamień na WebP i od razu zyskaj 25-35%.
5. Leniwe ładowanie: dodaj loading="lazy" do obrazów poniżej pierwszego ekranu.
6. Podawaj wymiary: zawsze dodawaj atrybuty width i height, aby uniknąć przesunięć układu.

Darmowe narzędzia do kompresji

W przeglądarce (bez wysyłania)

• Inteligentna kompresja WebP Buddy: sama znajduje optymalne ustawienie jakości. Działa w całości w przeglądarce - Twoje obrazy nigdy nie opuszczają urządzenia.
• Kompresja WebP: ręczna kontrola jakości obrazów WebP.
• Konwersja masowa: konwertuj i kompresuj wiele obrazów naraz.

Wiersz poleceń

# Konwersja i kompresja za pomocą cwebp
cwebp -q 80 photo.jpg -o photo.webp

# Kompresja istniejącego WebP
cwebp -q 75 image.webp -o image-compressed.webp

# Konwersja całego folderu
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Ściągawka ustawień jakości

Najczęstsze pytania