Wstawianie grafiki w HTML

Grafika jest kluczowym elementem stron internetowych – zwiększa atrakcyjność wizualną, ułatwia przekazywanie treści i poprawia UX. HTML oferuje kilka sposobów wstawiania obrazów w dokument.

1. Podstawowy znacznik <img>

  • Obrazy wstawiamy za pomocą znacznika:

1.1. Atrybuty podstawowe:

  • src – ścieżka do pliku graficznego (lokalna lub URL).
  • alt – tekst alternatywny: Wyświetlany, gdy obraz się nie załaduje. Ważny dla dostępności (czytniki ekranu). Pomaga w SEO.
  • title – tekst wyświetlany po najechaniu kursorem (opcjonalny).

Przykład:

2. Wymiary obrazów

  • Możemy ustawić wymiary w HTML lub CSS.
  • Zalecane jest korzystanie z CSS, aby oddzielić strukturę od stylów.

W HTML:

W CSS:

Warto stosować height: auto;, aby zachować proporcje obrazu.

3. Formatowanie obrazów

Najczęściej używane formaty:

  • JPEG (.jpg, .jpeg) – zdjęcia, wiele kolorów, stratna kompresja.
  • PNG (.png) – grafika z przezroczystością, bezstratna kompresja.
  • GIF (.gif) – animacje, prosta grafika.
  • SVG (.svg) – grafika wektorowa, skalowalna, idealna dla ikon i logotypów.
  • WebP (.webp) – nowoczesny format, łączy wysoką jakość i mały rozmiar.

4. Obrazki responsywne

4.1. Skalowanie obrazów w CSS

  • Obraz dopasuje się do szerokości kontenera.

4.2. Atrybut srcset i sizes

Pozwala wczytywać różne obrazy w zależności od rozdzielczości ekranu.

Dzięki temu użytkownik nie pobiera zbyt dużych obrazów na telefonie.

5. Znacznik <picture>

Pozwala ustawić różne obrazy w zależności od warunków (np. szerokości ekranu, formatu przeglądarki).

  • <source> – definiuje alternatywne źródła obrazu.
  • <img> – jest zawsze wymagane jako fallback.

6. Obrazy jako tło (background-image)

Czasami grafikę wstawia się w CSS jako tło elementu, a nie treść.

  • Stosowane głównie do elementów dekoracyjnych.
  • Nie zastępuje <img>, bo nie posiada alt.

7. Obrazy a dostępność

  • Zawsze dodawaj alt do obrazów.
  • Jeśli obraz pełni tylko funkcję dekoracyjną:
  • Nie używaj obrazów do przedstawiania tekstu – lepiej korzystać z HTML + CSS.

8. Optymalizacja grafiki

  • Kompresuj obrazy (np. TinyPNG, Squoosh).
  • Używaj nowoczesnych formatów (WebP, AVIF).
  • Lazy loading (leniwe ładowanie obrazów) – ładuje obraz dopiero, gdy użytkownik do niego przewinie:

9. Przykład praktyczny – nowoczesne podejście

Dzięki temu:

  • Obsługiwane są nowoczesne formaty (AVIF, WebP).
  • Jest alt → dostępność.
  • Jest loading="lazy" → optymalizacja szybkości strony.
  • Są podane width i height → przeglądarka może rezerwować miejsce i unikać przesunięć treści (Cumulative Layout Shift).
Wróć do spisu lekcji Rozwiąż quiz