Grafika w sekcji hero to często najcięższy element strony głównej. To ona odpowiada za pierwsze wrażenie, przyciąga wzrok i jednocześnie potrafi zrujnować czas ładowania, jeśli zostanie przygotowana lekkomyślnie. Wybór między JPG, PNG i SVG nie jest kwestią estetycznego widzimisię, lecz techniczną decyzją, która przekłada się na transfer i postrzeganą jakość. Zanim wrzucisz cokolwiek do hero, sprawdź, z jakim typem treści masz do czynienia — zdjęciem, ilustracją z przezroczystością czy ikoną wektorową. Każdy z tych przypadków rządzi się innymi prawami, a wiedza o tym, jak działają formaty obrazów JPG, PNG i SVG, oszczędza późniejszych poprawek i kompromisów.

Fotografia w hero niemal zawsze powinna trafić do JPG. Kompresja stratna w tym formacie potrafi zredukować plik z kilku megabajtów do dwustu kilobajów, a przy dobrze dobranym współczynniku jakości różnica na ekranie pozostaje niezauważalna. Problem zaczyna się, gdy kompresja zostanie przesadzona. Wtedy na krawędziach kontrastowych elementów pojawiają się rozmazane plamy, niebo traci gładkość i wchodzi charakterystyczna pikseloza. Szczególnie widać to na dużych powierzchniach jednolitego koloru, gdzie artefakty kompresji tworzą brzydkie przejścia. Jeśli hero jest ciemne i zawiera delikatne gradienty, warto podnieść jakość zapisu albo rozważyć format nowszy, jak WebP czy AVIF, które przy tej samej wadze pliku zachowują więcej detalu.

PNG wchodzi do gry, gdy potrzebujesz przezroczystości albo grafiki z ostrymi krawędziami. Logo, ikona, element interfejsu nałożony na tło — to domena PNG. Ten format nie stosuje kompresji stratnej, więc jakość pozostaje nienaruszona, ale cena bywa wysoka: plik potrafi ważyć kilka razy więcej niż analogiczny JPG. W sekcji hero ma to znaczenie, bo każdy dodatkowy megabajt opóźnia pierwsze malowanie strony. Rozwiązaniem jest redukcja palety kolorów lub użycie narzędzi takich jak pngquant, które zmniejszają wagę bez widocznej utraty jakości. Jeśli przezroczystość nie jest konieczna, nie ma sensu sięgać po PNG tylko dlatego, że „lepiej wygląda”.

SVG sprawdza się tam, gdzie grafika ma być skalowalna i lekka — ikony, proste kształty, wykresy, dekoracyjne linie. Plik wektorowy waży grosze w porównaniu z bitmapą, a przy każdym powiększeniu pozostaje idealnie ostry. W hero SVG świetnie działa jako element tła lub nakładka, ale nie zastąpi fotografii. Próba wrzucenia zdjęcia do SVG mija się z celem, bo i tak zostanie osadzone jako bitmapa. Dobór formatu to więc nie kwestia mody, lecz dopasowania narzędzia do zadania. Kiedy kompresja psuje jakość, a kiedy ratuje transfer — odpowiedź zależy od tego, co dokładnie chcesz pokazać w hero.