Dodawanie obrazków do strony internetowej jest kluczowe dla uatrakcyjnienia jej wyglądu i przekazania treści w bardziej wizualny sposób. Jeśli zastanawiasz się, jak wstawić zdjęcie HTML, ten przewodnik jest dla Ciebie. Przeprowadzimy Cię krok po kroku przez proces wstawiania obrazka HTML, omówimy znacznik <img>, atrybut src, oraz inne ważne elementy, takie jak atrybut alt i optymalizacja obrazów. Dowiesz się także, jak poprawne dodawanie obrazów może pozytywnie wpłynąć na SEO oraz dostępność Twojej strony internetowej. # img html

Wprowadzenie do znaczników obrazów w HTML

W HTML do wstawienia zdjęcia używamy elementu <img>. Jest to znacznik samozamyklający, który pozwala na wyświetlenie obrazka w dokumencie HTML bez potrzeby zamykania go parą znaczników (</img> nie istnieje). Wstawianie obrazka HTML jest więc proste, ale wymaga zrozumienia kilku kluczowych atrybutów.

Podstawowe użycie tagu <img>

Atrybut src i jego wartość

Atrybut src (skrót od ang. source) wskazuje na lokalizację pliku obrazka, który chcesz umieścić na stronie. Może to być ścieżka względna lub absolutna, a nawet adres URL zewnętrznego zasobu.

Czym jest atrybut img src w HTML i jak go używać?

Przykład kodu:

<img src="folder/img/obrazek.jpg" alt="Opis obrazka">

W powyższym kodzie:

• src – określa ścieżkę dostępu do pliku graficznego.
• alt – zawiera opis obrazka, ważny dla dostępności (np. czytników ekranowych) oraz SEO.

Opis obrazka za pomocą atrybutu alt

Atrybut alt dostarcza tekst alternatywny dla obrazka. Jest to kluczowe w przypadku problemów z ładowaniem obrazów oraz dla osób korzystających z czytników ekranu. Dodatkowo tekst w atrybucie alt pomaga wyszukiwarkom lepiej zrozumieć zawartość grafiki, co pozytywnie wpływa na pozycjonowanie strony (SEO).

Dodatkowy opis obrazka z atrybutem title

Oprócz atrybutu alt, obrazkom można nadać dodatkowy opis za pomocą atrybutu title. Tekst umieszczony w title pojawia się, gdy użytkownik najedzie kursorem na obrazek. Warto pamiętać, że tekst w tym atrybucie powinien stanowić dodatkową informację, która uzupełnia opis z atrybutu alt.

Przykład kodu:

<img src="folder/img/obrazek.jpg" alt="Kot bawiący się piłką" title="Zdjęcie wykonane podczas wakacji 2024">

• alt – dostarcza kluczowy opis obrazka (ważny dla dostępności i SEO).
• title – uzupełnia informacje o obrazku, widoczny po najechaniu kursorem.

Ustawianie rozmiarów obrazka

Atrybuty width i height

Aby kontrolować rozmiar obrazka, używamy atrybutów width i height. Możemy je określić w pikselach lub procentach.

Przykład kodu:

<img src="folder/img/obrazek.jpg" alt="Opis obrazka" width="600" height="400">

Używanie width i height do skalowania

Kiedy chcemy zachować proporcje obrazka, wystarczy podać jeden wymiar. Przeglądarka automatycznie dostosuje drugi.

Przykład kodu:

<img src="folder/img/obrazek.jpg" alt="Opis obrazka" width="600">

Tutaj img width jest ustawiony na 600 pikseli, a wysokość zostanie dostosowana proporcjonalnie.

Wskazówka: Zawsze ustawiaj atrybuty width i height w kodzie HTML, nawet jeśli zmieniasz rozmiar obrazka za pomocą CSS. Pomaga to przeglądarkom rezerwować odpowiednią przestrzeń podczas ładowania strony, co pozytywnie wpływa na szybkość i stabilność layoutu (zapobiega efektowi przesuwania treści – tzw. CLS).

Zaawansowane techniki

Tag <picture> w HTML5

HTML5 wprowadził tag <picture>, który pozwala na wyświetlanie różnych obrazków w zależności od warunków, takich jak rozdzielczość ekranu czy obsługa konkretnych formatów graficznych przez przeglądarkę. Dzięki temu możemy zapewnić użytkownikom najlepszą jakość obrazu przy minimalnym czasie ładowania.

Przykład:

