Obrazy Markdown

Obrazy czynią twoją treść bardziej angażującą i pomagają zilustrować twoje punkty. Markdown zapewnia prostą składnię do dodawania obrazów, choć czasami będziesz potrzebować HTML do bardziej zaawansowanych funkcji.

Podstawowa składnia obrazu

Podstawowa składnia obrazów w Markdown jest podobna do linków, ale z wykrzyknikiem na początku: 

![Tekst alternatywny](adres-obrazu.jpg)
![Obraz lokalny](./images/zdjecie.jpg)
![Obraz zewnętrzny](https://example.com/obraz.jpg)

Obrazy z tytułami

Możesz dodać tytuły, które pojawiają się, gdy użytkownicy najadą kursorem na obraz: 

![Tekst alternatywny](obraz.jpg "Tytuł obrazu")

Najlepsze praktyki tekstu alternatywnego

Tekst alternatywny jest kluczowy dla dostępności i SEO:

1. Bądź opisowy

❌ Niepomocne: 

![Obraz](zdjecie.jpg)
![Obrazek](obrazek.png)

✅ Opisowe: 

![Kobieta programująca na laptopie w kawiarni](programowanie-kawiarnia.jpg)
![Wykres słupkowy pokazujący wzrost sprzedaży od 2020 do 2024](wykres-sprzedazy.png)

2. Zachowaj zwięzłość

❌ Za długie: 

![To jest naprawdę długi opis obrazu, który pokazuje osobę siedzącą przy komputerze w tym, co wydaje się być nowoczesnym środowiskiem biurowym z białymi ścianami i dużymi oknami](biuro.jpg)

✅ Zwięzłe: 

![Osoba pracująca przy komputerze w nowoczesnym biurze](biuro.jpg)

3. Nie dodawaj "Obraz" lub "Zdjęcie"

❌ Redundantne: 

![Obraz psa bawiącego się w parku](pies.jpg)

✅ Bezpośrednie: 

![Pies bawiący się w parku](pies.jpg)

Obrazy w stylu referencyjnym

Podobnie jak linki, możesz używać składni referencyjnej dla obrazów: 

![Tekst alternatywny][referencja-obrazu]  

[referencja-obrazu]: obraz.jpg "Opcjonalny tytuł"

Przykład

Oto nasze logo: ![Logo firmy][logo]

A tutaj zrzut ekranu: ![Zrzut ekranu aplikacji][zrzut]

[logo]: /images/logo.png "Logo mojej firmy"
[zrzut]: /images/aplikacja.png "Zrzut ekranu pulpitu aplikacji"

Ścieżki obrazów i URLe

Obrazy lokalne

![Obraz lokalny](./images/zdjecie.jpg)
![Ścieżka względna](../assets/ikona.png)
![Ścieżka absolutna](/public/images/baner.jpg)

Obrazy zewnętrzne

![Obraz zewnętrzny](https://example.com/obraz.jpg)
![Zdjęcie z Unsplash](https://images.unsplash.com/photo-123/zdjecie.jpg)

Popularne wzorce

Obraz z podpisem

![Spotkanie zespołu w sali konferencyjnej](spotkanie.jpg)
*Rysunek 1: Cotygodniowe spotkanie zespołu omawiające kamienie milowe projektu*

Obrazy przed/po

## Przed
![Stary projekt strony internetowej](stary-projekt.png)

## Po
![Nowy projekt strony internetowej](nowy-projekt.png)

Instrukcje krok po kroku

1. Kliknij ikonę ustawień
   ![Ikona ustawień w prawym górnym rogu](ikona-ustawien.png)

2. Wybierz "Ustawienia konta"
   ![Opcja menu ustawień konta](menu-konta.png)

3. Zaktualizuj informacje w profilu
   ![Formularz profilu z polami do edycji](formularz-profilu.png)

Galeria obrazów

## Zrzuty ekranu projektu

![Strona główna](strona-glowna.png) ![Pulpit](pulpit.png) ![Ustawienia](ustawienia.png)

Rozwiązywanie problemów z obrazami

Typowe problemy

  1. Obraz się nie wyświetla: Sprawdź ścieżkę pliku i nazwę pliku

  2. Ikona uszkodzonego obrazu: Sprawdź, czy URL obrazu jest dostępny
  3. Obraz za duży: Zmień rozmiar lub skompresuj obraz
  4. Zły format: Upewnij się, że przeglądarka obsługuje format obrazu

Testowanie obrazów

  • •
    Podgląd w edytorze Markdown

  • •
    Sprawdzenie w różnych przeglądarkach
  • •
    Weryfikacja na urządzeniach mobilnych
  • •
    Test przy wolnym połączeniu internetowym

Zaawansowane techniki

Linki obrazów

Połącz obrazy z linkami: 

[![Kliknij, aby zobaczyć większy](miniaturka.jpg)](pelny-rozmiar.jpg)

Obrazy to potężny sposób na wzbogacenie dokumentów Markdown. Używaj ich przemyślanie, aby wspierać swoją treść i poprawić doświadczenie użytkownika!

Potrzebujesz podkreślić tekst w swojej treści? Naucz się o formatowaniu przekreślenia następnie.