ZAWODNIK

Formaty: JPG, PNG, GIF, WEBP, SVG, AVIF, BMP, TIFF, PSD, RAW; przezroczystość, animacja

INF.03 · teoria
autor: redakcja · 02.11.2026
Dobór formatu zdjęcia, logo i animacji do strony. Różnice między kompresją stratną i bezstratną, kanałem alfa, plikiem projektu oraz eksportem do przeglądarki. Lekcja 5.2 kursu INF.03.

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

Przejrzyj pytania: Grafika i multimediaĆwicz temat: Grafika i multimedia
Format pliku gra­ficz­ne­go to zestaw reguł zapisu obrazu oraz in­for­ma­cji po­trzeb­nych do jego od­czy­ta­nia. Na eg­za­mi­nie trzeba roz­po­znać roz­sze­rze­nie, wska­zać ob­słu­gę prze­zro­czy­sto­ści lub ani­ma­cji i dobrać format do fo­to­gra­fii albo logo. W za­da­niu prak­tycz­nym liczy się rów­nież to, czy za­pi­sa­ny plik na­praw­dę ma żądany format, a nie tylko od­po­wied­nią koń­ców­kę nazwy.

Naj­pierw prze­zna­cze­nie obrazu

Prze­zna­cze­nie to od­po­wiedź na py­ta­nie, gdzie i jak obraz będzie uży­wa­ny. Zdję­cie pro­duk­tu w skle­pie za­wie­ra ty­sią­ce ła­god­nych przejść barw­nych, logo ma ostre kra­wę­dzie, a in­struk­cja z na­pi­sa­mi wymaga czy­tel­nych liter. Jeden sposób kom­pre­sji nie będzie równie dobry dla wszyst­kich tych treści. Naj­pierw spraw­dza­my po­trze­bę prze­zro­czy­sto­ści, ruchu i dal­szej edycji, potem po­rów­nu­je­my wygląd oraz roz­miar eks­por­tów.
Prze­zro­czy­stość po­zwa­la po­ka­zać tło strony za­miast części obrazu. Kanał alfa opi­su­je sto­pień krycia pik­se­li, dla­te­go miękki cień może prze­cho­dzić od peł­ne­go krycia do cał­ko­wi­tej prze­zro­czy­sto­ści. Prze­zro­czy­stość jed­no­bi­to­wa daje je­dy­nie wybór: piksel wi­docz­ny albo nie­wi­docz­ny. Na ciem­nym tle sklepu róż­ni­ca jest wy­raź­na przy wy­gła­dzo­nych brze­gach znaku. Biała otocz­ka nie znika tylko dla­te­go, że plik ma prze­zro­czy­sty obszar poza nią.
Ani­ma­cja prze­cho­wu­je ko­lej­ne klatki i czasy ich wy­świe­tla­nia. Ob­słu­ga ani­ma­cji w for­ma­cie nie znaczy, że każdy plik tego for­ma­tu jest ru­cho­my. Po­dob­nie moż­li­wość zapisu bez­strat­ne­go nie ozna­cza, że każdy eks­port za­cho­wu­je wszyst­kie dane pro­jek­tu. Trzeba od­róż­nić obraz wy­ni­ko­wy od warstw, tek­stów oraz usta­wień po­trzeb­nych do dal­szej pracy.

JPG i PNG

JPEG, zwykle z roz­sze­rze­niem JPG lub JPEG, jest po­pu­lar­nym for­ma­tem fo­to­gra­fii. W ty­po­wym eks­por­cie sto­su­je kom­pre­sję strat­ną: zmniej­sza plik przez uprosz­cze­nie danych obrazu. Przy roz­sąd­nych usta­wie­niach zdję­cie myszy może wy­glą­dać dobrze i po­bie­rać się szybko. Przy bardzo ni­skiej ja­ko­ści po­ja­wia­ją się plamy, kwa­dra­to­we ob­sza­ry i ob­wód­ki wokół kon­tra­sto­wych kra­wę­dzi. Napis i cienka linia zdra­dza­ją te błędy szyb­ciej niż mięk­kie tło zdję­cia.
Zwykły JPG uży­wa­ny na stro­nach nie prze­cho­wu­je kanału alfa ani ani­ma­cji. Wy­cię­ty pro­dukt na prze­zro­czy­stym tle po takim eks­por­cie otrzy­ma tło, naj­czę­ściej do­bra­ne przez edytor pod­czas spłasz­cza­nia. To nie wada prze­glą­dar­ki. Jeżeli arkusz żąda pliku JPG, przy­go­tuj świa­do­mie tło i wy­ko­naj wła­ści­wy eks­port, za­miast ocze­ki­wać prze­zro­czy­sto­ści od for­ma­tu, który jej nie za­pi­su­je.
PNG, od Portable Network Graphics (prze­no­śna gra­fi­ka sie­cio­wa), sto­su­je kom­pre­sję bez­strat­ną. Dobrze nadaje się do sche­ma­tów, in­ter­fej­sów, na­pi­sów i ob­ra­zów wy­ma­ga­ją­cych prze­zro­czy­sto­ści. Może za­pi­sy­wać kolory in­dek­so­wa­ne, czyli od­wo­ła­nia do palety, albo kolory o więk­szej licz­bie skła­do­wych. Wa­riant z ka­na­łem alfa za­cho­wu­je także czę­ścio­we krycie. Zdję­cie za­pi­sa­ne w PNG może być jednak znacz­nie więk­sze niż po­dob­nie wy­glą­da­ją­cy JPG.
Bez­strat­ny zapis ozna­cza za­cho­wa­nie danych obrazu prze­ka­za­nych do kodera. Jeśli wcze­śniej zre­du­ko­wa­no liczbę ko­lo­rów do małej palety albo po­mniej­szo­no fo­to­gra­fię, zapis PNG nie od­two­rzy utra­co­nych in­for­ma­cji. Dla­te­go „bez­strat­ny” nie znaczy „nie da się po­gor­szyć przy przy­go­to­wa­niu”. Zmiana wy­mia­rów i koloru po­prze­dza­ją­ca eks­port nadal może zmie­nić obraz.

