ZAWODNIK

Obrazy i multimedia: img, figure, audio, video, iframe, svg, canvas

INF.03 · teoria
autor: redakcja · 07.09.2026 · aktualizacja: 08.09.2026
Jak wstawić na stronę obraz z tekstem alternatywnym, podpis pod zdjęciem, dźwięk i film z przyciskami sterowania, ramkę iframe oraz grafikę svg i canvas. Lekcja 3.6 kursu INF.03.

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

Przejrzyj pytania: htmlĆwicz dział: html
Ele­ment mul­ti­me­dial­ny to obraz, dźwięk albo film osa­dzo­ny w stro­nie znacz­ni­kiem, który wska­zu­je plik atry­bu­tem src. Na eg­za­mi­nie pi­sem­nym wra­ca­ją trzy ro­dzi­ny pytań: który zapis wstawi obraz z tek­stem al­ter­na­tyw­nym, które atry­bu­ty znacz­ni­ka video dają przy­ci­ski ste­ro­wa­nia i od­twa­rza­nie w kółko oraz do czego służy alt. W za­da­niu prak­tycz­nym każdy obraz z ar­ku­sza musi mieć tekst al­ter­na­tyw­ny, a zdję­cie zwykle trzeba wcze­śniej prze­ska­lo­wać do za­da­nej sze­ro­ko­ści, co robi się w edy­to­rze gra­fi­ki, nie w HTML.

Znacz­nik img

<img> (od image, OBRAZ) to znacz­nik wsta­wia­ją­cy obraz w tym miej­scu strony, w którym stoi. Nie ma znacz­ni­ka za­my­ka­ją­ce­go, bo nie obej­mu­je żadnej treści: wszyst­ko niesie w atry­bu­tach.
<img src="obrazy/mysz.jpg" alt="Mysz bezprzewodowa w kolorze czarnym">
src (od source, ŹRÓDŁO) podaje ścież­kę do pliku. Zapis wyżej to ścież­ka względ­na: prze­glą­dar­ka szuka pliku mysz.jpg w pod­ka­ta­lo­gu obrazy/, le­żą­cym obok index.html. Dwie kropki cofają o ka­ta­log wyżej (../obrazy/mysz.jpg), uko­śnik na po­cząt­ku pro­wa­dzi do ka­ta­lo­gu głów­ne­go wi­try­ny (/obrazy/mysz.jpg). Ścież­ka z dysku, taka jak C:/strona/obrazy/mysz.jpg, za­dzia­ła tylko na jednym kom­pu­te­rze i na eg­za­mi­nie jest błędem.
Pu­łap­ka: obraz wska­zu­je się atry­bu­tem src, nie href. href należy do od­no­śni­ka <a> i do <link>, więc zapis <img href="kotek.jpg"> nie pokaże ni­cze­go. To naj­częst­sza błędna od­po­wiedź w py­ta­niach o wsta­wia­nie obrazu.

alt, czyli tekst al­ter­na­tyw­ny

alt (od alternative text, TEKST ALTERNATYWNY) to opis obrazu sło­wa­mi. Trafia do trzech od­bior­ców naraz. Czyt­nik ekranu, z któ­re­go ko­rzy­sta osoba nie­wi­do­ma, od­czy­ta go za­miast obrazu. Prze­glą­dar­ka wy­świe­tli go w miej­scu obrazu, gdy pliku nie ma albo ścież­ka jest zła. Wy­szu­ki­war­ka użyje go do opi­sa­nia zdję­cia, bo samego obrazu nie umie prze­czy­tać.
Opis ma mówić, co widać: alt="Monitor 27 cali na czarnej podstawie", a nie alt="obrazek" ani alt="zdjecie1.jpg". Gdy obraz jest wy­łącz­nie ozdobą (linia od­dzie­la­ją­ca, deseń w ba­ne­rze), wpi­su­je się pusty tekst al­ter­na­tyw­ny alt="". To nie to samo, co brak atry­bu­tu: pusty alt mówi czyt­ni­ko­wi „pomiń", brak alt każe mu czytać nazwę pliku.
Pu­łap­ka: title nie za­stę­pu­je alt. title daje tylko dymek po na­je­cha­niu myszą, czyt­ni­ki ekranu zwykle go po­mi­ja­ją, a wa­li­da­tor i tak zgłosi brak tekstu al­ter­na­tyw­ne­go.

Wy­mia­ry, waga i format pliku

