ZAWODNIK

Grafika rastrowa i wektorowa: piksel, rozdzielczość, DPI, głębia bitowa, kompresja

INF.03 · teoria
autor: redakcja · 02.11.2026
Jak zapisuje się zdjęcie i logo, co oznaczają wymiary w pikselach, PPI i DPI oraz jak policzyć liczbę kolorów i rozmiar nieskompresowanej bitmapy. Lekcja 5.1 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: Grafika i multimediaĆwicz temat: Grafika i multimedia
Gra­fi­ka ra­stro­wa to obraz za­pi­sa­ny jako siatka pik­se­li, a gra­fi­ka wek­to­ro­wa to obraz opi­sa­ny fi­gu­ra­mi i krzy­wy­mi. Na eg­za­mi­nie ta róż­ni­ca roz­strzy­ga, jaki pro­gram i format wybrać, co stanie się po po­więk­sze­niu oraz jak ob­li­czyć roz­miar obrazu. W za­da­niu prak­tycz­nym trzeba między innymi zmie­nić wy­mia­ry do­star­czo­ne­go zdję­cia z za­cho­wa­niem pro­por­cji, a na­stęp­nie za­pi­sać wynik pod wska­za­ną nazwą.

Pik­se­le zdję­cia i obiek­ty logo

Piksel to po­je­dyn­czy punkt siatki obrazu, któ­re­mu przy­pi­sa­no kolor. Zdję­cie myszy kom­pu­te­ro­wej o wy­mia­rach 1200 na 800 pik­se­li za­wie­ra 960 000 takich punk­tów. Każdy należy do kon­kret­ne­go wier­sza i ko­lum­ny. Plik nie prze­cho­wu­je in­for­ma­cji, że ciemny obszar przed­sta­wia przy­cisk myszy: prze­cho­wu­je war­to­ści, z któ­rych pro­gram od­twa­rza jej wygląd. Dla­te­go usu­nię­cie przed­mio­tu ze zdję­cia wymaga edycji jego pik­se­li albo za­sto­so­wa­nia od­po­wied­nich na­rzę­dzi za­zna­cza­nia.
Wektor to ma­te­ma­tycz­ny opis kie­run­ku i dłu­go­ści, ale w gra­fi­ce nazwą „wek­to­ro­wa” obej­mu­je się zapis obiek­tów przez ich geo­me­trię. Logo sklepu może skła­dać się z pro­sto­ką­ta, koła oraz ścież­ki, czyli ciągu od­cin­ków i krzy­wych. Obiekt ma po­ło­że­nie, wy­peł­nie­nie i obrys. Można zmie­nić sze­ro­kość samego obrysu bez ręcz­ne­go prze­ma­lo­wy­wa­nia kra­wę­dzi. Pro­gram prze­li­cza opis na pik­se­le do­pie­ro pod­czas wy­świe­tla­nia lub eks­por­tu.
Raster przechowuje kolory pól siatki, a wektor opis krzywej, którą program przelicza na piksele przy każdym powiększeniu.
Fo­to­gra­fia pro­duk­tu zwykle po­wsta­je jako raster, po­nie­waż aparat re­je­stru­je wiele drob­nych zmian świa­tła. Znak sklepu i sche­mat po­łą­czeń wy­god­niej przy­go­to­wać wek­to­ro­wo: mają nie­wie­le kształ­tów, a będą uży­wa­ne w róż­nych roz­mia­rach. Wektor nie jest au­to­ma­tycz­nie mniej­szy od rastra. Bardzo zło­żo­ny ry­su­nek może wy­ma­gać dużego opisu. Plik SVG może też za­wie­rać osa­dzo­ne zdję­cie, które po­zo­sta­je ra­strem i nie od­zy­sku­je ostro­ści przez samą zmianę opa­ko­wa­nia.

Roz­dziel­czość i pro­por­cje

