Atrybut img src w HTML to kluczowy element umożliwiający wyświetlanie obrazów na stronach internetowych. Dzięki src przeglądarka może zlokalizować i załadować obraz z określonego źródła, co jest niezbędne do poprawnego renderowania wizualnej zawartości strony. W tym artykule przyjrzymy się bliżej działaniu src, omówimy typy ścieżek, nietypowe zastosowania oraz dobre praktyki związane z wydajnością i bezpieczeństwem.
🔴 Jak wstawić zdjęcie w HTML: Kompletny przewodnik
Podstawowe użycie img src
Znacznik <img> w HTML służy do osadzania obrazów w dokumencie, a właściwość src (od ang. source) określa ścieżkę do pliku graficznego.
Przykład podstawowego użycia:
<img src="obrazek.jpg" alt="Opis obrazka">W powyższym kodzie:
src wskazuje lokalizację pliku obrazek.jpg.
Atrybut alt (alternatywny tekst) dostarcza opis obrazu, co jest istotne dla dostępności (czytniki ekranu) oraz SEO.
Warto pamiętać, że atrybut src może wskazywać zarówno plik lokalny (np. znajdujący się w folderze projektu), jak i zewnętrzny adres URL. Źle podana ścieżka spowoduje, że obraz nie zostanie załadowany, dlatego warto regularnie sprawdzać, czy wszystkie źródła są dostępne i poprawne.
Ścieżki względne i absolutne
Ścieżka względna
Ścieżka względna odnosi się do lokalizacji obrazu w stosunku do bieżącego dokumentu HTML.
Przykład:
<img src="obrazy/zdjecie.jpg" alt="Zdjęcie">Taki zapis oznacza, że przeglądarka będzie szukać pliku zdjecie.jpg w folderze obrazy, który znajduje się w tej samej lokalizacji co plik HTML.
Ścieżka absolutna
Ścieżka absolutna zawiera pełny adres URL do obrazu – włącznie z protokołem (http lub https), domeną i ścieżką do pliku. Umożliwia osadzanie obrazów z zewnętrznych serwerów.
Przykład:
<img src="https://www.przyklad.com/obrazy/zdjecie.jpg" alt="Zdjęcie">Wskazówka: Korzystając z obrazów z zewnętrznych źródeł, zawsze sprawdzaj prawa autorskie. Dodatkowo pamiętaj, że zewnętrzne źródła mogą spowolnić ładowanie strony, a brak dostępności pliku (np. usunięcie z serwera) spowoduje błąd ładowania obrazu.
Atrybut alt i jego znaczenie
Atrybut alt dostarcza alternatywny tekst dla obrazu. Jest to istotne z kilku powodów:
- Dostępność: Czytniki ekranu odczytują zawartość
alt, co umożliwia osobom niewidomym i niedowidzącym zrozumienie, co znajduje się na obrazie. - SEO: Tekst alternatywny jest analizowany przez wyszukiwarki, dlatego poprawnie opisane obrazy mogą zwiększyć widoczność strony w wynikach wyszukiwania (np. w Google Grafika).
- Awaryjność: Jeśli obraz nie zostanie załadowany (np. z powodu błędu ścieżki lub braku połączenia), przeglądarka wyświetli tekst z
altjako zastępstwo.
Wskazówka: Atrybut alt powinien być krótki, konkretny i opisowy – zamiast „obrazek1.jpg”, lepiej napisać: „Logo firmy Devstock”.
Dodatkowe atrybuty width i height
Atrybuty width i height pozwalają określić rozmiary obrazu w pikselach bezpośrednio w znaczniku HTML.
Przykład:
<img src="obrazek.jpg" alt="Opis obrazka" width="600" height="400">Określenie wymiarów obrazu pomaga przeglądarce zarezerwować odpowiednie miejsce podczas ładowania strony, co zmniejsza ryzyko przeskakiwania treści (tzw. Cumulative Layout Shift – CLS). Jest to ważne z punktu widzenia Core Web Vitals i ogólnej wydajności strony.
Wskazówka: Aby uniknąć zniekształceń obrazu, zachowaj proporcje. Możesz pominąć jeden z atrybutów – przeglądarka automatycznie dopasuje drugi, o ile plik graficzny zawiera poprawne metadane.
Pamiętaj też, że atrybuty width i height w HTML różnią się od ustawień tych właściwości w CSS – HTML definiuje rozmiar zasobnika, a CSS może przeskalować obraz bez zmiany miejsca zajmowanego na etapie ładowania.
Osadzanie obrazów jako linków
Możesz użyć obrazu jako linku, łącząc znacznik <img> z elementem <a>. To rozwiązanie często stosuje się np. w logotypach, banerach lub miniaturach produktów.
Przykład:
<a href="https://www.przyklad.com">
<img src="obrazek.jpg" alt="Opis obrazka">
</a>Kliknięcie na obraz przeniesie użytkownika pod wskazany adres.
Wskazówka: Pamiętaj o dodaniu atrybutu alt – pełni on tutaj podwójną rolę: poprawia dostępność i przekazuje informację o celu linku dla osób korzystających z czytników ekranu.
Typy źródeł i protokoły w src
Atrybut src może wskazywać nie tylko lokalny plik, ale również zewnętrzne źródło – np. obraz z CDN-u lub innej domeny. Można też używać różnych protokołów:
https://– standardowy adres URL, bezpieczne połączenie.data:– tzw. Data URI, czyli obraz osadzony bezpośrednio w kodzie jako ciąg Base64.
Przykład z data: URI:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..." alt="Ikona">To rozwiązanie pozwala zmniejszyć liczbę zapytań HTTP, ale zwiększa rozmiar HTML – warto je stosować tylko do bardzo małych grafik (np. ikon).
Zachowanie src w kontekście cache’owania
Przeglądarki zapisują obrazy w pamięci podręcznej (cache), żeby nie pobierać ich ponownie przy każdym odświeżeniu strony. Jeśli jednak chcesz wymusić odświeżenie obrazu (np. po aktualizacji pliku), możesz dodać do src tzw. parametr wersjonowania:
<img src="logo.png?v=2" alt="Logo">
Zmiana wartości po znaku ? sprawi, że przeglądarka potraktuje obraz jako nowy zasób.
Bezpieczeństwo i Content Security Policy (CSP)
Używając obrazów z zewnętrznych źródeł, warto mieć świadomość, że mogą one zostać zablokowane przez politykę bezpieczeństwa przeglądarki (CSP).
Jeśli Twoja strona korzysta z nagłówka Content-Security-Policy, a obraz pochodzi z innej domeny, musisz ją uwzględnić w img-src:
Content-Security-Policy: img-src 'self' https://cdn.example.com;
Brak wpisanej domeny może sprawić, że obraz nie zostanie załadowany mimo poprawnego src.
src a wydajność ładowania strony
Źle zoptymalizowane obrazy to jedna z głównych przyczyn wolnego ładowania strony. Warto zadbać o:
- stosowanie nowoczesnych formatów (
webp,avif), - kompresję plików graficznych,
- ustawienie atrybutu
loading="lazy":
<img src="duzy-obraz.jpg" alt="Duży obraz" loading="lazy">
To opóźnia ładowanie obrazka, dopóki nie zbliży się do pola widzenia użytkownika – dzięki temu strona ładuje się szybciej.
Ustawianie src dynamicznie w JavaScript
Możesz zmieniać wartość src dynamicznie, np. przy kliknięciu użytkownika:
document.querySelector('#obraz').src = 'nowy-obraz.jpg';Dzięki temu można tworzyć dynamiczne galerie, podmieniać miniaturki czy reagować na zdarzenia użytkownika.
Podsumowanie – img src
Atrybut img src w HTML to podstawowe narzędzie do osadzania grafik na stronach internetowych. Jego poprawne wykorzystanie pozwala nie tylko na prawidłowe wyświetlanie obrazów, ale także wpływa na dostępność, szybkość ładowania i jakość doświadczenia użytkownika. Znajomość atrybutów towarzyszących, takich jak alt, width, height czy loading, umożliwia tworzenie stron, które są estetyczne, dostępne i zoptymalizowane pod kątem SEO i wydajności. Pamiętaj, by zawsze dodawać alternatywny tekst do obrazów, unikać niepotrzebnego ładowania zewnętrznych zasobów i dbać o responsywność oraz zgodność z dobrymi praktykami.
📚 Chcesz pogłębić temat? Sprawdź dokumentację:
🔗 MDN Web Docs – HTML img src
Czy ten artykuł był dla Ciebie pomocny? Jeśli tak, zostaw swoją ocenę na dole strony – to dla nas ważne i pomoże innym użytkownikom! Masz pytania? Śmiało, napisz komentarz, chętnie pomożemy! 🙂
