Optymalizacja grafik

Obrazki na większości witryn internetowych są często najbardziej kosztownym zasobem, jeżeli chodzi o czas ładowania się strony. Zajmują też często sporo miejsca na serwerze. Od ich optymalizacji i sposobu ładowania zależy bardzo wiele.

Często można spotkać się z bardzo dużym błędem, jakim jest ładowanie ogromnych zdjęć ważących nawet kilka MB w obszarze ATF (np. logo serwisu), które dla wersji mobilnej nigdy się nie wyświetlą oraz które zawsze wyświetlają się zmniejszone jedynie stylami CSS.

Podobnie jak w przypadku TTFB tak i tutaj, gdy w obszarze ATF posiadasz tak ogromny „ładunek”, optymalizacja innych czynników może dawać zdecydowanie mniejszy efekt, ponieważ zawsze jako pierwszy duży zasób będzie ładowany kilkumegowy duży plik graficzny.

Tego typu problem to też spore koszty dla użytkowników, którzy zużywają sporo transferu, aby pobrać duże pliki, które de facto mogą im się nigdy nie pojawić. Problemów ze zdjęciami na stronie może być wiele, podobnie jak ich rozwiązań, dlatego poniżej przedstawione zostały te najważniejsze, które mogą być wystarczające do pełnej optymalizacji obrazków.

Rozdziały:

• Zmniejszenie rozdzielczości zdjęć
• Kompresja zdjęć
• Procesory obrazkowe z wykorzystaniem CDN
• Usunięcie wyświetlanych obrazków ze stylów CSS
• Zamiana obrazków na CSS
• Leniwe ładowanie obrazów w obszarze BTF
• Usunięcie niepotrzebnych grafik
• Resource Hints
• Formaty plików graficznych
• Definiowanie rozmiarów grafik w kodzie HTML

Problemów z obrazkami na stronie może być bardzo wiele. Nie tylko ich wielkość wpływa na wolny czas ładowania się serwisu, ale i forma umieszczenia na stronie oraz sposób ładowania.

Popularnymi problemami z optymalizacją grafik, z jakimi możesz spotkać się na stronach, są:

• zbyt duże zdjęcia zmniejszane stylami (duża ich waga) oraz brak ich responsywności,
• zbyt duże tła obrazkowe i nieoptymalne wypełnianie nimi elementów,
• grafiki wyświetlane jako tła elementów HTML zamiast elementy img,
• formaty zdjęć o niskim poziomie kompresji (dużej wadze), np. PNG,
• brak tzw. „lazy loadingu”,
• brak wykorzystania tzw. „CSS Sprites”,
• obrazy ładowane w kodzie serwisu, które mogą nie zostać wyświetlone użytkownikowi,
• zdjęcia ładowane z zewnętrznych źródeł,
• duże zdjęcia wrzucane w edytorze tekstowym,
• przekierowanie źródeł zdjęć.

Wyeliminowanie powyższych błędów powinno znacząco zwiększyć wydajność strony. Tutaj zgodnie z informacjami z wcześniejszych akapitów w pierwszej kolejności warto skupić się na grafikach z obszaru ATF oraz na grafikach wyświetlanych na całym serwisie (na wszystkich podstronach), np. banery, loga, zdjęcia w sidebarze, ikony i przyciski. Poniżej zaprezentowane zostały najważniejsze zasady optymalizacji i dobre praktyki, które umożliwią rozwiązanie wskazanych wyżej problemów.

Podobnie jak z optymalizacją innych zasobów na początku warto rozważyć najszybsze, najprostsze i najtańsze rozwiązania, które często możesz wdrożyć „od ręki” na stronie. Poniżej znajdziesz uniwersalne rozwiązania, które powinny rozwiązać większość problemów z wydajnością strony ze względu na grafiki.