Wstawianie obrazów

1.1 Element <img>

Multimedia w HTML odgrywa ważną rolę w poprawie wizualnego odbioru stron internetowych. Wstawianie obrazów jest jednym z kluczowych aspektów multimediów w HTML. Najczęściej w tym celu używa się elementu <img>. Przyjrzyjmy się mu bliżej:

Element <img> jest używany do wstawiania obrazów na stronę internetową. Jest to element pusty: nie ma zamykającego znacznika i zawiera tylko atrybuty.

Składnia

    <img src="URL_obrazu" alt="Opis" width="Szerokość" height="Wysokość">
  

    
      <img src="images/photo.jpg" alt="Opis obrazu" width="500" height="300">
    
  

Przyjrzyjmy się trochę bardziej szczegółowo atrybutom elementu <img>

1.2 Atrybut src

Pełna nazwa atrybutu src to source (źródło).

Atrybut src wskazuje ścieżkę do pliku obrazu, który ma zostać wyświetlony na stronie. Może to być zarówno ścieżka absolutna, jak i względna.

Przykłady:

Absolutny URL:

    
      <img src="https://example.com/images/photo.jpg">
    
  

Ścieżka względna:

    
      <img src="images/photo.jpg">
    
  

Absolutny URL zawiera pełny adres do obrazu, w tym protokół (http lub https), domenę i ścieżkę. Ścieżka względna wskazuje lokalizację pliku względem bieżącego dokumentu, co jest wygodne przy pracy z lokalnymi plikami.

1.3 Atrybut alt

Pełna nazwa: alternative text (tekst alternatywny)

Atrybut alt zapewnia tekstowy opis obrazu. Ten tekst jest wyświetlany, jeśli obraz nie może zostać załadowany, i jest używany do poprawy dostępności, ponieważ programy do odczytu ekranu używają go do opisywania obrazu użytkownikom z wadami wzroku.

Przykłady:

    
      <img src="images/sunset.jpg" alt="Zdjęcie pięknego zachodu słońca">
    
  

Dobrze sformułowany tekst alternatywny pomaga użytkownikom zrozumieć zawartość obrazu, jeśli jest on niedostępny, i przyczynia się do poprawy SEO (optymalizacji pod kątem wyszukiwarek) strony.

1.4. Atrybut width

Atrybut width określa szerokość obrazu w pikselach. Jeśli atrybut height nie jest określony, obraz zachowuje swoje proporcje przy zmianie szerokości.

Przykłady:

    
      <img src="images/photo.jpg" width="500">
    
  

Użycie stałej szerokości może być przydatne do kontrolowania rozmiaru obrazu, ale ważne jest, aby uwzględnić responsywność projektu.

1.5 Atrybut height

Atrybut height określa wysokość obrazu w pikselach. Jeśli atrybut width nie jest określony, obraz zachowuje swoje proporcje przy zmianie wysokości.

Przykłady:

    
      <img src="images/photo.jpg" height="300">
    
  

Podobnie jak w przypadku atrybutu width, użycie stałej wysokości może być przydatne, ale trzeba brać pod uwagę responsywność.

Przykład użycia atrybutów razem

    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
  

    
      <img src="images/sunset.jpg" alt="Zdjęcie pięknego zachodu słońca" width="500" height="300">
    
  

W tym przykładzie obraz zostanie załadowany z pliku images/sunset.jpg, wyświetlany z szerokością 500 pikseli i wysokością 300 pikseli, a w przypadku, gdy obraz się nie załaduje, zostanie wyświetlony tekst "Zdjęcie pięknego zachodu słońca".