HTML I CSS · INF.03 · MODUŁ 03

Obrazy, figury i multimedia

Obraz mówi więcej niż akapit — ale tylko wtedy, gdy ma sensowny opis i właściwy rozmiar.

Wprowadzenie

Obraz wstawiamy do strony elementem <img>. To element pusty — nie ma znacznika zamykającego, a wszystkie informacje przenoszą jego atrybuty. Najważniejsze z nich to src, czyli adres pliku, oraz alt, czyli słowny opis obrazu.

Atrybuty width i height podajemy w pikselach, bez jednostki. Dzięki nim przeglądarka rezerwuje miejsce, zanim obraz się wczyta, więc tekst nie przeskakuje w trakcie ładowania. W CSS warto dodać max-width: 100% i height: auto, żeby obraz nie wychodził poza ekran telefonu.

Format pliku dobieramy do treści. JPG sprawdza się przy zdjęciach, PNG przy grafice z przezroczystością, SVG przy logo i ikonach, a WebP daje mniejszy plik przy dobrej jakości. Obraz z podpisem zamykamy w elemencie <figure>, a podpis umieszczamy w <figcaption>.

Przy różnych ekranach pomaga element <picture> z <source> i atrybutem srcset. Atrybut loading="lazy" opóźnia wczytanie obrazów znajdujących się poza pierwszym ekranem. Podobne znaczniki obsługują multimedia: <video>, <audio> i <source>.

Najważniejsza własność

Najważniejszym atrybutem obrazu jest alt. Dzięki niemu osoba, która nie widzi obrazu, nadal rozumie treść strony. Obraz czysto dekoracyjny dostaje pusty opis alt="", ale obraz informacyjny musi mieć krótki i konkretny opis.

Atrybuty width i height nie muszą odpowiadać dokładnemu rozmiarowi na ekranie. Podajemy je po to, aby przeglądarka znała proporcje obrazu i zarezerwowała dla niego miejsce. Dopiero CSS decyduje, jak duży obraz będzie faktycznie wyświetlany.

Gdy potrzebujesz innego pliku dla telefonu, a innego dla dużego ekranu, użyj elementu picture. Przeglądarka wybierze pierwszy pasujący wariant, a element img zostanie jako rozwiązanie awaryjne.

<picture>
  <source
    srcset="gory-1200.webp"
    media="(min-width: 900px)"
    type="image/webp">
  <img src="gory-640.jpg" alt="Panorama gór" width="640" height="360">
</picture>

Multimedia również mają swoje elementy. <video> i <audio> wymagają atrybutu controls, żeby użytkownik mógł odtwarzać, zatrzymywać i przewijać materiał. Element <source> podaje alternatywne pliki, a poster wyświetla planszę przed odtworzeniem filmu. Tekst między znacznikami jest rozwiązaniem awaryjnym dla przeglądarek, które nie obsługują danego formatu.

<video controls width="640" height="360" poster="plansza.jpg">
  <source src="film.mp4" type="video/mp4">
  <source src="film.webm" type="video/webm">
  Twoja przeglądarka nie obsługuje wideo.
</video>
<audio controls src="nagranie.mp3"></audio>

<iframe src="mapa.html" title="Mapa dojazdu"></iframe>

Element iframe osadza w stronie inną stronę, na przykład mapę lub film. Zawsze dodawaj mu atrybut title, który opisuje zawartość ramki osobom korzystającym z czytnika ekranu.

Sprawdź teraz, czy rozpoznajesz atrybuty obrazu i potrafisz znaleźć błędy w gotowym kodzie.

<img src="gory.jpg"
     
       — wybierz —
       alt
       title
       aria-label
     ="Panorama Tatr"
     width="640"
     
       — wybierz —
       size
       height
       img-height
     ="360"
     loading="
       — wybierz —
       auto
       defer
       lazy
     ">

Przykłady

Przykład 1 — figura z obrazem i podpisem

