0Pricing
HTML Academy · Lekcja

Element img: src, alt, width i height

Osadzać obrazy prawidłowo, używając wszystkich wymaganych atrybutów.

Element img: src, alt, width i height to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Element img

Element <img> osadza obraz na stronie:

<img src="photo.jpg" alt="A golden retriever playing fetch">
<!-- img is a void element — no closing tag needed -->
<!-- src: path to the image file -->
<!-- alt: text description for screen readers and broken images -->

Atrybut src

Atrybut src określa źródło obrazu:

<!-- Relative path -->
<img src="images/logo.png" alt="Company logo">

<!-- Root-relative path -->
<img src="/assets/banner.jpg" alt="Sale banner">

<!-- Absolute URL (external) -->
<img src="https://cdn.example.com/photo.jpg" alt="Mountain view">

<!-- Data URI (inline) -->
<img src="data:image/png;base64,iVBOR..." alt="Icon">

Atrybut alt

Atrybut alt zawiera tekst alternatywny obrazu:

  • Jest wyświetlany, gdy nie uda się wczytać obrazu
  • Jest odczytywany na głos przez czytniki ekranu
  • Jest indeksowany przez wyszukiwarki
  • Jest wymagany z punktu widzenia dostępności (WCAG)

Pisanie dobrego tekstu alt

Jak pisać skuteczny tekst alternatywny:

<!-- Informative image: describe the content -->
<img src="chart.png" alt="Bar chart showing 30% revenue growth Q1-Q4 2024">

<!-- Decorative image: empty alt -->
<img src="divider.png" alt="">
<!-- Empty alt tells screen readers to skip this image -->

<!-- Functional image (button/link): describe the action -->
<a href="/">
  <img src="logo.png" alt="Go to homepage">
</a>

Atrybuty width i height

Zawsze określaj atrybuty width i height dla obrazów:

<img src="photo.jpg" alt="Landscape" width="800" height="600">
<!-- Values are in pixels (no units needed) -->
<!-- Why? The browser can reserve space before the image loads
     This prevents layout shift (CLS) — a Core Web Vital metric -->

Proporcje obrazu a CSS

Ustawienie szerokości i wysokości w HTML umożliwia CSS obliczenie proporcji obrazu:

<!-- HTML sets intrinsic dimensions -->
<img src="photo.jpg" alt="Photo" width="1600" height="900">

<!-- CSS can make it responsive while preserving ratio -->
<!--
img {
  width: 100%;
  height: auto;  /* auto preserves the aspect ratio -->
}
-->

Formaty obrazów w sieci

Popularne formaty obrazów i ich zastosowania:

  • JPEG/JPG — zdjęcia i złożone obrazy z wieloma kolorami
  • PNG — obrazy wymagające przezroczystości
  • WebP — nowoczesny format: mniejszy niż JPEG/PNG, obsługuje przezroczystość
  • AVIF — format nowej generacji: zapewnia jeszcze lepszą kompresję niż WebP
  • SVG — ikony i ilustracje (grafika wektorowa, możliwość skalowania bez ograniczeń)
  • GIF — proste animacje (w większości zastąpione przez wideo)

Atrybut loading

Określ, kiedy obrazy mają być wczytywane, za pomocą atrybutu loading:

<!-- Lazy load: only load when near viewport -->
<img src="photo.jpg" alt="" loading="lazy" width="800" height="600">

<!-- Eager load (default): load immediately -->
<img src="hero.jpg" alt="" loading="eager" width="1920" height="1080">

<!-- Always eager-load above-the-fold images -->
<!-- Lazy-load everything below the fold -->

Atrybut decoding

Atrybut decoding steruje sposobem dekodowania obrazu:

<img src="large.jpg" alt="" decoding="async" width="800" height="600">
<!-- async: decode in parallel with rendering (good for most images) -->
<!-- sync: decode before rendering (for critical above-fold images) -->
<!-- auto: browser decides (default) -->

Atrybut fetchpriority

Atrybut fetchpriority podpowiada priorytet wczytywania obrazu:

<!-- Hero image: fetch with high priority -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1920" height="600">

<!-- Below-fold images: low priority -->
<img src="gallery-item.jpg" alt="" fetchpriority="low"
     loading="lazy" width="400" height="300">

Kompletny przykład img

W pełni dostępny obraz zoptymalizowany pod kątem wydajności:

<img
  src="/images/team-photo.jpg"
  alt="The Coddy team gathered at a conference table in 2024"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

Szybkie sprawdzenie

Dlaczego w elementach img należy zawsze uwzględniać atrybuty width i height?

Podsumowanie: element img

Najważniejsze informacje o osadzaniu obrazów:

  • src — URL obrazu (względny lub absolutny)
  • alt — wymagany opis; dla obrazów dekoracyjnych powinien być pusty
  • width i height — zawsze ustawiaj, aby zapobiec przesuwaniu układu
  • loading="lazy" w przypadku obrazów poniżej obszaru widocznego po załadowaniu strony
  • Wybieraj właściwy format: WebP/AVIF dla zdjęć, SVG dla ikon

Często zadawane pytania

Czy lekcja „Element img: src, alt, width i height” jest bezpłatna?

Tak — pełny tekst „Element img: src, alt, width i height” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Element img: src, alt, width i height”?

Osadzać obrazy prawidłowo, używając wszystkich wymaganych atrybutów. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Element img: src, alt, width i height”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Element img: src, alt, width i height
  2. Responsywne obrazy z srcset i sizes
  3. Element picture do art direction
  4. figure i figcaption
← Powrót do HTML Academy