GIF, WebP i AVIF

GIF to format ra­stro­wy z paletą do 256 ko­lo­rów w po­je­dyn­czej klatce. Ob­słu­gu­je proste ani­ma­cje i prze­zro­czy­stość bez stopni krycia. Nadaje się do krót­kie­go ry­sun­ko­we­go ruchu, lecz fo­to­gra­fia z płyn­nym gra­dien­tem może po­ka­zać pasy albo ziar­ni­sty wzór za­stę­pu­ją­cy bra­ku­ją­ce kolory. Format nie za­pi­su­je ścież­ki dźwię­ko­wej, więc ani­mo­wa­ny GIF nie jest od­po­wied­ni­kiem filmu z na­gra­nym ko­men­ta­rzem.
WebP ob­słu­gu­je zapis strat­ny i bez­strat­ny, kanał alfa oraz ani­ma­cję. Można zatem przy­go­to­wać w nim za­rów­no fo­to­gra­fię pro­duk­tu, jak i ru­cho­my ele­ment strony. Samo roz­sze­rze­nie nie od­po­wia­da na py­ta­nie, czy kom­pre­sja danego pliku była strat­na. Od­czy­taj usta­wie­nia eks­por­tu lub in­for­ma­cje o pliku. Po­rów­nuj też wynik: mniej­szy plik z wi­docz­ny­mi znie­kształ­ce­nia­mi nie speł­nia wy­ma­ga­nia czy­tel­ne­go ka­ta­lo­gu.
AVIF to format ob­ra­zów wy­ko­rzy­stu­ją­cy tech­no­lo­gię ko­do­wa­nia AV1. Ob­słu­gu­je między innymi prze­zro­czy­stość oraz se­kwen­cje ob­ra­zów. Może dać mały plik przy dobrej ja­ko­ści zdjęć, ale wynik zależy od ma­te­ria­łu i pa­ra­me­trów. Wy­ma­ga­nia kon­kret­ne­go sta­no­wi­ska lub star­szej prze­glą­dar­ki spraw­dza­my przed wy­bo­rem. Za­miast za­kła­dać ob­słu­gę wszyst­kich wa­rian­tów, można za­pew­nić obraz za­stęp­czy za pomocą znacz­ni­ka <picture>.
1
2
3
4
5
<picture>
<source srcset="img/mysz.avif" type="image/avif">
<source srcset="img/mysz.webp" type="image/webp">
<img src="img/mysz.jpg" alt="Czarna mysz przewodowa" width="400" height="300">
</picture>
Prze­glą­dar­ka wy­bie­ra pierw­sze pa­su­ją­ce źródło, któ­re­go format po­tra­fi ob­słu­żyć. Ele­ment <img> po­zo­sta­je ko­niecz­ny: za­pew­nia wa­riant koń­co­wy, wy­mia­ry i tekst al­ter­na­tyw­ny. Wszyst­kie pliki trzeba rze­czy­wi­ście przy­go­to­wać. Sam zapis do­dat­ko­wych roz­sze­rzeń w kodzie nie prze­kształ­ca ory­gi­nal­ne­go zdję­cia. Pod­sta­wy osa­dza­nia opi­su­je lekcja o ob­ra­zach i mul­ti­me­diach HTML.

SVG i pliki do dal­szej pracy