Roz­dziel­czość w zna­cze­niu wy­mia­rów obrazu okre­śla liczbę pik­se­li w po­zio­mie i pionie. Zapis 1200 × 800 px podaje dwa wy­mia­ry, a ich ilo­czyn daje liczbę pik­se­li. To 0,96 me­ga­pik­se­la, po­nie­waż przed­ro­stek mega ozna­cza tutaj milion. Samo okre­śle­nie „milion pik­se­li” nie podaje pro­por­cji: obrazy 1000 na 1000 i 2000 na 500 za­wie­ra­ją tyle samo punk­tów, ale mają inny kształt.
Pro­por­cje to sto­su­nek sze­ro­ko­ści do wy­so­ko­ści. Nasze zdję­cie ma pro­por­cje 3:2. Jeśli arkusz wymaga sze­ro­ko­ści 400 px z za­cho­wa­niem pro­por­cji, współ­czyn­nik skali wynosi 400 po­dzie­lo­ne przez 1200, czyli jedna trze­cia. Wy­so­kość wy­nie­sie około 267 px, po­nie­waż obrazy ra­stro­we mają cał­ko­wi­tą liczbę wier­szy. Dla przy­kła­du 1200 na 900 px ten sam ra­chu­nek daje do­kład­nie 400 na 300 px.
Ska­lo­wa­nie zmie­nia liczbę pik­se­li. Ka­dro­wa­nie usuwa frag­ment obrazu, na przy­kład pusty brzeg wokół myszy, i może zmie­nić jego pro­por­cje. Zmiana roz­mia­ru płótna zmie­nia obszar ro­bo­czy, a nie musi zmie­niać roz­mia­ru samego pro­duk­tu. Te trzy ope­ra­cje dają różne wyniki, choć każda może pro­wa­dzić do pliku o sze­ro­ko­ści 400 px. Gdy po­le­ce­nie wymaga prze­ska­lo­wa­nia całego zdję­cia, przy­cię­cie go do sze­ro­ko­ści 400 px nie speł­nia tego samego wa­run­ku.
In­ter­po­la­cja to ob­li­cza­nie nowych war­to­ści pik­se­li przy zmia­nie wy­mia­rów. Przy po­mniej­sze­niu pro­gram łączy in­for­ma­cje z wielu punk­tów. Przy po­więk­sze­niu musi wy­zna­czyć do­dat­ko­we punkty na pod­sta­wie ist­nie­ją­cych. Nie od­zy­sku­je w ten sposób szcze­gó­łów, któ­rych nie było w ory­gi­na­le. Dla­te­go do przy­go­to­wa­nia mi­nia­tu­ry uży­wa­my dużego zdję­cia, a do dużego banera nie bie­rze­my ma­leń­kiej mi­nia­tu­ry.

PPI, DPI i roz­miar wy­dru­ku

PPI, od pixels per inch (pik­se­le na cal), opi­su­je gę­stość pik­se­li obrazu na wy­dru­ku albo ekra­nie. DPI, od dots per inch (punkty na cal), do­ty­czy punk­tów wy­twa­rza­nych przez urzą­dze­nie, na przy­kład dru­kar­kę. Nazwy bywają uży­wa­ne za­mien­nie w po­le­ce­niach i pro­gra­mach, lecz piksel obrazu oraz punkt atra­men­tu nie są tym samym. Jeden piksel może wy­ma­gać wielu punk­tów dru­kar­ki.
Jeżeli obraz ma 1200 px sze­ro­ko­ści, a wydruk otrzy­mu­je 300 pik­se­li na cal, sze­ro­kość wy­dru­ku wy­nie­sie 4 cale. Jeden cal ma 2,54 cm, więc otrzy­mu­je­my 10,16 cm. Przy 150 PPI te same 1200 px zajmie 8 cali, czyli 20,32 cm. Liczba pik­se­li nie zmie­ni­ła się: zmie­nił się sposób ich roz­miesz­cze­nia na pa­pie­rze. Nie trzeba two­rzyć do­dat­ko­wych pik­se­li, żeby zmie­nić sam pa­ra­metr wy­dru­ku.
Na stro­nie sklepu istot­ne są wy­mia­ry obrazu i roz­miar, w jakim po­ka­zu­je go CSS. Zmiana wpisu 72 na 300 PPI bez prze­ska­lo­wa­nia nie zrobi zdję­cia ostrzej­sze­go w prze­glą­dar­ce ani nie zmniej­szy go do 400 px. Ekrany o więk­szej gę­sto­ści mogą ko­rzy­stać z więk­szych wa­rian­tów zdjęć, lecz do­bie­ra się je do prze­wi­dzia­nej sze­ro­ko­ści wy­świe­tla­nia. Me­cha­nizm doboru opi­su­je lekcja o re­spon­syw­no­ści.

Głębia bitowa i ra­chu­nek pa­mię­ci

