Kodowanie obrazu i dźwięku

W grafice bitmapowej (rastrowej) obrazy zapisywane są jako siatka pikseli. Piksele to punkty, które mają określone położenie w obrazie oraz kolor. Kolory w pikselach kodujemy w pewien z góry ustalony sposób – często używanym modelem jest np. model RGB. Im drobniejsza jest siatka (im więcej pikseli zawiera obraz), tym wyższa będzie jakość i większa szczegółowość obrazu. Ponieważ pikseli nie można dalej dzielić, przy powiększaniu obrazu bitmapowego powiększają się również piksele, co powoduje utratę jakości. Na poniższej ilustracji widzimy, jak można zapisać obraz kółka przy użyciu niewielkiej liczby pikseli.

Głębia kolorów to liczba barw, jakie może przyjmować jeden piksel. Im większa jest głębia kolorów, tym więcej kolorów mamy do dyspozycji, a obraz może być dzięki temu wyższej jakości. Na poniższej ilustracji widać różnicę między sytuacjami, gdy dostępne są 2 kolory, 4 kolory oraz 256 kolorów.

Rozmiar obrazu bitmapowego jest określony liczbą pikseli. Obraz o wymiarach 1024 × 1024 zawiera 1024 \cdot 1024 (około miliona) pikseli, a jego rozmiar wynosi 1 Mpx (megapiksel). Rozdzielczość to wartość określająca, jak szczegółowy jest obraz. Podaje się ją w jednostkach DPI (dots per inch).

W grafice wektorowej obrazy są tworzone z figur geometrycznych, takich jak wielokąty, okręgi, krzywe czy linie łamane. Wektorowo można opisać również tekst.

Każdy obiekt ma określone parametry, np. położenie, rozmiar i kolor. Dzięki takiemu opisowi komputer wie, jak ma wyglądać dany obiekt i gdzie należy go umieścić na obrazie. Obrazy wektorowe można łatwo powiększać i pomniejszać bez utraty jakości. Dzieje się tak dlatego, że komputer za każdym razem na nowo wylicza wygląd poszczególnych obiektów na podstawie ich parametrów.

Obrazy wektorowe są często zapisywane w formacie SVG. Jest to format tekstowy, w którym wygląd obrazu opisuje się za pomocą kodu. Na przykład prosty okrąg można zapisać tak:

<circle cx="60" cy="60" r="55" fill="green" />

Najpierw określamy, jakiego typu jest obiekt: circle oznacza po angielsku okrąg. Następnie podajemy parametry określające jego dokładny wygląd. Parametry cx i cy definiują położenie środka okręgu we współrzędnych (60, 60). Parametr r określa promień okręgu, a fill kolor wypełnienia. W tym przypadku obraz będzie zielony. Wyrenderowany obraz będzie więc wyglądał następująco:

W formacie SVG można kodować również wiele innych typów obiektów, np. rect (rectangle = prostokąt), polygon (wielokąt) lub line (linia).Każdy typ obiektu ma swoje parametry – na przykład rozmiar prostokąta określamy za pomocą jego wysokości i szerokości. Jeśli tworzymy własne obrazy wektorowe, nie musimy jednak wpisywać całego kodu ręcznie. Możemy skorzystać z programów graficznych, w których pracujemy bezpośrednio z obiektami, a program tworzy kod SVG za nas.

Odwzorcowanie kolorów jest kluczowym aspektem w wielu dziedzinach, np. web designie, fotografii cyfrowej, drukarstwie czy branży filmowej. Istnieje kilka różnych modeli barw, z których najczęściej spotykane to RGB, CMYK i HSL.

RGB (Red-Green-Blue) model powszechnie używany w ekranach i monitorach cyfrowych. Kolory powstają poprzez mieszanie trzech barw podstawowych – czerwonej, zielonej i niebieskiej. Każdy kolor ma przypisaną wartość liczbową w zakresie 0–⁠255. Kody RGB są często zapisywane w systemie szesnastkowym. System ten wykorzystywany jest w programach graficznych, w związku z tym warto orientować się, jakim kolorom odpowiadają poszczególne kody RGB.

CMYK (Cyan-Magenta-Yellow-Key) model stosowany w drukarstwie. Kolory powstają poprzez mieszanie trzech barw podstawowych – cyjanu, magenty i żółci – z czernią.

HSL (Hue-Saturation-Lightness) model najbardziej intuicyjny, opisujący kolory za pomocą trzech parametrów – odcienia, nasycenia i jasności. Odcień zmienia się w zakresie 0–⁠360 stopni, nasycenie określa intensywność koloru, a jasność jego jasność lub ciemność. Model ten umożliwia proste modyfikacje kolorów, takie jak zmiana jasności lub nasycenia.