Obrazy w HTML

Wprowadzenie

Obrazy nadają stronie charakter i przyciągają uwagę. W HTML wstawiamy je najczęściej za pomocą znacznika <img>.

---

Teoria / Wyjaśnienia

• Podstawowy zapis obrazka:
  • znacznik: <img> (samozamykający),
  • atrybut src – ścieżka do pliku grafiki,
  • atrybut alt – opis obrazka (ważne dla dostępności i SEO).
• Popularne formaty:
  • .jpg / .jpeg – zdjęcia,
  • .png – grafika z przezroczystością,
  • .gif – krótkie animacje,
  • .webp – nowoczesny, często lżejszy format.
• Dobre praktyki:
  • zawsze ustawiaj alt,
  • używaj rozsądnych rozmiarów plików,
  • dopasuj szerokość do layoutu (np. przez CSS).

---

Praktyczne przykłady

Przykład

<!-- Prosty obrazek -->
<img src="/assets/kot.jpg" alt="Usmiechniety kot">

<!-- Obrazek z ustawiona szerokoscia -->
<img src="/assets/logo.png" alt="Logo firmy" width="200">

---

Ćwiczenie

1. Dodaj na stronie dwa obrazki o roznym znaczeniu (np. logo i zdjecie produktu).
2. Zadbaj o sensowne opisy alt.
3. Ustaw rozmiary tak, aby obrazki nie byly zbyt wielkie na ekranie.