SVG, od Scalable Vector Graphics (ska­lo­wal­na gra­fi­ka wek­to­ro­wa), opi­su­je kształ­ty, ścież­ki i tekst w po­sta­ci do­ku­men­tu XML. Jest przy­dat­ny dla logo sklepu, ikon oraz sche­ma­tów. Przy zmia­nie skali prze­glą­dar­ka prze­li­cza geo­me­trię i po­now­nie rysuje kra­wę­dzie. Nie na­pra­wia jednak fo­to­gra­fii osa­dzo­nej we­wnątrz do­ku­men­tu. SVG może za­wie­rać także funk­cje wy­kra­cza­ją­ce poza prosty obraz, dla­te­go do strony wsta­wia­my pliki z za­ufa­ne­go źródła.
BMP to ro­dzi­na for­ma­tów bit­ma­po­wych ko­ja­rzo­na z pro­stym za­pi­sem obrazu. W ty­po­wych za­da­niach nie­skom­pre­so­wa­ny BMP ma więk­szy roz­miar niż skom­pre­so­wa­ny plik na stronę. Nie należy jednak twier­dzić, że każdy moż­li­wy BMP jest nie­skom­pre­so­wa­ny: format prze­wi­du­je rów­nież inne wa­rian­ty. TIFF także jest ela­stycz­nym kon­te­ne­rem obrazu, sto­so­wa­nym między innymi przy ska­no­wa­niu i druku. Może używać róż­nych metod kom­pre­sji, więc samo roz­sze­rze­nie nie roz­strzy­ga o stra­cie danych.
PSD jest for­ma­tem pro­jek­tu pro­gra­mu Pho­to­shop, prze­cho­wu­ją­cym między innymi war­stwy i ele­men­ty dal­szej edycji. W GIMP od­po­wied­nią rolę pełni XCF. Takie pliki za­cho­wu­je­my jako źródła, lecz nie po­da­je­my ich za­miast zdję­cia w zwy­kłym <img>. To, że edytor po­tra­fi otwo­rzyć plik pro­jek­tu, nie ozna­cza ob­słu­gi tego for­ma­tu przez prze­glą­dar­kę.
RAW to wspól­na nazwa rodzin plików z danymi z apa­ra­tu, a nie po­je­dyn­czy uni­wer­sal­ny format strony. Zdję­cie wymaga wy­wo­ła­nia, czyli do­bra­nia pa­ra­me­trów in­ter­pre­ta­cji danych, i eks­por­tu. Za­cho­wa­nie RAW po­zwa­la wrócić do źródła, po­dob­nie jak za­cho­wa­nie pro­jek­tu z war­stwa­mi. Do ka­ta­lo­gu sklepu trafia do­pie­ro przy­go­to­wa­ny wa­riant, na przy­kład JPG, WebP lub AVIF.

Na eg­za­mi­nie

Py­ta­nie o logo o gład­kich kra­wę­dziach w do­wol­nej skali pro­wa­dzi do SVG. Py­ta­nie o fo­to­gra­fię bez po­trze­by prze­zro­czy­sto­ści często pro­wa­dzi do JPG. Kanał alfa i bez­strat­ny obraz wska­zu­ją na PNG, ale przy więk­szej licz­bie po­da­nych for­ma­tów trzeba prze­czy­tać wszyst­kie wa­run­ki: WebP także może je speł­niać. GIF roz­po­zna­je­my po pa­le­cie oraz klat­kach, nie po prze­ko­na­niu, że jest je­dy­nym for­ma­tem ani­ma­cji.
Pu­łap­ka: zmiana nazwy logo.xcf na logo.png nie jest eks­por­tem i nie zmie­nia struk­tu­ry pliku.
W prak­ty­ce za­cho­waj pro­jekt, wy­eks­por­tuj re­zul­tat i otwórz go po­now­nie poza edy­to­rem. Sprawdź prze­zro­czy­stość na innym tle, wy­mia­ry oraz do­kład­ną nazwę. Przy wy­bo­rze no­wo­cze­sne­go for­ma­tu po­rów­naj do­ku­men­ta­cję for­ma­tów ob­ra­zów MDN, która opi­su­je ich moż­li­wo­ści i ob­słu­gę w prze­glą­dar­kach. W po­le­ce­niu eg­za­mi­na­cyj­nym wy­ma­ga­ny format ma pierw­szeń­stwo przed wła­snym wy­bo­rem opty­ma­li­za­cji.

Ściąga

Format
Typowe za­sto­so­wa­nie lub cecha
JPG
fo­to­gra­fia, zwykle kom­pre­sja strat­na, bez alfa
PNG
bez­strat­ny obraz, tekst, kanał alfa
GIF
paleta do 256 ko­lo­rów na klatkę, prosta ani­ma­cja
WebP
zapis strat­ny albo bez­strat­ny, alfa, ani­ma­cja
AVIF
zdję­cia, alfa, se­kwen­cje ob­ra­zów, spraw­dze­nie ob­słu­gi
SVG
opis wek­to­ro­wy, logo i sche­mat
BMP
bit­ma­pa, często duży plik wy­ni­ko­wy
TIFF
ska­no­wa­nie i druk, różne metody kom­pre­sji
PSD, XCF
źródła pro­jek­tu do edycji
RAW
dane apa­ra­tu wy­ma­ga­ją­ce wy­wo­ła­nia i eks­por­tu
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Grafika rastrowa i wektorowa: piksel, rozdzielczość, DPI, głębia bitowa, kompresjanastępna: Modele barw: RGB, RGBA, CMYK, HSL, HSV, hex; przeliczaniespis 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ą.