Grafika i multimedia w kwalifikacji INF.03: najważniejsze zasady, przykłady i 129 powiązanych pytań w banku.
Obraz na stronie to wymiana jakości na bajty, a każdy element tej wymiany daje się policzyć. Liczą się wymiary w pikselach, liczba bitów na piksel, rodzaj kompresji i możliwości samego formatu. Zamiast uczyć się listy rozszerzeń, sprawdzaj, co dany format potrafi zapisać: pełny kolor czy paletę, przezroczystość płynną czy binarną, jedną klatkę czy animację. Ta sama zasada obowiązuje w dźwięku i wideo, gdzie o odtworzeniu decyduje kodek zapisany w środku pliku, a nie rozszerzenie w nazwie.
Raster i wektor: kiedy który
Obraz rastrowy to siatka pikseli o stałych wymiarach, na przykład 800 na 600. Powiększenie nie tworzy nowych szczegółów, tylko dolicza piksele metodą interpolacji: przy metodzie najbliższego sąsiada widać schodki, przy dwusześciennej rozmycie. Obraz wektorowy przechowuje opis figur: współrzędne punktów, krzywe Béziera, grubości linii i kolory wypełnień, a piksele powstają dopiero przy wyświetlaniu.
Wektor jest rysowany od nowa w każdej skali, więc logo w SVG jest ostre i przy 32 pikselach, i przy 2000, a sam plik zajmuje zwykle kilka kilobajtów, bo to zwykły tekst. Zdjęcie z aparatu zapisz rastrowo, bo krzywe nie opiszą milionów nieregularnych plamek koloru. Logo, ikony i schematy trzymaj wektorowo i rasteryzuj dopiero do formatu docelowego, w dokładnym rozmiarze wyświetlania.
Wymiary, rozdzielczość i głębia koloru
Wymiary w pikselach i rozdzielczość druku to dwie różne rzeczy: obraz 1920 na 1080 ma 2 073 600 pikseli niezależnie od tego, czy w metadanych wpisano 72, czy 300 ppi. Wartość ppi mówi tylko, jak duży ma być wydruk, i przeglądarka jej nie używa. Zdjęcie drukowane w szerokości 10 cm przy 300 ppi wymaga około 1181 pikseli szerokości, więc plik 800 pikseli szerokości wyjdzie na papierze nieostry.
Głębia koloru mówi, ile bitów opisuje jeden piksel. Przy 24 bitach, czyli 3 bajtach na piksel, nieskompresowana mapa bitowa 1920 na 1080 zajmuje 6 220 800 bajtów, około 5,9 MiB. Osiem bitów na kanał daje 256 poziomów jednej składowej i 16 777 216 kolorów, a kanał alfa dokłada kolejne 8 bitów, razem 32 bity na piksel.
Tryby barw: RGB, CMYK i sRGB
RGB jest addytywny, bo składowe są światłem: pełna czerwień, zieleń i niebieski razem dają na ekranie biel, a brak wszystkich trzech daje czerń. CMYK jest subtraktywny, bo farba odejmuje światło odbite od bieli papieru, a czarny kanał K dokłada się dlatego, że mieszanka trzech barw procesowych daje brudny brąz zamiast czerni.
Część nasyconych barw RGB, zwłaszcza jaskrawe zielenie i błękity, nie mieści się w gamucie CMYK, dlatego wydruk bywa bledszy niż podgląd na monitorze. Pliki przeznaczone na stronę zapisuj w przestrzeni sRGB, bo to domyślne założenie przeglądarek. Zdjęcie zapisane w Adobe RGB bez konwersji i bez wtopionego profilu wyświetli się w internecie z wyraźnie wyprane.
JPEG, PNG, GIF, SVG i WebP
JPEG jest stratny, koduje obraz w modelu YCbCr i zwykle zapisuje kolor w połowie rozdzielczości jasności, czyli w trybie 4:2:0, a przezroczystości ani animacji nie obsługuje w ogóle. PNG jest bezstratny i w wariancie 24-bitowym ma kanał alfa z 256 poziomami krycia, więc pozwala na miękki cień na dowolnym tle. Wariant PNG-8 używa palety 256 kolorów i waży mniej, a animację daje dopiero rozszerzenie APNG.
GIF ma paletę 256 kolorów, przezroczystość binarną, czyli piksel jest albo w pełni widoczny, albo w pełni przezroczysty, i obsługuje animację. SVG jest wektorowy, zapisany jako tekst XML, z przezroczystością i animacją sterowaną przez CSS lub SMIL. WebP łączy kompresję stratną i bezstratną, kanał alfa oraz animację i przy tej samej jakości waży zwykle o jedną czwartą mniej niż JPEG, a nowszy AVIF schodzi jeszcze niżej.
Kompresja stratna kontra bezstratna
Kompresja bezstratna odtwarza dane bit w bit: PNG używa algorytmu Deflate z filtrami predykcyjnymi, GIF korzysta z LZW. Na zdjęciu taka kompresja zbija plik mniej więcej o połowę, podczas gdy JPEG przy jakości 80 potrafi go zmniejszyć dziesięciokrotnie, bo trwale usuwa szczegóły słabo widoczne dla oka. W JPEG steruje tym suwak jakości: przy 80 obraz zwykle wygląda dobrze, przy 40 widać bloki 8 na 8 pikseli i obwódki wokół krawędzi.
Artefakty najbardziej rzucają się w oczy na ostrych kontrastach, czyli na tekście, cienkich liniach i zrzutach ekranu, dlatego takie obrazy zapisuj bezstratnie w PNG. Każdy ponowny zapis JPEG kwantyzuje już zniekształcone dane, więc straty się sumują i nie da się ich cofnąć. Edytuj zawsze plik źródłowy, a wersję JPEG generuj raz, na końcu pracy.
Waga pliku, czas ładowania i wideo
Zdjęcie 4000 na 3000 pikseli, czyli 12 milionów pikseli, wstawione w miejsce o szerokości 1200 pikseli nie wygląda lepiej, tylko waży więcej. Atrybut width w HTML i reguły CSS zmieniają rozmiar wyświetlania, a nie wielkość pobieranego pliku; realny transfer ograniczysz dopiero przez zmniejszenie wymiarów przed zapisem, atrybut srcset albo leniwe ładowanie. Zamiast 2,8 MB wychodzi wtedy około 200 KB, co przy łączu 10 Mb/s, czyli około 1,25 MB na sekundę, skraca pobieranie z ponad 2 sekund do niecałych 0,2 sekundy.
W multimediach kontener to pudełko na strumienie: MP4 i MKV mieszczą obraz, dźwięk i napisy, WebM przyjmuje tylko kodeki VP8, VP9 i AV1 z dźwiękiem Vorbis lub Opus, a stary AVI nie ma standardowej obsługi napisów. Kodek opisuje sposób zakodowania strumienia, na przykład H.264 lub AV1 dla obrazu i AAC, MP3 lub Opus dla dźwięku, więc plik z rozszerzeniem mp4 nie odtworzy się, gdy odtwarzacz nie zna kodeka użytego w środku. Rozmiar policzysz wprost: dźwięk 44 100 próbek razy 16 bitów razy 2 kanały to 1 411 200 bitów na sekundę, czyli około 10,6 MB na minutę, ten sam materiał w MP3 przy 128 kb/s zajmuje 0,96 MB na minutę, a wideo o przepływności 5 Mb/s około 37,5 MB na minutę.
Z tym działem powiązano 129 pytań w banku INF.03. Na ekranie Wszystkie pytania wybierz jeden z tagów: grafika. Możesz wtedy przejrzeć zadania tylko z interesującego Cię obszaru.