1. Po co optymalizować obrazy?
- Strony z obrazami ładują się szybciej, co poprawia doświadczenie użytkownika.
- Niższy transfer danych to oszczędność (ważne dla urządzeń mobilnych).
- Lepszy wynik SEO oraz Google PageSpeed.
- Krótszy czas oczekiwania, większa dostępność dla osób z wolnym internetem.
2. Najważniejsze techniki optymalizacji
- Kompresja stratna: Usuwa część informacji, najczęściej w JPG, WebP. Pozwala na radykalne zmniejszenie wielkości pliku, czasem bez widocznej utraty jakości.
- Kompresja bezstratna: Usuwa zbędne dane (np. metadane), ale nie pogarsza jakości (PNG, WebP bezstratny).
- Zmiana rozdzielczości: Dopasowanie wymiarów obrazka do tych rzeczywiście potrzebnych na stronie (np. nie wstawiaj obrazów 4000x3000px, które wyświetlasz jako 400x300px).
- Wybór nowoczesnego formatu: WebP, AVIF – mniejsze pliki, taka sama jakość.
- Usuwanie metadanych: Metadane (EXIF) zwiększają wagę pliku, a na www są zazwyczaj zbędne.
3. Tabela porównawcza formatów graficznych
| Format | Kompresja | Przezroczystość | Animacja | Sugerowane zastosowanie |
|---|---|---|---|---|
| JPG/JPEG | Stratna | Nie | Nie | Zdjęcia, fotografie |
| PNG | Bezstratna | Tak | Nie | Logo, grafika z przezroczystością |
| GIF | Bezstratna, max 256 kolorów | Tak | Tak | Proste animacje, ikony |
| WebP | Stratna/bezstratna | Tak | Tak | Wszystkie grafiki na www |
4. Praktyka – jak robić to dobrze?
Ćwiczenie:
- Wyszukaj na stronie duży obraz JPG/PNG. Skompresuj go do WebP i porównaj wagi oraz jakość.
- Zmniejsz rozdzielczość obrazu do potrzebnych wymiarów (np. 900x600 px).
- Usuń metadane: skorzystaj z narzędzi online lub opcji „Eksportuj dla webu” w programie graficznym.
- Wstaw na stronę obraz w wersji WebP i „fallback” w JPG/PNG używając kodu poniżej.
✅ Przykład kodu z responsywnym obrazem i fallbackiem:
<picture>
<source srcset="obraz.webp" type="image/webp">
<img src="obraz.jpg" alt="Opis obrazka">
</picture>
✅ Przykład kompresji w GIMP/Photoshop:
Eksportuj obraz jako „Dla internetu” i wybierz kompresję (np. 70–80% jakości dla JPG to dobry kompromis).
5. Ciekawostki i dobre praktyki
- Obrazy SVG są idealne na ikony i logo: mały rozmiar, ostrość na Retina, możliwość animacji!
- Skrypt
cwebp(konsola) pozwala automatycznie konwertować wiele plików do WebP. - Zawsze ustawiaj atrybut
altprzy obrazkach – ważne dla dostępności! - Możesz testować szybkość stron np. narzędziem Google PageSpeed Insights.
FAQ: Najczęstsze pytania
Jak wybrać poziom kompresji JPG?
Najczęściej 70–85% to dobry kompromis pomiędzy jakością, a wagą pliku.
Na czym polega obraz responsywny?
To obraz, który automatycznie dopasowuje rozmiar do urządzenia – warto używać
srcset i sizes lub znacznika <picture>.Co zrobić, gdy Chrome nie wyświetla WebP?
To bardzo rzadki przypadek, ale zawsze podawaj alternatywny format JPG/PNG (patrz: kod „picture” powyżej).