Jak wstawić zdjęcie w HTML: prosty przewodnik

Jeśli zaczynasz swoją przygodę z tworzeniem stron internetowych, prawdopodobnie zastanawiasz się, jak wstawić zdjęcie w HTML. Dodanie obrazu do strony to podstawowa umiejętność, która pozwala wzbogacić treść i uatrakcyjnić wygląd witryny. W tym artykule krok po kroku pokażemy, jak poprawnie osadzić obrazek w kodzie HTML, tak aby działał na każdej przeglądarce.

Podstawowa struktura znacznika <img>

Aby dodać zdjęcie do strony w HTML, używamy specjalnego znacznika <img>. Jest to znacznik samozamykający się, co oznacza, że nie potrzebuje osobnego znacznika końcowego, takiego jak np. <p></p>.

Podstawowy kod wygląda następująco:
<img src=”ścieżka-do-obrazu.jpg” alt=”Opis obrazu”>

Wyjaśnienie atrybutów w tagu <img>

• src (source) – To najważniejszy atrybut. Określa on lokalizację obrazu, który chcemy wyświetlić. Może to być ścieżka względna (np. „images/foto.jpg” dla pliku w folderze „images”) lub absolutna (np. pełny adres URL, jak „https://example.com/obrazek.jpg”).

• alt (alternative text) – Jest to tekst alternatywny, który wyświetla się w przypadku, gdy obraz nie zostanie załadowany. Ponadto, atrybut ten jest istotny z punktu widzenia SEO i dostępności, ponieważ umożliwia wyszukiwarkom oraz osobom korzystającym z technologii asystujących (np. czytników ekranu) zrozumienie, co przedstawia obraz.

Jak wstawić zdjęcie w HTML – krok po kroku

1. Przygotuj obraz – Najpierw musisz posiadać obraz, który chcesz dodać do swojej strony. Upewnij się, że plik jest odpowiedniej wielkości i jakości, aby strona ładowała się szybko.

2. Zapisz obraz w folderze projektu – Najlepiej utwórz folder o nazwie „images” lub „obrazki”, w którym przechowasz wszystkie pliki graficzne.

3. Dodaj znacznik <img> do kodu HTML – Wstaw odpowiedni kod tam, gdzie chcesz, aby pojawił się obraz. Przykład:
   <img src=”images/moje-zdjecie.jpg” alt=”Opis mojego zdjęcia”>

4. Sprawdź wynik w przeglądarce – Zapisz plik HTML, otwórz go w przeglądarce i upewnij się, że obraz został poprawnie załadowany.

Dodatkowe atrybuty znacznika <img>

Chociaż podstawowe atrybuty src i alt są wystarczające, warto znać również inne opcje, które pozwalają na większą kontrolę nad wyglądem obrazka.

• width i height – Możesz zdefiniować szerokość i wysokość obrazu, np.:
  <img src=”images/moje-zdjecie.jpg” alt=”Opis mojego zdjęcia” width=”300″ height=”200″>
  Pamiętaj jednak, aby proporcje obrazu były zachowane, inaczej może on wyglądać nienaturalnie.

• title – Umożliwia dodanie opisu, który pojawi się po najechaniu kursorem na obraz:
  <img src=”images/moje-zdjecie.jpg” alt=”Opis mojego zdjęcia” title=”Mój obraz”>

  Wstawianie obrazów z linków zewnętrznych

  Jeśli chcesz dodać obraz, który znajduje się na innym serwerze, możesz to zrobić za pomocą pełnego adresu URL w atrybucie src. Przykład:
  <img src=”https://example.com/obrazek.jpg” alt=”Opis zewnętrznego obrazu”>

  Wskazówki dotyczące optymalizacji obrazów w HTML

  1. Kompresuj obrazy – Używaj narzędzi do kompresji obrazów, aby zmniejszyć ich rozmiar, co przyspieszy ładowanie strony.

  2. Wybieraj odpowiednie formaty – Pliki JPEG są najlepsze dla zdjęć, natomiast PNG lepiej sprawdza się w przypadku grafik z przezroczystością. Nowoczesne formaty, takie jak WebP, mogą dodatkowo zredukować rozmiar plików.

  3. Dodaj opisowy tekst alternatywny – Pamiętaj o użyciu atrybutu alt, aby poprawić dostępność strony i pomóc wyszukiwarkom lepiej indeksować twoje obrazy.

  Podsumowanie

  Dodawanie zdjęć do strony HTML jest proste i wymaga jedynie użycia znacznika <img> z odpowiednimi atrybutami. Wystarczy określić ścieżkę do pliku obrazu i dodać alternatywny tekst, aby twoje zdjęcia były widoczne na stronie. Pamiętaj również o optymalizacji obrazów, aby strona działała szybko i sprawnie.

  Teraz już wiesz, jak wstawić zdjęcie w HTML, więc możesz śmiało dodawać obrazy do swoich projektów i tworzyć atrakcyjne wizualnie strony internetowe.