Kod do załadowania obrazu w HTML

Obrazy w HTML można ładować za pomocą znacznika <img>. Ten znacznik umożliwia wstawianie grafik na stronę internetową.

Struktura znacznika <img>:

        <img src="URL_obrazu" alt="Opis obrazu" width="szerokość" height="wysokość">
            

Wyjaśnienie atrybutów:

• src (source):
  • Wymagany.
  • Określa ścieżkę do pliku obrazu, którą może być:
    • Pełny URL: https://example.com/obraz.jpg
    • Lokalna ścieżka na serwerze: images/obraz.jpg.
• alt (alternative text):
  • Wymagany.
  • Opisuje obraz dla użytkowników, którzy nie widzą obrazu (np. korzystających z czytników ekranowych lub gdy obraz nie może się załadować).
• width i height:
  • Opcjonalne.
  • Określają szerokość i wysokość obrazu w pikselach lub procentach. Jeśli nie są podane, obraz wyświetla się w swojej oryginalnej wielkości.

Przykłady:

1. Prosty obraz:

        <img src="https://example.com/example.jpg" alt="Przykładowy obraz">
            

2. Obraz z określonymi wymiarami:

        <img src="images/kwiaty.jpg" alt="Zdjęcie kwiatów" width="300" height="200">
            

3. Obraz jako link:

        <a href="https://example.com">
            <img src="images/logo.jpg" alt="Logo firmy" width="150">
        </a>
            

Po kliknięciu obraz przeniesie użytkownika na stronę podaną w atrybucie href.

4. Obraz z przezroczystością (np. PNG):

        <img src="images/logo.png" alt="Przezroczyste logo" width="100">
            

5. Ukrycie obrazu, gdy się nie ładuje:

        <img src="nieistniejacy-obraz.jpg" alt="Obraz niedostępny">
            

Uwagi:

• Zoptymalizuj obrazy:
  • Używaj odpowiednich formatów obrazów, takich jak:
    • JPEG dla zdjęć (dobre dla kompresji).
    • PNG dla obrazów z przezroczystością.
    • WebP dla lepszej wydajności.
• Responsywne obrazy:

          <img src="example.jpg" alt="Responsywny obraz" style="max-width: 100%; height: auto;">
                      

  Dzięki temu obraz dostosuje się do szerokości urządzenia.

• Atrybut alt: Jest kluczowy dla dostępności, SEO i sytuacji, gdy obraz nie może zostać załadowany.