width (SZEROKOŚĆ) i height (WYSOKOŚĆ) podają roz­miar obrazu w pik­se­lach, samą liczbą, bez px:
<img src="obrazy/monitor27.jpg" alt="Monitor 27 cali" width="300" height="200">
Po­da­nie obu wy­mia­rów re­zer­wu­je miej­sce na stro­nie, więc tekst nie skacze pod­czas wczy­ty­wa­nia. Jeśli pro­por­cje nie zga­dza­ją się z pro­por­cja­mi pliku, obraz wyj­dzie roz­cią­gnię­ty. Po po­da­niu tylko jed­ne­go wy­mia­ru prze­glą­dar­ka wy­li­czy drugi sama i pro­por­cje zo­sta­ną za­cho­wa­ne.
Zmniej­sze­nie obrazu atry­bu­tem width nie zmniej­sza pliku: zdję­cie o sze­ro­ko­ści 2000 pik­se­li po­ka­za­ne jako 300 pik­se­li nadal waży tyle samo i tyle samo trzeba pobrać. Żeby strona wczy­ty­wa­ła się szyb­ciej, plik ska­lu­je się w edy­to­rze gra­fi­ki, na przy­kład w pro­gra­mie GIMP (Obraz, Skaluj obraz). To osobne py­ta­nie w banku i osobny punkt w za­da­niu prak­tycz­nym.
Dwa atry­bu­ty do­dat­ko­we: title po­ka­zu­je dymek z tek­stem po na­je­cha­niu kur­so­rem, a loading="lazy" (LENIWE WCZYTYWANIE) każe pobrać obraz do­pie­ro wtedy, gdy użyt­kow­nik prze­wi­nie stronę do jego miej­sca.
For­ma­ty, które trzeba roz­po­znać:
  • ›
    JPG (JPEG): zdję­cia, kom­pre­sja strat­na, bez prze­zro­czy­sto­ści.
  • ›
    PNG: gra­fi­ka z ostry­mi kra­wę­dzia­mi, kom­pre­sja bez­strat­na, ob­słu­gu­je prze­zro­czy­stość.
  • ›
    GIF: 256 ko­lo­rów i prosta ani­ma­cja.
  • ›
    SVG: gra­fi­ka wek­to­ro­wa, po­więk­sza się bez utraty ja­ko­ści, dobra na logo i ikony.
  • ›
    WEBP: nowszy format do zdjęć i gra­fi­ki, mniej­szy plik przy tej samej ja­ko­ści.
Kom­pre­sja, głębia bitowa i modele barw są opi­sa­ne w dziale gra­fi­ka.

figure, pic­tu­re i mapa obrazu

<figure> (RYSUNEK) to obraz razem z pod­pi­sem, trak­to­wa­ny jako jedna całość. Podpis za­pi­su­je się w <figcaption> (PODPIS RYSUNKU), na po­cząt­ku albo na końcu bloku:
<figure> <img src="obrazy/monitor27.jpg" alt="Monitor 27 cali na czarnej podstawie" width="300"> <figcaption>Monitor 27 cali, matryca IPS</figcaption> </figure>
Podpis widzi każdy, tekst al­ter­na­tyw­ny czyta czyt­nik ekranu, więc oba są po­trzeb­ne i nie po­wta­rza­ją się słowo w słowo.
<picture> (OBRAZ) po­zwa­la podać kilka plików tego samego zdję­cia i zo­sta­wić wybór prze­glą­dar­ce: w środku stoi kilka znacz­ni­ków <source> z wa­run­kiem sze­ro­ko­ści ekranu albo typem pliku, a na końcu zwykły <img> jako wersja awa­ryj­na. Tak daje się lżej­sze zdję­cie na te­le­fon, a więk­sze na mo­ni­tor.
Mapa obrazu dzieli jeden obraz na kli­kal­ne ob­sza­ry. Obraz do­sta­je atry­but usemap="#nazwa", a <map name="nazwa"> za­wie­ra znacz­ni­ki <area> z kształ­tem, współ­rzęd­ny­mi i ad­re­sem do­ce­lo­wym. Nowe strony robią to rzadko, ale usemap bywa w banku pytań od­po­wie­dzią błędną, pod­sta­wia­ną w miej­sce alt.

Dźwięk i film: audio i video

