Jak wstawić obraz w HTML?

Obraz w HTML to coś więcej niż dekoracja. W kodzie strony pełni funkcję informacyjną, użytkową i optymalizacyjną. Może ilustrować treść, być częścią układu, linkiem, tłem lub nośnikiem danych dla wyszukiwarek. Ale żeby działał jak należy – musi być prawidłowo osadzony i opisany. Najczęściej używanym znacznikiem do wyświetlania grafiki w przeglądarce jest pusty tag <img>. Wymaga on przynajmniej jednego atrybutu (src), ale w praktyce warto dodać znacznie więcej: alt, title, width, loading, decoding, style lub klasę CSS. W tym artykule pokażemy Ci, jak wstawić obraz w HTML i jak zadbać o jego wygląd oraz atrybuty. 

• Po co wstawiać obrazki w HTML?
• Jak wstawić obraz w HTML?
• Czym są atrybuty obrazu w HTML?
• Połączenie HTML z CSS przy obrazach 
  • Czy w HTML mogę stylizować obrazek, czy potrzebuję do tego CSS?

Po co wstawiać obrazki w HTML?

W dobie nowoczesnych CMS-ów, kreatorów stron i edytorów blokowych, ręczne pisanie kodu HTML może wydawać się przestarzałe. Przecież większość z nas po prostu przeciąga „blok obrazu” i voilà – działa. 

Znajomość HTML nadal się przydaje. Dlaczego? Bo czasem trzeba:

• poprawić ścieżkę do pliku,
• dodać alt dla SEO lub dostępności,
• dopisać title, width, loading="lazy" albo inne atrybuty,
• osadzić obraz w tabeli, która sypie się w edytorze WYSIWYG.

Czyli: nie pytanie nie powinno brzmieć"po co?, a "jak zrobić to dobrze". Dlaczego warto dodać obraz w HTML i zrobić to z wykorzystaniem atrybutów, które poznasz w dalszej części wpisu?

• Uatrakcyjnienie treści: Tekst bez grafiki potrafi znudzić. Obraz przyciąga uwagę, łamie monotonię, „sprzedaje” lepiej.
• Lepsze zrozumienie: Infografika, zdjęcie produktu, wykres – wszystko to potrafi powiedzieć więcej niż akapit tekstu.
• SEO (pozycjonowanie): Google kocha obrazy... o ile są dobrze opisane. Ruch z wyszukiwarki grafik to realne wejścia.
• Dostępność (accessibility): Dla osób korzystających z czytników ekranu, opis alternatywny (alt) to jedyny sposób, by „zobaczyć” grafikę.

Jak wstawić obraz w HTML?

Używamy tagu img, który nie ma zamykającego tagu (jest pusty):

<img src="images/shrek.png" alt="Zielony ogr Shrek uśmiechający się" title="Shrek – postać z bajki" width="300">

Gdzie:

• src – ścieżka do pliku (może być względna lub absolutna, tj. pełny adres URL)
• alt – tekst alternatywny (ważny dla SEO i dostępności)
• title – tekst podpowiedzi przy najechaniu myszką

Uwaga: Obraz musi być w odpowiedniej lokalizacji względem pliku .html, np. w folderze images/

Czym są atrybuty obrazu w HTML?

W HTML – a w szczególności w tagu <img> – atrybuty to dodatkowe informacje, które sterują zachowaniem, wyglądem i dostępnością obrazka. Każdy z nich pełni określoną funkcję i może być niezwykle przydatny zarówno przy podstawowych wstawieniach obrazków, jak i przy bardziej zaawansowanym projektowaniu stron.

O atrybutach obrazów w HTML przeczytasz w osobnym artykule w naszym Centrum Pomocy, gdzie dokładnie wyjaśniamy, jak ich używać, oraz jaką pełnią funkcję, jak chociażby atrybut ALT dla SEO. 

Dla przykładu pokazaliśmy wyżej atrybut src, alt, title i width. width i height odpowiadają za rozmiar obrazka, a title to dymek po najechaniu kursorem, który widzą też algorytmy Google. 

Połączenie HTML z CSS przy obrazach 

HTML sam w sobie ogranicza się do osadzania obrazów. Dopiero po dodaniu CSS masz prawdziwe możliwości wizualne, których nie osiągniesz za pomocą HTML. Kiedy tworzysz czysty kod HTML i CSS to oczywiście dodajesz wszystko ręcznie. W przypadku WordPress masz dodatkowo dedykowane opcje dodawania własnego kodu HTML. No i przykład:

img {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease-in-out;
}
img:hover {
  transform: scale(1.05);
}

Przykładowe efekty możliwe dzięki CSS:

• Zaokrąglone rogi (border-radius)
• Cienie (box-shadow)
• Efekty po najechaniu (:hover)
• Obraz jako tło: użycie background-image dla np. div
• Responsywność: obrazki skalujące się automatycznie (max-width: 100%; height: auto;)
• Galerie, lightboxy, bannery – dzięki klasom i animacjom CSS

Czy w HTML mogę stylizować obrazek, czy potrzebuję do tego CSS?

Większość stylizacji robi się dziś za pomocą CSS, to nie znaczy, że w samym HTML nie da się dodać podstawowego formatowania obrazka. Ba – czasem to właśnie HTML wystarczy, szczególnie gdy chcesz coś przetestować szybko lub nie chcesz tworzyć osobnego arkusza stylów.

• Bezpośrednie atrybuty HTML:

  • width i height – ustalają rozmiar (np. width="300")

  • alt, title – wpływają na dostępność i interakcje

  • loading="lazy" – opóźnia ładowanie (optymalizacja)

• Atrybut style w HTML (inline CSS):
  To taki mały CSS wpisany bezpośrednio w znaczniku:

  <img src="cat.jpg" class="page_speed_1047983459">

HTML jest pod tym względem bardzo ograniczony. Jeśli chcesz mieć zaoblone krawędzie obrazków, to musisz skorzystać z CSS, chociażby przez dodanie własnego kodu do aplikacji. W WordPress akurat zaoblenie rogów obrazków do funkcja dostępna w panelu graficznym, ale np. jeśli chcesz dodać Cień obrazków w WordPress, to najlepiej zrobić to przez Wstaw własny kod CSS.