Aby wstawić zdjęcie (obrazek) w HTML, należy użyć tagu <img>. Jest to jeden z podstawowych znaczników HTML, który pozwala na wyświetlenie grafiki w dokumencie internetowym. Poniżej znajdziesz szczegółowy poradnik krok po kroku, wraz z przykładami zastosowań i wyjaśnieniem kluczowych atrybutów.
Podstawowa składnia wstawiania obrazka
Elementem używanym do wstawienia obrazka jest znacznik:
<img src="ścieżka_do_obrazka" alt="Opis obrazka">
- src – wyznacza ścieżkę do pliku graficznego;
- alt – alternatywny opis obrazka, wyświetlany, gdy obrazek nie może się załadować; jest ważny dla dostępności oraz pozycjonowania.
Przykład użycia:
<img src="zdjecia/kot.jpg" alt="Kot bawiący się piłką">
Wybór i umieszczanie obrazka
- Wybierz plik graficzny – obrazy mogą pochodzić zarówno z Twojego komputera, jak i z Internetu,
- sprawdź rozmiar i format pliku – najczęściej stosuje się JPG, PNG lub GIF,
- skopiuj obrazek do folderu projektu (jeśli to plik lokalny) – pozwoli to na łatwe zarządzanie ścieżkami dostępu.
Atrybuty znacznika <img> i ich zastosowanie
Obowiązkowe:
- src – adres obrazka. Może to być:
- Ścieżka względna:
src="img/logo.png" - Ścieżka bezwzględna (pełny adres URL):
src="https://www.example.com/logo.png" - alt – alternatywny tekst, np.
alt="Logo firmy X".
Opcjonalne:
- title – tekst wyświetlany po najechaniu myszką na obrazek, np.
title="Logo firmy na stronie głównej"; - width / height – szerokość i wysokość obrazka w pikselach lub procentach, np.
width="200" height="100".
Przykład:
<img src="banner.jpg" alt="Baner promocyjny" title="Kliknij, aby zobaczyć ofertę" width="600" height="200">
Skalowanie i formatowanie obrazka
Obrazek można dopasować do projektu np. określając rozmiar:
<img src="produkt.png" alt="Wygląd produktu" width="250">
Możesz również stylować obrazek za pomocą CSS, np.:
<img src="avatar.jpg" alt="Zdjęcie profilowe" style="border-radius: 50%;">
Dodawanie linków do obrazków
Obrazek może pełnić rolę przycisku lub odsyłacza – wystarczy otoczyć <img> linkiem:
<a href="https://www.twojastrona.pl"> <img src="logo.png" alt="Logo" width="100"> </a>
Obrazki responsywne i nowoczesne techniki
Responsywność i adaptacja rozmiaru
Aby obrazek automatycznie dopasowywał się do szerokości urządzenia:
<img src="duzy-obraz.jpg" alt="Panorama miasta" style="max-width: 100%; height: auto;">
Wielowarstwowe obrazy i <picture>
Jeśli chcesz wyświetlić różne wersje obrazka w zależności od urządzenia lub rozdzielczości ekranu, użyj <picture>:
<picture> <source srcset="obraz-webp.webp" type="image/webp"> <source srcset="obraz.jpg" type="image/jpeg"> <img src="obraz.jpg" alt="Widok miasta"> </picture>
Taka metoda pozwala na użycie nowoczesnych, lżejszych formatów w nowoczesnych przeglądarkach oraz zapewnia kompatybilność ze starszymi rozwiązaniami.
Typowe błędy
- Literówki w ścieżce do obrazka (
src), - brak atrybutu
alt, - zostawienie zbyt ogólnego opisu w
alt(np. samo „obrazek” zamiast konkretnego opisu treści), - nieumieszczenie pliku obrazka w odpowiednim katalogu projektu.
Praktyczne zastosowania
- Galerie zdjęć – wyświetlanie wielu obrazków w układzie siatkowym;
- E-commerce – prezentacja produktów;
- Banery reklamowe – obrazy linkowane do ofert specjalnych;
- Elementy nawigacyjne – ikony i przyciski graficzne.
Podstawowe przykłady kodu
Prosty obrazek wyświetlony na stronie –
<img src="nature.jpg" alt="Zachód słońca nad jeziorem">
Obrazek jako link –
<a href="https://www.example.com"> <img src="logo.png" alt="Przejdź do strony głównej" width="120"> </a>
Obrazek w układzie responsywnym –
<img src="zdjecie-wakacje.jpg" alt="Plaża o poranku" style="max-width:100%; height:auto;">
Obrazek z tytułem i rozmiarem –
<img src="piesek.png" alt="Szczeniak rasy border collie" title="Słodki szczeniak" width="300" height="200">
Zastosowanie tych zasad i przykładów pozwoli na łatwe i poprawne wstawianie zdjęć do stron internetowych w HTML, dbając jednocześnie o dostępność, estetykę i wydajność Twojej witryny.