<audio> (DŹWIĘK) i <video> (WIDEO) to znacz­ni­ki osa­dza­ją­ce na stro­nie plik dźwię­ko­wy i film. Mają znacz­nik za­my­ka­ją­cy, a tekst wpi­sa­ny między znacz­ni­ka­mi pokaże się tylko w prze­glą­dar­ce, która ich nie ob­słu­gu­je. Plik wska­zu­je się atry­bu­tem src albo za­gnież­dżo­ny­mi znacz­ni­ka­mi <source> z atry­bu­tem type, gdy ten sam ma­te­riał po­da­jesz w kilku for­ma­tach.
<video controls loop poster="obrazy/plakat.jpg" width="480"> <source src="filmy/prezentacja.mp4" type="video/mp4"> <source src="filmy/prezentacja.webm" type="video/webm"> Twoja przeglądarka nie odtworzy tego filmu. </video>
Atry­but
Znaczy
Kiedy
controls
po­ka­zu­je przy­ci­ski ste­ro­wa­nia
prawie zawsze, bo bez nich nie da się uru­cho­mić ma­te­ria­łu
autoplay
uru­cha­mia od razu po wczy­ta­niu
tylko razem z muted
loop
od­twa­rza w kółko
krótka pętla, na przy­kład pre­zen­ta­cja pro­duk­tu
muted
wy­ci­sza dźwięk
tło strony oraz wa­ru­nek dzia­ła­nia autoplay
poster
obraz wi­docz­ny przed od­two­rze­niem
tylko video
preload
ile pobrać z góry: none, metadata, auto
oszczę­dza­nie trans­fe­ru
width, height
roz­miar od­twa­rza­cza w pik­se­lach
tylko video
For­ma­ty dźwię­ku: MP3 (strat­ny, od­twa­rza go wszyst­ko), OGG (strat­ny, format otwar­ty), WAV (bez­strat­ny, duży plik). For­ma­ty wideo: MP4 z ko­de­kiem H.264 (bez­piecz­ny wybór), WEBM i OGV (for­ma­ty otwar­te).
Pu­łap­ka: samo autoplay nie za­dzia­ła, bo prze­glą­dar­ki blo­ku­ją au­to­ma­tycz­ne od­twa­rza­nie z dźwię­kiem. Film rusza sam do­pie­ro z muted. W py­ta­niu o przy­ci­ski ste­ro­wa­nia i od­twa­rza­nie w kółko po­praw­ną parą jest controls i loop.

iframe: cudza strona w ramce

<iframe> (od inline frame, RAMKA WEWNĘTRZNA) to okno, w którym wy­świe­tla się inna strona: film z ser­wi­su YouTube, mapa do­jaz­du, ka­len­darz.
<iframe src="https://www.youtube.com/embed/abc123" width="560" height="315" title="Prezentacja klawiatury" allowfullscreen></iframe>
src to adres osa­dza­nej strony, width i height to roz­miar ramki w pik­se­lach, title opi­su­je jej za­war­tość dla czyt­ni­ka ekranu, a allowfullscreen po­zwa­la roz­wi­nąć ma­te­riał na cały ekran. Znacz­nik ma część za­my­ka­ją­cą, nawet gdy nic między znacz­ni­ka­mi nie stoi. W ramce działa cudzy kod, więc osadza się w niej wy­łącz­nie ser­wi­sy, którym ufasz. Stare ramki <frameset> i <frame>, dzie­lą­ce okno na kilka osob­nych do­ku­men­tów, są prze­sta­rza­łe: w HTML5 układ strony robi się znacz­ni­ka­mi sekcji i sty­la­mi CSS.

svg i canvas

<svg> (od Scalable Vector Graphics, SKALOWALNA GRAFIKA WEKTOROWA) to gra­fi­ka za­pi­sa­na wprost w kodzie strony, jako znacz­ni­ki kształ­tów: <rect> (pro­sto­kąt), <circle> (koło), <line> (linia), <path> (ścież­ka).
<svg width="120" height="60"> <rect x="0" y="0" width="120" height="60" fill="#eeeeee" /> <circle cx="30" cy="30" r="20" fill="#cc6633" /> </svg>
<canvas> (PŁÓTNO) to pro­sto­kąt­ny obszar do ry­so­wa­nia, sam z siebie pusty. Obraz po­wsta­je do­pie­ro wtedy, gdy skrypt JavaScript po­bie­rze kon­tekst ry­so­wa­nia i wyda po­le­ce­nia.
<canvas id="wykres" width="200" height="100"></canvas>
Bez skryp­tu strona pokaże w tym miej­scu puste pole. Róż­ni­ca, o którą pytają: kształ­ty SVG są ele­men­ta­mi do­ku­men­tu, więc da się je sty­lo­wać w CSS, klik­nąć i zmie­nić skryp­tem, a canvas za­pi­su­je wy­łącz­nie pik­se­le, więc klik­nię­cie trafia w całe płótno, nie w na­ry­so­wa­ną figurę.

Zdję­cie i film na stro­nie sklepu

