Obrazki <img> – jak dodawać zdjęcia?

Obrazki <img> – jak dodawać zdjęcia?

Obrazy to ważny element każdej strony internetowej. Uatrakcyjniają wygląd strony i pomagają przekazywać informacje w sposób wizualny. W HTML do dodawania obrazków używa się znacznika <img>.

1. Podstawowa składnia znacznika <img>

Element <img> jest elementem pustym, co oznacza, że nie ma tagu zamykającego. Zawiera jednak atrybuty, które definiują, skąd pobrać obrazek oraz jak go wyświetlić.

Podstawowa struktura wygląda następująco:

<img src="adres-do-obrazka.jpg" alt="Opis obrazka">

• src (source) – określa ścieżkę do pliku graficznego (może to być adres lokalny lub URL).
• alt (alternative text) – alternatywny tekst, który wyświetli się, jeśli obrazek nie zostanie załadowany, oraz ułatwi korzystanie ze strony osobom korzystającym z czytników ekranu.

2. Przykład dodania obrazka z lokalnego pliku

<img src="obrazki/logo.png" alt="Logo mojej firmy">

W tym przykładzie:

• Plik graficzny logo.png znajduje się w folderze obrazki.
• Jeśli obrazek nie zostanie załadowany, użytkownik zobaczy tekst alternatywny: „Logo mojej firmy”.

3. Przykład dodania obrazka z zewnętrznego adresu URL

<img src="https://www.example.com/images/banner.jpg" alt="Baner promocyjny">

W tym przypadku obrazek jest pobierany z innej strony internetowej.

4. Ustawianie szerokości i wysokości obrazka

Atrybuty width i height pozwalają na kontrolowanie rozmiaru obrazka. Przykład:

<img src="obrazki/logo.png" alt="Logo mojej firmy" width="200" height="100">

Dzięki tym atrybutom obrazek zostanie wyświetlony o szerokości 200 pikseli i wysokości 100 pikseli, niezależnie od rzeczywistego rozmiaru pliku graficznego.

5. Najczęstsze błędy przy dodawaniu obrazków

• Nieprawidłowa ścieżka do pliku: Jeśli podana w src ścieżka jest błędna, obrazek się nie wyświetli.
• Brak atrybutu alt: Zawsze dodawaj tekst alternatywny – poprawia to dostępność strony.
• Zbyt duże pliki obrazów: Duże obrazki mogą spowolnić ładowanie strony. Warto optymalizować pliki przed dodaniem do serwisu.

6. Co to jest tekst alternatywny (alt)?

Atrybut alt ma ogromne znaczenie, zwłaszcza dla osób niewidomych korzystających z czytników ekranu. Jest też wyświetlany, gdy obrazek nie może zostać załadowany (np. błąd ścieżki lub brak połączenia z internetem).

7. Obrazki dekoracyjne a SEO

Jeśli obrazek ma jedynie funkcję dekoracyjną i nie niesie wartościowej treści, można pozostawić atrybut alt pusty, np.:

<img src="tlo.jpg" alt="">

Wtedy czytniki ekranu pominą taki element.

Podsumowanie

Tag <img> pozwala na dodawanie grafik na stronie internetowej. Aby obrazki były funkcjonalne i przyjazne użytkownikowi, warto dbać o:

• Poprawne ścieżki do plików.
• Dodanie opisu alternatywnego (alt).
• Odpowiednie skalowanie obrazków za pomocą width i height lub CSS.

Testuj swój kod w JSFiddle

Aby zobaczyć, jak działa znacznik <img>, możesz przetestować poniższy kod w JSFiddle. Wklej go do sekcji HTML i zobacz efekt.

<h2>Przykładowy obrazek z tekstem alternatywnym</h2>

<img src="https://itek.pl/wp-content/uploads/2024/12/logo_w.webp" alt="Przykładowy obrazek" width="300" height="200">

<p>Powyżej znajduje się obrazek z przykładowym tekstem alternatywnym. Jeśli obrazek się nie załaduje, pojawi się tekst z atrybutu ALT.</p>