<picture>
<source srcset="obrazek.webp" type="image/webp">
<source srcset="obrazek.jpg" type="image/jpeg">
<img src="obrazek.jpg" alt="Opis obrazka">
</picture>

Semantyczne grupowanie z tagiem <figure>

Tag <figure> służy do grupowania obrazka z podpisem za pomocą <figcaption>. Dzięki temu zdjęcie wraz z opisem są lepiej rozpoznawane przez wyszukiwarki oraz poprawiają dostępność i strukturę treści na stronie.

Przykład:

<figure>
<img src="folder/img/obrazek.jpg" alt="Opis obrazka">
<figcaption>Podpis obrazka</figcaption>
</figure>

Optymalizacja obrazów dla lepszej wydajności

Kompresja obrazów

Kompresja obrazów jest kluczowa dla zmniejszenia rozmiaru pliku i przyspieszenia ładowania obrazów. Można używać narzędzi online, takich jak TinyPNG, Compressor.io czy Squoosh, lub programów graficznych (np. Photoshop, GIMP). Optymalną praktyką jest zmniejszenie rozmiaru plików obrazów o co najmniej 50-70% przy minimalnej utracie jakości wizualnej.

Nowoczesne formaty, takie jak WebP

WebP to nowoczesny format oferujący lepszą kompresję bez utraty jakości, który może znacząco zmniejszyć rozmiar pliku obrazka. Coraz większą popularność zyskuje również format AVIF, zapewniający jeszcze lepszą jakość obrazu przy jeszcze mniejszych rozmiarach plików niż WebP. AVIF świetnie sprawdza się na stronach wymagających szybkiego ładowania i wysokiej jakości grafik. Aby dowiedzieć się więcej o tym formacie, odwiedź dokumentację WebP (tutaj) i AVIF (tutaj).

Przykład użycia formatu AVIF w tagu <picture>:

<picture>
  <source srcset="folder/img/obrazek.avif" type="image/avif">
  <source srcset="folder/img/obrazek.webp" type="image/webp">
  <img src="folder/img/obrazek.jpg" alt="Opis obrazka">
</picture>

Lazy loading obrazów

Lazy loading to technika, która opóźnia ładowanie obrazów niewidocznych dla użytkownika, co poprawia czas ładowania strony. Dzięki temu użytkownicy szybciej widzą treść strony, co poprawia doświadczenie użytkownika (UX) i pozytywnie wpływa na SEO, ponieważ Google premiuje szybkie strony w wynikach wyszukiwania.

Przykład kodu:

<img src="folder/img/obrazek.jpg" alt="Opis obrazka" loading="lazy">

Najlepsze praktyki w organizacji plików

Struktura folderu img

Wszystkie obrazki warto trzymać w jednym miejscu, np. w folderze img. Ułatwia to zarządzanie plikami i ścieżkami dostępu. Przy większych projektach warto dodatkowo pogrupować obrazy w podfoldery według kategorii lub typu treści (np. img/icons, img/products, img/team).

Poprawna ścieżka dostępu i nazwa pliku obrazka

Używaj czytelnych nazw plików, np. logo-firmy.png. Nazwa powinna odzwierciedlać zawartość obrazka, zawierać słowa kluczowe, ale jednocześnie być zwięzła. Unikaj polskich znaków, spacji i wielkich liter – zamiast tego używaj małych liter, cyfr i myślników (-). Taki sposób nazewnictwa jest optymalny dla SEO, a także zmniejsza ryzyko błędów podczas pracy z plikami.

Przykłady:

• ✅ buty-sportowe-nike.jpg
• ❌ zdjęcie Butów Nike!.jpg

Praktyczne przykłady

Jak wstawić zdjęcia HTML z lokalnego źródła

<img src="folder/img/obrazek.jpg" alt="Opis obrazka" width="500" height="300">

Wstawianie zdjęcia HTML z zewnętrznego adresu URL

<img src="https://www.przyklad.pl/obrazek.jpg" alt="Opis obrazka">

Wstawienie obrazka HTML z użyciem atrybutów width i height

<img src="folder/img/obrazek.jpg" alt="Opis obrazka" width="50%" height="auto">

Wstawianie obrazka HTML przy użyciu tagu <picture>

<picture>
<source srcset="folder/img/obrazek.webp" type="image/webp">
<img src="folder/img/obrazek.jpg" alt="Opis obrazka">
</picture>

Obrazek z użyciem atrybutów alt oraz title

<img 
  src="folder/img/kot.jpg" 
  alt="Kot bawiący się zabawką" 
  title="Zabawny kot uchwycony podczas zabawy piłką">