img src sprowadza się do jednego: przeglądarka ma wiedzieć, skąd pobrać obraz i jak go sensownie wyświetlić. Pokażę więc, jak działa atrybut src, kiedy wystarczy prosta ścieżka do pliku, a kiedy lepiej dorzucić srcset, width i height. Dorzucę też typowe błędy, przez które grafika nie pojawia się na stronie albo spowalnia cały layout.
Najważniejsze rzeczy, które trzeba wiedzieć o obrazach w HTML
-
srcwskazuje plik obrazu, który przeglądarka ma pobrać i wyświetlić. - Element
imgjest pusty, więc nie umieszcza się w nim treści między tagami otwierającym i zamykającym. -
altpowinno być ustawione zawsze, bo odpowiada za dostępność i zachowanie obrazu, gdy plik się nie wczyta. - Ścieżka do pliku może być względna, root-relative albo absolutna, a każda opcja ma inne zastosowanie.
-
widthiheightpomagają ograniczyć przesunięcia układu podczas ładowania strony. - Przy wielu wariantach obrazu przydają się
srcsetipicture, nie sam podstawowy adres pliku.
Co robi atrybut src w elemencie img
Patrzę na src jak na adres dostawy. Bez niego przeglądarka nie ma skąd pobrać obrazu, więc sam znacznik img nic nie pokaże. To właśnie ten atrybut mówi, czy grafika ma być wczytana z folderu projektu, z CDN, czy z pełnego adresu w sieci.
Warto też pamiętać, że img jest elementem pustym, czyli nie ma treści wewnątrz. Dlatego obraz osadza się atrybutami, a nie zawartością między tagami. Z praktycznego punktu widzenia oznacza to prostą zasadę: jeśli chcesz zobaczyć obraz, musisz mieć poprawny adres w src i sensowny tekst alternatywny w alt.
Gdy już rozumiesz tę bazę, łatwiej przejść do poprawnej składni i doboru ścieżki, bo właśnie tam pojawia się większość pomyłek.
Jak zapisać obraz poprawnie w HTML
Najprostszy wariant jest też najzdrowszy dla czytelności kodu. Ja zwykle zaczynam od jednego, konkretnego znacznika i dopiero później dokładam elementy związane z wydajnością.
W tym przykładzie src wskazuje plik, alt opisuje jego sens, a width i height pozwalają przeglądarce zarezerwować miejsce jeszcze przed pobraniem grafiki. To ważne, bo bez tych wymiarów układ strony potrafi „skakać” podczas ładowania, zwłaszcza przy większej liczbie obrazów.
Jeśli obraz jest dekoracją, alt może być pusty, ale to nadal decyzja, którą trzeba podjąć świadomie. W pozostałych przypadkach tekst alternatywny powinien opisywać sens grafiki, a nie tylko jej wygląd. Taki zapis jest prosty, ale bardzo skuteczny, więc dalej przyglądam się już samym ścieżkom do plików.
Ścieżka względna, absolutna i hotlinking
W codziennej pracy najczęściej spotkasz trzy podejścia do adresowania obrazu. Każde działa, ale nie każde sprawdza się równie dobrze w każdym projekcie.
| Rodzaj ścieżki | Przykład | Kiedy ma sens | Na co uważać |
|---|---|---|---|
| Względna | images/produkt.jpg |
Gdy plik leży obok HTML albo w dobrze uporządkowanej strukturze projektu | Łatwo ją zepsuć przy przenoszeniu plików między katalogami |
| Od katalogu głównego | /images/produkt.jpg |
Gdy chcesz mieć stabilny adres niezależny od głębokości podstrony | Wymaga poprawnie ustawionego katalogu głównego na serwerze |
| Absolutna | https://example.pl/images/produkt.jpg |
Gdy zasób ma być pobierany z konkretnej domeny lub CDN | Zależysz od dostępności zewnętrznego hosta |
Najwięcej problemów widzę przy hotlinkingu, czyli podpinaniu obrazu z cudzej strony bez zgody. Technicznie bywa to wygodne, ale praktycznie jest ryzykowne, bo obraz może zniknąć, zostać podmieniony albo zablokowany. Na własnej stronie lepiej trzymać grafiki po swojej stronie albo w kontrolowanym CDN.
Warto też pamiętać o wielkości liter na hostingu. Na serwerach Linux Foto.jpg i foto.jpg to dwa różne pliki, więc literówka, która przechodzi lokalnie, potrafi wyłożyć produkcję. To jeden z tych drobnych błędów, które w praktyce kosztują najwięcej czasu.
Najczęstsze błędy, przez które obraz się nie wyświetla
Jeśli obraz nie pojawia się na stronie, przyczyna bardzo często jest banalna. Problem nie leży wtedy w samym HTML, tylko w adresie, strukturze plików albo ograniczeniach serwera.
- Zła ścieżka do pliku - najczęstszy przypadek, zwykle po zmianie katalogów albo po wdrożeniu na serwer.
- Literówka w nazwie - pojedynczy znak, myślnik albo wielka litera potrafią zatrzymać cały obraz.
- Plik nie został wgrany - kod wskazuje poprawny adres, ale na serwerze nie ma jeszcze samego obrazu.
- Obraz jest blokowany przez politykę bezpieczeństwa - czasem działa lokalnie, ale produkcja odcina ładowanie zewnętrznych zasobów.
- Zły format lub uszkodzony plik - rozszerzenie może istnieć, ale sam plik jest nieczytelny dla przeglądarki.
Jeśli chcesz diagnozować problem szybko, zacznij od otwarcia samego adresu obrazu w przeglądarce. Gdy obraz nie ładuje się bezpośrednio, nie szukaj winy w CSS ani w JavaScript, tylko w samym źródle. Dopiero kiedy podstawy działają, ma sens przejść do optymalizacji i wariantów responsywnych.
Kiedy zwykły src to za mało
Sam src wystarcza przy prostych grafikach, ale przy nowoczesnych stronach to zwykle dopiero punkt wyjścia. Ja traktuję go jako bazę, a nie jako pełne rozwiązanie dla każdego przypadku.
| Rozwiązanie | Kiedy używać | Co daje | Ograniczenie |
|---|---|---|---|
src |
Jeden obraz, jedna wersja, brak dodatkowych wariantów | Najprostszy kod i najmniej punktów awarii | Brak automatycznego dopasowania do ekranów i rozdzielczości |
srcset |
Masz kilka rozmiarów tej samej grafiki | Lepszą ostrość i często mniejszy transfer danych | Trzeba przygotować warianty plików i dobrze dobrać deklaracje |
picture |
Chcesz zmienić kadr, format albo obraz dla konkretnego breakpointu | Największą kontrolę nad tym, co zobaczy użytkownik | Więcej kodu i więcej testów po stronie frontendu |
W praktyce srcset przydaje się wtedy, gdy ta sama grafika ma działać dobrze na zwykłych ekranach i na urządzeniach o wyższej gęstości pikseli. picture wybieram dopiero wtedy, gdy nie chodzi już tylko o rozdzielczość, ale o realną zmianę obrazu, na przykład inny kadr na mobile. Jeśli obraz ma jedną, prostą wersję, nie ma sensu komplikować kodu na siłę.
To właśnie ten moment pokazuje, że dobre użycie obrazu to nie sam adres w HTML, ale cała decyzja o tym, jak plik ma się ładować i kiedy ma się pojawić.
Praktyczny wzorzec, który stosuję na stronach
Jeśli pracuję nad stroną firmową, sklepem albo artykułem blogowym, zwykle idę w prosty schemat: lekka grafika, poprawny opis, stałe wymiary i tylko tyle dodatkowych atrybutów, ile faktycznie daje wartość. Przy obrazach niżej na stronie dorzucam też opóźnione ładowanie, bo nie ma sensu pobierać wszystkiego od razu.
- alt opisuje obraz po ludzku, bez sztucznego upychania słów kluczowych.
- width i height odpowiadają rzeczywistemu formatowi pliku i pomagają utrzymać stabilny layout.
- loading="lazy" ma sens głównie przy grafikach poniżej pierwszego ekranu.
- decoding="async" może pomóc w płynniejszym renderowaniu, zwłaszcza przy większej liczbie obrazów.
- kompresja jest równie ważna jak sam HTML, bo zbyt ciężki plik spowolni nawet idealnie napisany znacznik.
W projektach contentowych zwykle celuję w obraz po kompresji poniżej 200-300 KB, jeśli to tylko możliwe. Nie traktuję tego jak sztywnej reguły, ale jako rozsądny punkt odniesienia. Jeżeli grafika ma być większa, musi to mieć uzasadnienie, a nie wynikać z przyzwyczajenia do eksportu „na wszelki wypadek”.
Zanim opublikujesz grafikę, sprawdź jeszcze te rzeczy
- Czy
srcprowadzi do pliku, który faktycznie istnieje na serwerze. - Czy nazwa pliku zgadza się znak w znak, łącznie z wielkością liter.
- Czy tekst w
altopisuje sens obrazu, a nie tylko jego wygląd. - Czy obraz nie jest niepotrzebnie ciężki i nie psuje mobilnego ładowania.
- Czy układ strony nie przeskakuje po pojawieniu się grafiki.
- Czy zewnętrzne źródło nie jest blokowane przez serwer, CDN albo politykę bezpieczeństwa.
Dobrze użyty atrybut src wygląda niepozornie, ale ma realny wpływ na wygodę użytkownika, dostępność i szybkość strony. Jeśli zbudujesz wokół niego poprawny kontekst, czyli opis, wymiary, kompresję i sensowną strategię ładowania, obrazy przestaną być ozdobą z problemami, a staną się normalną, przewidywalną częścią projektu.
