Rastrowa czy wektorowa — dwa światy grafiki

🎯 Po co Ci to?

Powiększ zdjęcie z telefonu maksymalnie — rozsypie się na kwadraciki. Powiększ logo firmy w tym samym stopniu — pozostanie idealnie ostre. Ta różnica nie jest przypadkiem ani jakością: to dwa zupełnie różne sposoby, w jakie komputer przechowuje obraz, i wybór między nimi decyduje o wszystkim — czy grafika się skaluje, ile waży, do czego się nadaje. Zrozumienie tej różnicy to podstawa świadomej pracy z obrazem, a przy okazji piękny powrót do reprezentacji danych z działu 2: obraz to informacja, a informację można zapisać na dwa mądre sposoby.

✅ Czego się nauczysz

Po tej jednostce potrafisz:

  • odróżnić grafikę rastrową (piksele) od wektorowej (przepis geometryczny) i wskazać zastosowania;
  • wyjaśnić, czemu wektorowa skaluje się bez strat, a rastrowa nie;
  • dobrać format pliku do rodzaju grafiki i celu.

🔁 Przypomnij sobie

Z 2.5: obraz rastrowy to siatka pikseli, każdy z kolorem RGB; z 2.6: kompresja stratna (JPEG) i bezstratna; z 7.4: figury opisane przepisem (fraktale — geometria zamiast pikseli!).

📘 Wyjaśnienie

Poznałeś już grafikę rastrową (2.5): obraz to siatka pikseli, każdy z kolorem. Zdjęcia, skany, wszystko z aparatu — rastrowe. Jej cecha definiująca: obraz „wie" tylko, jaki kolor ma każdy punkt, nie wie, co przedstawia. Powiększenie to rozciąganie tej samej siatki — piksele robią się wielkie, obraz „pikselizuje". Rozdzielczość (liczba pikseli) jest zamrożona przy tworzeniu; więcej szczegółu nie przybędzie.

Grafika wektorowa to zupełnie inna filozofia: obraz zapisany jako przepis geometryczny — „koło o środku (100,100) i promieniu 50, wypełnione czerwienią; linia od A do B grubości 2". Nie ma pikseli — jest opis kształtów.

📐 DEFINICJA — grafika rastrowa i wektorowa: rastrowa przechowuje obraz jako siatkę pikseli (kolor każdego punktu); wektorowa — jako przepis na kształty geometryczne (linie, krzywe, figury z atrybutami).

