Optymalizacja obrazów na stronie WWW

Optymalizacja obrazów polega na przygotowaniu plików graficznych tak, aby ładowały się szybko, ale nadal miały wystarczającą jakość wizualną. Obrazy są często jednymi z największych zasobów pobieranych przez przeglądarkę, dlatego mają duży wpływ na czas ładowania strony.

Co najbardziej wpływa na rozmiar pliku graficznego?

Najważniejsze czynniki to:

• wymiary w pikselach, np. 4272 × 2848 px,
• format pliku, np. JPG, PNG, WebP,
• stopień kompresji, szczególnie w formatach stratnych, takich jak JPG,
• liczba szczegółów i kolorów w obrazie.

W przypadku zdjęć bardzo duże wymiary oznaczają dużą liczbę pikseli do zapisania. Plik o wymiarach 4272 × 2848 px jest zwykle znacznie większy niż obraz zmniejszony np. do 1200 × 800 px.

Dlaczego należy zmniejszyć wymiary obrazu?

Jeśli obraz na stronie jest wyświetlany w szerokości 800 px, nie ma sensu ładować pliku o szerokości ponad 4000 px. Przeglądarka i tak zmniejszy go wizualnie, ale użytkownik musi pobrać pełny, duży plik.

Poprawnym działaniem jest więc zmniejszenie wymiarów rysunku przed umieszczeniem go na stronie.

Czego nie należy mylić?

• Zmiana rozmiaru w CSS, np. width: 300px, nie zmniejsza automatycznie pliku pobieranego z serwera.
• Zwiększenie rozdzielczości DPI nie przyspiesza ładowania obrazu.
• Zmiana proporcji szerokości do wysokości może zniekształcić obraz, ale nie jest typową metodą optymalizacji.

Przykład

Obraz źródłowy:

4272 × 2848 px

Obraz przygotowany do WWW:

1200 × 800 px

Mniejszy obraz ma mniej pikseli, zwykle mniejszy rozmiar pliku i ładuje się szybciej.