Głębia bitowa okre­śla, ile bitów służy do za­pi­sa­nia war­to­ści koloru. Jeden bit daje dwa stany. Obraz jed­no­bi­to­wy może więc roz­róż­nić dwa kolory, czte­ro­bi­to­wy 16, a ośmio­bi­to­wy 256. Ogólna reguła to dwa pod­nie­sio­ne do potęgi liczby bitów. Trzeba spraw­dzić, czy po­le­ce­nie mówi o bitach na piksel, czy na kanał, czyli jedną skła­do­wą koloru.
W po­pu­lar­nym za­pi­sie RGB każdy z trzech ka­na­łów ma 8 bitów. Razem daje to 24 bity na piksel, czyli 3 bajty oraz 16 777 216 moż­li­wych kom­bi­na­cji ko­lo­rów. Do­da­nie ośmio­bi­to­we­go kanału alfa, okre­śla­ją­ce­go prze­zro­czy­stość, daje 32 bity, czyli 4 bajty na piksel. Nie ozna­cza to czte­rech ka­na­łów barw­nych: alfa opi­su­je krycie, a nie ko­lej­ny kolor.
Roz­miar su­ro­wych danych zdję­cia 1200 na 800 px w RGB li­czy­my ko­lej­no: 1200 razy 800 daje 960 000 pik­se­li; razy 24 daje 23 040 000 bitów; dzie­le­nie przez 8 daje 2 880 000 bajtów. To 2,88 MB przy jed­nost­kach dzie­sięt­nych. Wynik nie obej­mu­je na­głów­ka, me­ta­da­nych ani kom­pre­sji, więc nie jest obiet­ni­cą rze­czy­wi­ste­go roz­mia­ru pliku JPG.
Kom­pre­sja to zapis danych w sposób zaj­mu­ją­cy mniej miej­sca. Bez­strat­na po­zwa­la od­two­rzyć za­pi­sa­ne war­to­ści do­kład­nie. Strat­na od­rzu­ca część in­for­ma­cji, co może dać mniej­szy plik kosz­tem zmiany obrazu. Po­wta­rza­ne zapisy do strat­ne­go for­ma­tu mogą do­kła­dać znie­kształ­ce­nia. Ory­gi­nał ro­bo­czy za­cho­wu­je­my osobno, a wa­rian­ty na stronę eks­por­tu­je­my z niego, nie z po­przed­nio skom­pre­so­wa­nej mi­nia­tu­ry.

Na eg­za­mi­nie

Py­ta­nie o gra­fi­kę po­więk­sza­ną bez schod­ków na kra­wę­dzi figury wska­zu­je na opis wek­to­ro­wy. Py­ta­nie o liczbę ko­lo­rów przy 8 bitach na piksel daje 256, ale przy 8 bitach na każdy z trzech ka­na­łów RGB daje ponad 16 mi­lio­nów. Naj­pierw ustal, czego do­ty­czy jed­nost­ka. Przy ra­chun­ku roz­mia­ru od­dziel pik­se­le, bity oraz bajty, a jed­nost­ki MB i MiB prze­li­czaj zgod­nie z tre­ścią za­da­nia.
Pu­łap­ka: samo usta­wie­nie obrazu na sze­ro­kość 400 px w HTML nie zmie­nia wy­mia­rów za­pi­sa­ne­go zdję­cia.
W za­da­niu prak­tycz­nym otwórz zdję­cie w edy­to­rze, za­cho­waj po­łą­cze­nie pro­por­cji, ustaw wy­ma­ga­ny wymiar i wy­eks­por­tuj do wła­ści­we­go pliku. Potem po­now­nie otwórz wynik i sprawdź jego roz­miar w pik­se­lach. Do­ku­men­ta­cja ska­lo­wa­nia w GIMP roz­dzie­la zmianę liczby pik­se­li i pa­ra­me­try wy­dru­ku; tego samego roz­róż­nie­nia wymaga po­praw­ny odczyt po­le­ce­nia.

Ściąga

Po­ję­cie
Zna­cze­nie
Raster
siatka pik­se­li, typowo fo­to­gra­fia
Wektor
opis obiek­tów i krzy­wych, typowo logo
Liczba pik­se­li
sze­ro­kość razy wy­so­kość
Liczba ko­lo­rów
2 do potęgi głębi w bitach na piksel
RGB 8 bitów na kanał
24 bity, 3 bajty na piksel
RGBA 8 bitów na kanał
32 bity, 4 bajty na piksel
Surowy roz­miar
sze­ro­kość razy wy­so­kość razy bity na piksel, po­dzie­lo­ne przez 8
PPI
pik­se­le przy­pa­da­ją­ce na cal
DPI
punkty urzą­dze­nia przy­pa­da­ją­ce na cal
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Grafika i multimedia na egzaminie INF.03następna: Formaty: JPG, PNG, GIF, WEBP, SVG, AVIF, BMP, TIFF, PSD, RAW; przezroczystość, animacjaspis działu: Grafika i multimedia

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuDokumenty CKEFormularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03JavaScript na egzaminie INF.03Zapytania SQL na egzaminie INF.03Bazy danych i SQL na egzaminie INF.03pokaż więcej (85)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulaminKontakt
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.