Po ludzku: rastrowa to mozaika z kolorowych kwadracików; wektorowa to instrukcja „narysuj to i to". Czym NIE jest: „wektorowa = lepsza". Każda jest lepsza do czego innego — zdjęcia wektorowo się nie da (zbyt złożone, nie ma „kształtów"), logo rastrowo szkoda (traci skalowalność).

Skalowanie — kluczowa różnica. Bo wektorowa trzyma przepis, powiększenie to po prostu wykonanie go w większej skali: koło o promieniu 50 rysujesz jako koło o promieniu 500 — idealnie gładkie, przy dowolnym rozmiarze. Rastrowa nie ma czego „wykonać większego" — ma tylko piksele do rozciągnięcia. Dlatego logo, ikony, czcionki, mapy, diagramy — wszystko, co ma być ostre w każdym rozmiarze (od wizytówki po billboard) — robi się wektorowo. (Rozpoznajesz? Ryciny w tym przewodniku są wektorowe — SVG — właśnie dlatego są ostre i dopasowują się do trybu nocnego: to przepis, nie piksele.)

RASTROWA (piksele)WEKTOROWA (przepis)powiększenie = schodkicircle(480,150,r=90)powiększenie = wciąż gładkie
Porównanie grafiki rastrowej i wektorowej po powiększeniu: to samo koło jako siatka pikseli (po powiększeniu poszarpane schodki) i jako przepis wektorowy (po powiększeniu wciąż gładki brzeg); rastrowa zna kolory punktów, wektorowa zna kształt. · rys. własny

Formaty i dobór. Format pliku zdradza naturę: rastrowe to JPEG (zdjęcia, kompresja stratna — 2.6!), PNG (grafika z przezroczystością, bezstratna), GIF; wektorowe to SVG (standard sieciowy), formaty edytorów wektorowych. Reguła doboru: fotografia i obrazy o płynnych przejściach → rastrowa (JPEG dla zdjęć, PNG gdy trzeba ostrości/przezroczystości); logo, ikony, diagramy, tekst → wektorowa (SVG). Częsty błąd: logo zapisane jako JPEG (traci skalowalność i ostrość, dostaje artefakty kompresji na krawędziach) albo zdjęcie „przerobione na wektor" (bez sensu — fotografii nie da się sprowadzić do kształtów).

💭 Pomyśl: Projektujesz logo szkoły, które ma trafić i na wizytówkę (mały druk), i na baner na budynek (wielki). Rastrowo czy wektorowo? Co by się stało przy złym wyborze?

Sprawdź odpowiedź

Wektorowo — jeden plik-przepis obsłuży oba rozmiary idealnie ostro. Rastrowo musiałbyś zrobić wersję o rozdzielczości wystarczającej na baner (ogromny plik!), a i tak przy jeszcze większym druku by się posypała; wersja „na wizytówkę" rozmyłaby się na banerze w kwadraty. Wektor skaluje się w obie strony bez straty i bez rozdmuchiwania rozmiaru pliku. Dlatego profesjonalne logo zawsze dostarcza się wektorowo — a „prześlij mi logo w JPG" to prośba, która sprawia, że grafikom drga oko. Wybór reprezentacji (dział 2!) ma konsekwencje na lata.

🐞 Znajdź błąd

Uczeń zrobił diagram w edytorze grafiki, zapisał jako JPEG i wstawił do prezentacji. Na projektorze (duży ekran) tekst na diagramie jest rozmyty i ma dziwne „brudne" krawędzie. Co poszło nie tak i jak było trzeba?

Sprawdź odpowiedź

Dwa grzechy naraz: (1) diagram (kształty + tekst = materiał wektorowy) zapisany jako rastrowy JPEG — stracił skalowalność, więc na dużym ekranie rozciągnięte piksele się rozmywają. (2) JPEG to kompresja stratna (2.6) — świetna do zdjęć, fatalna do ostrych krawędzi i tekstu, wokół których zostawia „brudne" artefakty (tzw. dzwonienie). Trzeba było: zapisać wektorowo (SVG) albo, jeśli koniecznie rastrowo, jako PNG (bezstratny, bez artefaktów) w wysokiej rozdzielczości. Diagnoza „rozmyty tekst + brudne krawędzie na powiększeniu" niemal zawsze znaczy „wektorowy materiał wciśnięty w stratny raster". Reprezentacja i kompresja z działu 2 spotykają się w tej jednej wpadce.

🌍 Powiązania

Podział raster/wektor przenika całą grafikę cyfrową: czcionki są wektorowe (dlatego tekst jest ostry w każdym rozmiarze — litera to przepis, nie piksele!), ikony aplikacji wektorowe (jeden plik na wszystkie rozdzielczości ekranów), mapy cyfrowe wektorowe (płynny zoom). Gry łączą oba: wektorowy interfejs, rastrowe tekstury. A cała rewolucja „grafiki niezależnej od rozdzielczości" (te same ikony ostre na zegarku i telewizorze 8K) stoi na wektorach. Zrozumienie tej różnicy to nie ciekawostka — to codzienna decyzja każdego, kto tworzy cokolwiek wizualnego.

🛠️ Teraz Ty

Weź dowolne logo (własne, szkoły, ulubionej marki) w wersji rastrowej i powiększaj je w przeglądarce/edytorze aż do pikselizacji — zobacz granicę rastra. Potem znajdź lub zrób prostą grafikę wektorową (SVG — można je nawet napisać ręcznie jako tekst! <circle>, <rect>) i powiększaj bez końca. Bez komputera: dla dziesięciu rodzajów obrazów (zdjęcie, logo, mapa, ikona, skan, wykres, portret, diagram, tekstura, piktogram) zdecyduj raster/wektor i uzasadnij.

📐 Definicje tej lekcji

  • Grafika rastrowa — siatka pikseli; zdjęcia; nie skaluje się w górę bez straty; formaty JPEG/PNG/GIF.
  • Grafika wektorowa — przepis geometryczny na kształty; logo, ikony, diagramy; skaluje się bez strat; format SVG.
  • Dobór — fotografia/płynne przejścia → raster; kształty/tekst/skalowalność → wektor.

📌 Najważniejsze w pigułce

  • Raster zna kolory punktów, wektor zna kształty — stąd wektor skaluje się bez strat, raster pikselizuje.
  • Zdjęcia rastrowo (JPEG/PNG), logo/ikony/diagramy wektorowo (SVG); mieszanie ról psuje jakość.
  • To reprezentacja danych z działu 2 w praktyce — wybór ma konsekwencje na lata.

🎒 Zadania

  1. Dla każdego wskaż raster/wektor i uzasadnij: (a) zdjęcie klasowe, (b) ikona aplikacji, (c) skan dokumentu, (d) wykres z arkusza, (e) czcionka.
Wskazówka i odpowiedź

(a) raster — fotografia, płynne przejścia kolorów. (b) wektor — musi być ostra w wielu rozmiarach ekranów. (c) raster — skan to fotografia kartki (choć tekst na nim można potem rozpoznać i zwektoryzować). (d) wektor — kształty i tekst, ma być ostry i skalowalny (arkusze eksportują wykresy wektorowo!). (e) wektor — litera to przepis, dlatego tekst jest ostry w każdym rozmiarze. Reguła: „czy to płynna fotografia, czy zbiór kształtów?" rozstrzyga niemal zawsze.

  1. Wektorowy plik SVG loga waży 12 kB niezależnie od tego, czy wyświetlasz je jako 1 cm czy 1 metr. Rastrowa wersja „na metr" (300 dpi) waży 40 MB. Wyjaśnij tę przepaść rozmiarów.
Wskazówka i odpowiedź

SVG przechowuje przepis (kilka kształtów = kilka kilobajtów), niezależny od rozmiaru wyświetlania — wykonanie w większej skali nie powiększa pliku, tylko rysunek. Raster „na metr" musi zapisać każdy piksel obrazu metrowej wielkości w wysokiej rozdzielczości — miliony pikseli × 3 bajty (2.5!) = dziesiątki MB. Im większy docelowy rozmiar rastra, tym więcej pikseli do zapisania; wektor jest na to odporny. To dodatkowy, praktyczny argument za wektorem dla grafiki skalowalnej: nie tylko ostrość, ale i drastycznie mniejszy plik.

  1. Dlaczego fotografii nie da się sensownie zapisać wektorowo, choć „teoretycznie" można by ją opisać milionami maleńkich kolorowych kształtów?
Wskazówka i odpowiedź

Fotografia to miliony pikseli o płynnie zmieniających się, „niekształtnych" kolorach (skóra, niebo, liście) — nie ma w niej wyraźnych linii i figur do opisania przepisem. „Opis milionami kształtów" dałby plik większy niż raster (każdy piksel jako osobny kształt to więcej danych niż sam kolor) i nic by nie zyskał (skalowanie takiego „wektora" i tak nie dodałoby szczegółu, którego nie było). Wektor opłaca się tam, gdzie obraz jest zbiorem kształtów (logo, diagram); fotografia jest zbiorem pikseli z natury — i raster (plus kompresja stratna z 2.6) jest dla niej właściwy. Właściwa reprezentacja wynika z natury danych, nie z „teoretycznej możliwości".

🔍 Sprawdź, czy umiesz

  • Odróżnić raster od wektora i wskazać, co każdy przechowuje.
  • Wyjaśnić skalowanie bez strat wektora i pikselizację rastra.
  • Dobrać typ grafiki i format do dziesięciu różnych obrazów.

Ucz się tej jednostki z asystentem