Strona index.html ma już baner, menu, blok boczny i blok główny z listą pro­duk­tów oraz tabelą cen (lekcja o li­stach, ta­be­lach i od­no­śni­kach). Do bloku głów­ne­go do­cho­dzi karta pro­duk­tu: zdję­cie z pod­pi­sem i film z pre­zen­ta­cją.
<section> <h3>Monitor 27</h3> <figure> <img src="obrazy/monitor27.jpg" alt="Monitor 27 cali na czarnej podstawie" width="320"> <figcaption>Monitor 27 cali, 2560 na 1440 pikseli</figcaption> </figure> <video controls width="320" poster="obrazy/monitor27.jpg"> <source src="filmy/monitor27.mp4" type="video/mp4"> Film z prezentacją monitora. </video> </section>
Pliki leżą w pod­ka­ta­lo­gach obrazy/ i filmy/, obok index.html. Zdję­cie zo­sta­ło wcze­śniej prze­ska­lo­wa­ne w pro­gra­mie GIMP do sze­ro­ko­ści 320 pik­se­li, więc width po­wta­rza tylko rze­czy­wi­sty roz­miar pliku.

Na eg­za­mi­nie

W części pi­sem­nej py­ta­nia z tej lekcji są krót­kie i po­wta­rzal­ne:
  • 1.
    Który zapis wsta­wia obraz z tek­stem al­ter­na­tyw­nym. Od­po­wie­dzi mie­sza­ją src z href oraz alt z title. Po­praw­ny jest zawsze src razem z alt.
  • 2.
    Do czego służy alt. Od­po­wiedź: tekst po­ka­zy­wa­ny za­miast gra­fi­ki i czy­ta­ny przez pro­gra­my dla osób nie­wi­do­mych. Nie jest to podpis pod ob­ra­zem ani ścież­ka do pliku.
  • 3.
    Które atry­bu­ty znacz­ni­ka video dają przy­ci­ski ste­ro­wa­nia i od­twa­rza­nie w kółko. Od­po­wiedź: controls i loop. Wa­rian­ty z autoplay, muted albo poster są pu­łap­ką, bo muted wy­ci­sza, a poster daje tylko obraz przed od­two­rze­niem.
  • 4.
    Czym zmniej­szyć wagę dużej gra­fi­ki. Od­po­wiedź wska­zu­je pro­gram gra­ficz­ny, a nie atry­bu­ty HTML i nie wła­ści­wo­ści CSS.
  • 5.
    Który atry­but łączy obraz z mapą ob­sza­rów. Od­po­wiedź: usemap. W py­ta­niu o do­stęp­ność ten sam usemap stoi jako od­po­wiedź błędna, obok po­praw­ne­go alt.
W za­da­niu prak­tycz­nym arkusz podaje nazwy plików gra­ficz­nych, ich po­ło­że­nie i treść tek­stów al­ter­na­tyw­nych. Punkty prze­pa­da­ją naj­czę­ściej na trzech rze­czach: brak alt przy któ­rymś ob­ra­zie, obraz wsta­wio­ny ścież­ką z dysku za­miast względ­nej oraz gra­fi­ka o wy­mia­rach innych niż zadane. Ska­lo­wa­nie robi się w pro­gra­mie GIMP przed wsta­wie­niem obrazu na stronę, bo oce­nia­ny jest za­pi­sa­ny plik, a nie sposób jego wy­świe­tle­nia.

Ściąga

Zapis
Znaczy
<img src="..." alt="...">
obraz z tek­stem al­ter­na­tyw­nym, bez znacz­ni­ka za­my­ka­ją­ce­go
src
ścież­ka do pliku, w ob­ra­zie nigdy href
alt
opis dla czyt­ni­ka ekranu i tekst za­miast bra­ku­ją­ce­go obrazu
alt=""
obraz ozdob­ny, czyt­nik ma go po­mi­nąć
width, height
roz­miar w pik­se­lach, samą liczbą, bez px
title
dymek po na­je­cha­niu kur­so­rem
loading="lazy"
po­bierz obraz do­pie­ro przy prze­wi­ja­niu
<figure>, <figcaption>
obraz i wi­docz­ny podpis jako całość
<picture>, <source>
inny plik dla innej sze­ro­ko­ści ekranu
usemap, <map>, <area>
kli­kal­ne ob­sza­ry na ob­ra­zie
<audio>, <video>
osa­dzo­ny dźwięk i film
controls, loop, muted, poster
przy­ci­ski, pętla, wy­ci­sze­nie, obraz przed star­tem
<iframe src="..." title="...">
inna strona osa­dzo­na w ramce
<svg>
gra­fi­ka wek­to­ro­wa jako znacz­ni­ki kształ­tów
<canvas>
płótno ry­so­wa­ne skryp­tem JavaScript, bez skryp­tu puste
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Listy, tabele i odnośniki w HTMLnastępna: Formularze HTML: pola, etykiety, walidacja HTML5, GET i POSTspis działu: HTML

[ INF.03: INNE ARTYKUŁY ]

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