Lekcja 1. Grafika rastrowa i wektorowa — dwa sposoby zapisu obrazu
latwyPo co się tego uczymy?
Powiększ zdjęcie z telefonu bardzo mocno, a zobaczysz rozmyte kwadraciki (piksele). Powiększ logo firmy w programie graficznym, a zostanie idealnie ostre niezależnie od rozmiaru. To nie przypadek — to dwa zupełnie różne sposoby zapisywania obrazu w komputerze, a wybór właściwego jest podstawą części komputerowej matury z informatyki dotyczącej grafiki.
Teoria
Grafika rastrowa (bitmapowa) — obraz zapisany jako SIATKA PIKSELI, gdzie każdy piksel ma przypisany dokładny kolor. Im więcej pikseli mieści się w danym obszarze (większa ROZDZIELCZOŚĆ), tym obraz jest ostrzejszy — ale rozmiar pliku też rośnie. Formaty rastrowe: JPG (zdjęcia, kompresja stratna), PNG (grafika z przezroczystością, kompresja bezstratna), BMP (bez kompresji, bardzo duże pliki), GIF (proste animacje, max 256 kolorów).
Grafika wektorowa — obraz zapisany jako ZBIÓR MATEMATYCZNYCH OPISÓW kształtów: punktów, linii, krzywych i wielokątów z ich kolorami i pozycjami (np. "okrąg o środku w punkcie (100,100) i promieniu 50, wypełniony kolorem czerwonym"). Ponieważ to WZÓR matematyczny, a nie siatka pikseli, obraz można powiększać do DOWOLNEGO rozmiaru bez utraty jakości. Formaty wektorowe: SVG (standard webowy, otwarty format tekstowy), AI (Adobe Illustrator), EPS.
Kluczowa różnica — skalowanie: powiększenie rastra to ROZCIĄGNIĘCIE istniejących pikseli (utrata ostrości, "pikselozą"), a powiększenie wektora to PRZELICZENIE wzoru na nowo dla większego rozmiaru (zawsze idealnie ostre).
Kiedy używać którego — zdjęcia, obrazy o skomplikowanej, naturalnej kolorystyce (np. fotografia krajobrazu) MUSZĄ być rastrowe, bo nie da się ich sensownie opisać wzorami geometrycznymi. Logo, ikony, ilustracje o wyraźnych kształtach i płaskich kolorach lepiej robić wektorowo — łatwo je potem skalować na wizytówkę i baner reklamowy bez utraty jakości.
Rozdzielczość i DPI — rozdzielczość obrazu rastrowego to liczba pikseli w poziomie i pionie (np. 1920×1080). DPI (dots per inch) określa GĘSTOŚĆ pikseli przy druku — wyższe DPI (np. 300 do druku) oznacza więcej szczegółów na tej samej powierzchni papieru niż niskie DPI (np. 72 do ekranu).
Schemat
RASTER (piksele) - powiększenie 4x: WEKTOR (wzór matematyczny) - powiększenie 4x:
[czerwony][czerwony] [CZERWONY][CZERWONY][CZERWONY][CZERWONY]
[czerwony][czerwony] → [CZERWONY][CZERWONY][CZERWONY][CZERWONY] (rozmyte kwadraty,
"pikseloza")
Okrąg(x=0,y=0,r=10) → Okrąg(x=0,y=0,r=40) (ten sam wzór,
przeliczony na nowo -
zawsze idealnie ostry)
Przykład z życia
Grafik projektujący logo firmy ZAWSZE robi to wektorowo (np. w Inkscape) — dzięki temu to SAMO logo trafia bez utraty jakości na wizytówkę (5×9 cm), stronę internetową (100×100 px) i billboard (10×5 metrów). Gdyby zrobił je rastrowo, musiałby tworzyć osobny plik dla każdego rozmiaru.
przyklad-wektorowy.svg
<!-- Przykład grafiki WEKTOROWEJ w formacie SVG (tekstowy opis kształtów) -->
<svg width="200" height="200" viewBox="0 0 200 200">
<!-- Koło: środek (100,100), promień 80, kolor czerwony -->
<circle cx="100" cy="100" r="80" fill="#e74c3c" />
<!-- Prostokąt: pozycja (60,60), szerokość 80, wysokość 80 -->
<rect x="60" y="60" width="80" height="80" fill="#f1c40f" />
<!-- Tekst jako obiekt wektorowy, nie piksele -->
<text x="100" y="105" text-anchor="middle" font-size="20">SVG</text>
</svg>
<!-- Ten sam plik SVG wygląda IDENTYCZNIE ostro przy szerokości
20px i przy szerokości 2000px - bo to wzór, nie siatka pikseli -->Komentarz i wyjaśnienie kodu
SVG to jeden z niewielu formatów graficznych, który jest jednocześnie CZYTELNYM TEKSTEM (podobnie jak HTML) — możesz go otworzyć w edytorze kodu i zobaczyć dokładnie, z jakich kształtów się składa. To fundamentalna różnica względem JPG czy PNG, gdzie plik to nieczytelny ciąg bajtów opisujących kolor każdego piksela z osobna.
Zwróć uwagę, że atrybuty cx, cy, r (środek X, środek Y, promień) to czyste WSPÓŁRZĘDNE i LICZBY — dokładnie jak w geometrii matematycznej, którą znasz z lekcji matematyki.
Ćwiczenie samodzielne
Otwórz dowolny edytor tekstu, wklej powyższy kod SVG do pliku z rozszerzeniem .svg i otwórz go w przeglądarce. Zmień wartość r="80" na r="20" oraz na r="200" i zaobserwuj, że kształt ZAWSZE pozostaje idealnie ostry.
Zadania do pracy własnej
Wypisz po 3 przykłady sytuacji, w których lepiej użyć grafiki rastrowej, i 3 przykłady, w których lepiej użyć grafiki wektorowej, uzasadniając wybór.
Zmodyfikuj powyższy kod SVG, dodając drugi okrąg (innego koloru, w innym miejscu) oraz linię łączącą oba okręgi (element
<line x1="" y1="" x2="" y2="" stroke="" />). Sprawdź działanie w przeglądarce.Utwórz plik SVG rysujący prosty domek (kwadrat jako ściana + trójkąt jako dach, użyj elementu
<polygon points="..." />dla dachu) o rozmiarze bazowym 100×100. Następnie stwórz DRUGĄ kopię tego samego kodu ze wszystkimi współrzędnymi pomnożonymi razy 5 (jako 500×500) i porównaj jakość obu wersji z hipotetycznym rastrowym odpowiednikiem powiększonym 5-krotnie (opisz różnicę tekstowo, bez konieczności realnego rastra).
Typowe błędy
Zapisywanie zdjęć jako format wektorowy — próba zapisania fotografii w SVG nie ma sensu, bo skomplikowane, naturalne gradienty kolorów w zdjęciu nie dają się sensownie opisać skończoną liczbą kształtów geometrycznych — plik i tak musiałby zawierać osadzony raster.
Mylenie rozdzielczości z rozmiarem pliku w cm/calach — rozdzielczość (np. 1920×1080 pikseli) to co innego niż fizyczny rozmiar wydruku — ten sam plik może być wydrukowany jako mała wizytówka (ostro) albo jako duży plakat (rozmyty), bo liczba pikseli się nie zmienia.
Powiększanie rastra "na zapas" — sztuczne powiększenie zdjęcia w edytorze NIE dodaje nowych szczegółów, tylko rozciąga istniejące piksele — jakość realnie się pogarsza, mimo że plik zajmuje więcej miejsca.
Nawiązanie do egzaminu zawodowego
Rozróżnienie raster/wektor jest podstawą do zrozumienia kolejnych tematów tego działu — kompresji danych (dlaczego JPG "waży" mniej niż BMP) oraz edycji zdjęć i grafiki wektorowej w konkretnych programach, którymi zajmiemy się w następnych lekcjach.