Grafika bitmapowa a wektorowa: różnice, formaty i zastosowania na stronie

Grafika bitmapowa i wektorowa różnią się sposobem zapisu obrazu. Bitmapa składa się z pikseli, więc świetnie nadaje się do zdjęć. Wektor opisuje kształty matematycznie, dlatego dobrze skaluje się jako logo, ikona i prosta ilustracja.

Na stronie internetowej zły format szybko wychodzi w praktyce: rozmazane logo, ciężkie ikony, wielkie pliki PNG albo SVG użyty tam, gdzie powinno być zdjęcie.

Kiedy używać bitmap

• zdjęcia ludzi, produktów i realizacji
• obrazy z dużą liczbą detali i przejść tonalnych
• grafiki eksportowane do WebP lub AVIF
• miniatury bloga i zdjęcia hero
• materiały, gdzie liczy się realizm obrazu

Bitmapy trzeba eksportować w odpowiedniej wielkości. Zdjęcie 4000 px szerokości wstawione jako mała miniatura marnuje transfer i spowalnia stronę.

Kiedy używać wektorów

1. Logo zapisz jako SVG, jeśli ma być ostre na każdym ekranie.
2. Ikony trzymaj w jednym stylu i bez zbędnych detali.
3. Proste ilustracje eksportuj jako SVG, gdy są lekkie.
4. Nie wkładaj długiego tekstu w grafikę bez wersji HTML.
5. Sprawdź wagę SVG, bo eksport z programu potrafi zawierać śmieci.

Najczęstszy zestaw dla strony firmowej to: logo i ikony w SVG, zdjęcia w WebP, ilustracje zależnie od złożoności. Taki układ daje ostrość i dobrą wagę plików.

Kontrola jakości

• logo nie rozmazuje się na telefonie
• zdjęcia mają właściwe proporcje i rozmiary
• pliki nie są większe niż potrzeba
• grafiki z treścią mają odpowiedniki tekstowe
• format jest zgodny z użyciem, a nie z przyzwyczajeniem grafika

Dobry dobór formatu to szybka wygrana. Strona wygląda lepiej, ładuje się szybciej i nie traci jakości na ekranach o dużej gęstości pikseli.

Źródła pomocnicze: MDN: SVG, web.dev: image formats.