Waga obrazów to często główny powód wolnego ładowania strony. Zanim zaczniesz kompresować, ustal docelową rozdzielczość. Wyświetlanie zdjęcia o szerokości 2000 px w kontenerze 600 px to marnowanie pasma. Skaluj obraz do rzeczywistych wymiarów, w jakich się pojawi, z uwzględnieniem ekranów o wysokiej gęstości pikseli. Dla typowego układu wystarczy 1,5–2x szerokości kontenera. Nie używaj jednego ogromnego pliku dla wszystkich przypadków. Zamiast tego przygotuj kilka wersji i podawaj je przez srcset oraz sizes. Przeglądarka sama wybierze najlepszą.

Kompresja to drugi krok. Wybierz format odpowiedni do treści — zdjęcia najlepiej wychodzą w JPEG lub WebP, grafiki z przezroczystością w PNG, a ikony w SVG. Warto poznać szczegóły dotyczące formatów obrazów dla webu, bo od tego zależy dobór metody kompresji. Dla JPEG ustaw jakość w przedziale 75–85%, co zwykle daje niezauważalną różnicę. WebP pozwala zejść jeszcze niżej bez widocznych strat. Uważaj na nadmierną kompresję — pojawiają się artefakty wokół krawędzi i na jednolitych tłach. Testuj na kilku urządzeniach, nie tylko na swoim monitorze.

Nie zapomnij o metadanych. Aparaty i programy graficzne zapisują w plikach miniatury, dane GPS i profile kolorów. Usunięcie tych informacji potrafi zmniejszyć rozmiar o kilka do kilkunastu procent bez wpływu na wygląd. Narzędzia takie jak ImageOptim, Squoosh czy imagemin robią to automatycznie. Warto też sprawdzić, czy serwer nie dodaje własnych nagłówków, które blokują kompresję. Po wdrożeniu zmian zmierz efekty w PageSpeed Insights lub Lighthouse. Czasem wystarczy zmiana jednego parametru, by zyskać setki kilobajtów.

Na koniec pamiętaj o leniwym ładowaniu. Obrazy poza pierwszym ekranem nie muszą być pobierane od razu. Atrybut loading="lazy" w połączeniu z dobrze dobranymi rozmiarami daje realne przyspieszenie. Optymalizacja to proces — wracaj do niego przy każdym nowym materiale graficznym.