Optymalizacja obrazu w Internecie: kompletny przewodnik

Powolne ładowanie strony zabija konwersje. Badania pokazują, że 40% użytkowników opuszcza witrynę, której przejście zajmuje więcej niż 3 sekundy. Największą przyczyną? Niezoptymalizowane obrazy. Pojedyncze zdjęcie o rozmiarze 5 MB na Twojej stronie głównej może wydłużyć czas ładowania nawet w przypadku szybkich połączeń.

Lista kontrolna optymalizacji obrazu

1. Właściwe wymiary — nie wysyłaj obrazu o rozdzielczości 4000 pikseli, w którym wyświetlasz 800 pikseli
2. Właściwy format — nowoczesny WebP/AVIF, rezerwowy JPG/PNG
3. Właściwa kompresja — jakość zdjęć 75–85%, grafika bezstratna
4. Właściwe dostarczanie — leniwe ładowanie, responsywny zestaw src

Zalecane wymiary w 2026

• Obrazy bohaterów: maks. 1920 × 1080 (Full HD) lub 2560 × 1440 (2K)
• Bohater wpisu na blogu: 1200 × 675 (16:9)
• Zdjęcia produktów: 1500×1500 z obsługą zoomu, domyślny wyświetlacz 800×800
• Awatary: 256 × 256 (miniatury zostaną zmniejszone)
• Otwarty wykres (udostępnienie w mediach społecznościowych): 1200 × 630
• Favicon: 32×32, 192×192, 512×512 PNG

Przed przesłaniem zmień rozmiar zdjęć do tych wymiarów za pomocą naszego narzędzia do zmiany rozmiaru obrazu.

Formaty: kiedy czego używać

• WebP: ustawienie domyślne dla 95% obrazów internetowych. 25–35% mniejszy niż JPG przy tej samej jakości. Obsługa uniwersalnej przeglądarki.
• AVIF: jeszcze mniejszy (50% mniejszy niż JPG). Używaj do obrazów bohaterów. Obsługują ją nowsze przeglądarki.
• JPG: zdjęcia bez przezroczystości. Doskonała kompatybilność.
• PNG: logo, zrzuty ekranu, wszystko, co jest przezroczyste. Bezstratny.
• SVG: grafika wektorowa, ikony, proste ilustracje. Mały rozmiar pliku, nieskończone skalowanie.

Konwertuj między tymi formatami za pomocą Konwertowania obrazów PDF7.

Kompresja: jak agresywna jest zbyt agresywna?

W przypadku zdjęć: zacznij od jakości 85%. Zmniejsz do 75% w przypadku stron o krytycznym znaczeniu dla przepustowości. Poniżej 70% artefakty stają się widoczne. Skorzystaj z naszego narzędzia do kompresji obrazu, aby znaleźć właściwą równowagę.

Responsywne obrazy z srcset

Nie wyświetlaj obrazu w rozdzielczości 2K na telefonie. Użyj atrybutu srcset HTML:

Przeglądarka wybiera najmniejszy pasujący obraz. Będziesz potrzebować 3 rozmiarów na obraz.

Leniwe ładowanie

Dodaj loading="lazy" do wszystkich obrazów poniżej części strony widocznej na ekranie. Nowoczesne przeglądarki nie ładują ich, dopóki użytkownik nie przewinie w pobliżu, oszczędzając przepustowość przy każdym ładowaniu strony.

Zasada 100 KB

Celuj na pojedyncze obrazy o rozmiarze mniejszym niż 100 KB. Obrazy bohaterów mogą rozciągać się do 200 KB. Jeśli pojedyncze zdjęcie ma więcej niż 500 KB, popełniłeś błąd — zmień rozmiar i ponownie skompresuj.