Grafika rastrowa to rodzaj grafiki komputerowej, w której obraz zbudowany jest z siatki pojedynczych punktów zwanych pikselami, a każdy z nich przechowuje informację o kolorze. Im więcej pikseli na daną powierzchnię (czyli im wyższa rozdzielczość), tym więcej szczegółów widać na obrazie. Do formatów rastrowych zaliczamy m.in. JPG, PNG, GIF, WebP oraz AVIF.
W przeciwieństwie do grafiki wektorowej, obraz rastrowy ma stałą liczbę pikseli. Powiększenie go ponad rozmiar oryginalny prowadzi do rozmycia i widocznych „schodków” na krawędziach. To najczęściej spotykany typ grafiki w internecie — dotyczy zdjęć, banerów i większości zdjęć produktowych w sklepach.
Jak grafika rastrowa działa w praktyce
Grafika rastrowa opisuje obraz jako mapę bitową — dwuwymiarową tablicę pikseli, gdzie każdy piksel ma przypisaną wartość koloru. Plik o wymiarach 1920 × 1080 pikseli zawiera dokładnie 2 073 600 punktów, a jego jakość i „ostrość” zależą od tego, ile z tych punktów przypada na obszar wyświetlania.
Rozdzielczość, DPI i głębia kolorów
Trzy parametry decydują o jakości i wadze pliku rastrowego: rozdzielczość, DPI i głębia bitowa koloru. Rozdzielczość to liczba pikseli (np. 3000 × 2000), DPI (dots per inch) mówi o gęstości punktów przy druku, a głębia kolorów określa, ile odcieni może przyjąć każdy piksel.
Standardem dla ekranu jest 72 DPI, a dla druku wysokiej jakości minimum 300 DPI. Głębia 8 bitów na kanał daje ponad 16 milionów kolorów (24-bit RGB) — to w zupełności wystarcza dla fotografii wyświetlanej na stronie internetowej.
Formaty rastrowe i kompresja
Formaty rastrowe różnią się sposobem kompresji, co bezpośrednio przekłada się na wagę pliku i jakość obrazu. Kompresja stratna (JPG, WebP w trybie lossy) redukuje wagę kosztem detali, a bezstratna (PNG, GIF) zachowuje wszystkie dane, ale generuje cięższe pliki.
| Format | Kompresja | Przezroczystość | Najlepsze zastosowanie |
|---|---|---|---|
| JPG | stratna | nie | zdjęcia, fotografia |
| PNG | bezstratna | tak | logo, grafiki z tłem |
| WebP | stratna/bezstratna | tak | web (uniwersalny) |
| AVIF | stratna/bezstratna | tak | web nowej generacji |
| GIF | bezstratna | tak | proste animacje |
Czym różni się grafika rastrowa od wektorowej?
Grafika rastrowa składa się z pikseli i traci jakość przy skalowaniu, podczas gdy grafika wektorowa opiera się na krzywych matematycznych i można ją powiększać bez utraty ostrości. Raster sprawdza się w fotografii i obrazach o bogatej palecie barw, a wektor w logo, ikonach i grafikach, które muszą być skalowalne (formaty SVG, EPS, AI).
W praktyce oba typy współistnieją. Logo firmowe projektuje się wektorowo, a na stronę eksportuje do rastra (najczęściej PNG lub SVG), natomiast zdjęcia produktowe zawsze pozostają rastrowe.
Znaczenie dla SEO i widoczności
Grafika rastrowa ma bezpośredni wpływ na SEO, ponieważ nieoptymalizowane zdjęcia to jedna z najczęstszych przyczyn wolnego ładowania stron. Ciężkie pliki JPG czy PNG spowalniają witrynę i pogarszają wyniki w Core Web Vitals, zwłaszcza metrykę LCP (Largest Contentful Paint), którą Google traktuje jako sygnał rankingowy.
W naszej codziennej pracy w Webiti optymalizacja obrazów rastrowych to często pierwszy element audytu SEO. Konwersja do formatu WebP potrafi zmniejszyć wagę pliku o 25–35% względem JPG przy zachowaniu jakości, a wdrożenie atrybutu loading="lazy" odracza ładowanie zdjęć poza ekranem.
Istotny jest też atrybut alt — opis obrazu, który pomaga wyszukiwarce zrozumieć zawartość zdjęcia i wpływa na widoczność w Google Grafika. Dla sklepów internetowych to realny kanał ruchu, dlatego przy pozycjonowaniu sklepów internetowych traktujemy optymalizację zdjęć produktowych priorytetowo.
FAQ
Czy grafika rastrowa nadaje się do logo?
Logo lepiej projektować w grafice wektorowej, bo musi być skalowalne — od wizytówki po baner reklamowy. Wersja rastrowa (PNG z przezroczystym tłem) sprawdza się jednak jako gotowy plik do osadzenia na stronie czy w mailu, o ile jest wyeksportowana w odpowiednio wysokiej rozdzielczości.
Jaki format rastrowy wybrać na stronę internetową?
Dla większości zdjęć na stronie najlepszym wyborem jest WebP, który łączy dobrą jakość z niską wagą pliku. Nowsze projekty warto oprzeć o AVIF (jeszcze lepsza kompresja), a PNG zostawić dla grafik wymagających przezroczystości. JPG pozostaje bezpiecznym standardem dla klasycznej fotografii.
Dlaczego grafika rastrowa rozmywa się po powiększeniu?
Obraz rastrowy ma stałą liczbę pikseli, więc powiększenie go ponad rozmiar oryginalny zmusza program do „dorysowania” brakujących punktów przez interpolację. Efektem jest rozmycie i widoczna pikseloza. Aby tego uniknąć, zawsze pracuj na pliku o rozdzielczości wyższej lub równej docelowej.
Co to jest DPI i kiedy ma znaczenie?
DPI (dots per inch) to gęstość punktów na cal, istotna głównie przy druku. Materiały drukowane wymagają zwykle 300 DPI, a grafika na ekran 72 DPI — dlatego plik przygotowany do internetu nie nadaje się do wysokiej jakości druku bez odpowiednio dużej rozdzielczości.
Piksel po pikselu do lepszej strony
Grafika rastrowa to fundament wizualnej warstwy niemal każdej witryny — od zdjęć produktowych po banery — a jej optymalizacja realnie przekłada się na szybkość ładowania i pozycje w wyszukiwarce. Jeśli chcesz mieć pewność, że Twoje obrazy nie hamują witryny, sprawdź nasz audyt SEO lub kompleksowe pozycjonowanie stron w Webiti.