Wstawiamy obraz do elementu figure i dodajemy podpis w figcaption. Obraz ma opis, wymiary i zaokrąglone narożniki.

HTML

<figure>
  <img
    src="../assets/gory.svg"
    alt="Panorama gór z ośnieżonym szczytem i zieloną doliną"
    width="640" height="360">
  <figcaption>Poranek w górach — widok z południowego zbocza.</figcaption>
</figure>

CSS

figure { margin: 0; }
img { display: block; width: 100%; height: auto; border-radius: 12px; }
figcaption { margin-top: 10px; color: #526079; font-size: 14px; }

podgląd w przeglądarce

1. figure grupuje obraz i podpis w jedną całość.
2. alt opisuje, co widać, a nie jak nazywa się plik.
3. width i height rezerwują proporcje, a CSS dopasowuje obraz do szerokości kolumny.

Wynik: obraz i podpis tworzą jedną figurę, która jest zrozumiała także bez oglądania grafiki.

Przykład 2 — galeria trzech obrazów

Trzy figury układamy w trzech kolumnach. Każdy obraz ma własny opis i atrybut loading="lazy".

HTML

<h2>Góry, morze i las</h2>
<div class="galeria">
  <figure>
    <img
      src="../assets/gory.svg"
      alt="Górski pejzaż ze słońcem nad szczytami"
      width="640" height="360" loading="lazy">
    <figcaption>Góry — poranna panorama.</figcaption>
  </figure>
  <figure>
    <img
      src="../assets/morze.svg"
      alt="Morze o zachodzie słońca z żaglówką"
      width="640" height="360" loading="lazy">
    <figcaption>Morze — zachód słońca.</figcaption>
  </figure>
  <figure>
    <img
      src="../assets/las.svg"
      alt="Las sosnowy z jasnym słońcem nad drzewami"
      width="640" height="360" loading="lazy">
    <figcaption>Las — letnie przedpołudnie.</figcaption>
  </figure>
</div>

CSS

h2 { margin: 0 0 16px; font-size: 22px; }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
figure { margin: 0; }
img { display: block; width: 100%; height: auto; border-radius: 10px; }
figcaption { margin-top: 6px; color: #526079; font-size: 13px; }

podgląd w przeglądarce

1. Każda figura jest osobnym elementem z własnym obrazem i podpisem.
2. Grid dzieli dostępną szerokość na trzy równe kolumny.
3. width: 100% i height: auto skalują obraz bez zniekształceń.

Wynik: galeria zachowuje równe odstępy, a każdy obraz ma niezależny opis i podpis.

Przykład 3 — wideo z planszą i audio

Wideo ma atrybut controls, planszę poster i dwa warianty pliku. Pod spodem znajduje się odtwarzacz audio z tym samym atrybutem.

HTML

<h2>Film i dźwięk</h2>
<video controls width="640" height="360" poster="../assets/poster.svg">
  <source src="../assets/film.mp4" type="video/mp4">
  <source src="../assets/film.webm" type="video/webm">
  Twoja przeglądarka nie obsługuje wideo.
</video>
<audio controls src="../assets/nagranie.mp3">
  Twoja przeglądarka nie obsługuje audio.
</audio>

CSS

h2 { margin: 0 0 16px; font-size: 22px; }
video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #0f172a;
}
audio { display: block; width: 100%; margin-top: 18px; }

podgląd w przeglądarce

1. controls dodaje przyciski odtwarzania, pauzy i przewijania.
2. poster pokazuje obraz zastępczy, zanim film zostanie odtworzony.
3. Dwa elementy source dają przeglądarce wybór formatu, a tekst między znacznikami jest rozwiązaniem awaryjnym.

Wynik: użytkownik widzi planszę filmu i może od razu skorzystać z odtwarzaczy.

Spróbuj samodzielnie

1. Wstaw do strony obraz las.svg w elemencie figure. Dodaj podpis „Las sosnowy latem”, opis alt oraz wymiary 640 × 360.

   Pokaż rozwiązanie

   Obraz i podpis tworzą jedną figurę. Atrybuty width i height podajemy bez jednostek.

   <figure>
     <img
       src="las.svg"
       alt="Las sosnowy w letnim słońcu"
       width="640" height="360">
     <figcaption>Las sosnowy latem</figcaption>
   </figure>

   alt opisuje treść obrazu, a nie nazwę pliku. Podpis w figcaption jest widoczny na stronie i może rozwinąć opis.

2. Zbuduj galerię trzech obrazów: gory.svg, morze.svg i las.svg. Każdy obraz umieść w osobnej figurze z podpisem i atrybutem loading="lazy". W CSS ustaw trzy równe kolumny i odstęp 14 px.

   Pokaż rozwiązanie

   Najpierw tworzymy trzy figury w kontenerze, potem układamy je w gridzie.

   <div class="galeria">
     <figure>
       <img
         src="gory.svg"
         alt="Góry w porannym słońcu"
         width="640" height="360" loading="lazy">
       <figcaption>Góry</figcaption>
     </figure>
     <figure>
       <img
         src="morze.svg"
         alt="Morze o zachodzie słońca"
         width="640" height="360" loading="lazy">
       <figcaption>Morze</figcaption>
     </figure>
     <figure>
       <img
         src="las.svg"
         alt="Las sosnowy w letnie południe"
         width="640" height="360" loading="lazy">
       <figcaption>Las</figcaption>
     </figure>
   </div>

   .galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
   img { display: block; width: 100%; height: auto; }

   Grid dzieli szerokość na trzy kolumny, a width: 100% skaluje każdy obraz do szerokości swojej kolumny.

3. Uczeń napisał poniższy kod. Znajdź cztery błędy i zapisz poprawioną wersję.

   <img src="gory.jpg">
   <img
     src="morze.jpg"
     alt="Morze o zachodzie słońca"
     width="640" height="360"></img>
   <video src="film.mp4"></video>
   <iframe src="mapa.html"></iframe>

   Pokaż rozwiązanie

   Błędy: pierwszy obraz nie ma alt, drugi ma zbędny znacznik zamykający </img>, wideo nie ma controls, a ramka iframe nie ma title.

   <img
     src="gory.jpg"
     alt="Panorama gór"
     width="640" height="360">
   <img
     src="morze.jpg"
     alt="Morze o zachodzie słońca"
     width="640" height="360">
   <video controls width="640" height="360">
     <source src="film.mp4" type="video/mp4">
     Twoja przeglądarka nie obsługuje wideo.
   </video>
   <iframe src="mapa.html" title="Mapa dojazdu"></iframe>

   Element img jest pusty, więc nie ma znacznika zamykającego. Wideo potrzebuje przycisków sterowania, a ramka — opisu dla czytnika ekranu.

4. Przygotuj odtwarzacz wideo z planszą poster.svg, dwoma źródłami (MP4 i WebM) oraz tekstem awaryjnym. Pod nim dodaj audio z plikiem nagranie.mp3 i przyciskami sterowania.

   Pokaż rozwiązanie

   Oba odtwarzacze potrzebują atrybutu controls. Wideo dostaje planszę i dwa warianty pliku, a tekst między znacznikami jest informacją dla starszych przeglądarek.

   <video controls width="640" height="360" poster="poster.svg">
     <source src="film.mp4" type="video/mp4">
     <source src="film.webm" type="video/webm">
     Twoja przeglądarka nie obsługuje wideo.
   </video>
   
   <audio controls src="nagranie.mp3">
     Twoja przeglądarka nie obsługuje audio.
   </audio>

   poster pokazuje obraz przed odtworzeniem, a source pozwala przeglądarce wybrać obsługiwany format.

Obraz jest częścią treści, a nie ozdobą. Najpierw zadbaj o opis w alt, potem o wymiary i dopasowanie do ekranu. W multimediach zawsze dodawaj controls, a w ramkach iframe — atrybut title.