wtorek,
Jak dodać obraz do strony HTML?
Aby dodać obraz do strony HTML, używa się znacznika <img>.
Znacznik img
Formaty obrazów
Najczęściej używane formaty obrazów w sieci to JPEG (.jpg, .jpeg), PNG (.png), GIF (.gif) i coraz częściej WebP (.webp). Każdy z tych formatów jest obsługiwany przez popularne przeglądarki stron internetowych i ma swoje zalety i zastosowania, na przykład PNG jest dobrym wyborem dla obrazów z przezroczystością, a JPEG dla fotografii.
Ścieżka dostępu
Ścieżka dostępu do obrazu (atrybut src) może być absolutna lub względna. Ścieżka absolutna wskazuje na konkretny adres URL, np. https://www.przyklad.com/obrazy/moj_obraz.jpg. Nie stosuj też ścieżek odnoszących się do systemu operacyjnego, np. C:\stronaplik.jpg. Ścieżka względna odnosi się do lokalizacji obrazu względem bieżącego pliku HTML, np. obrazy/moj_obraz.jpg (dla obrazu znajdującego się w folderze "obrazy" w tym samym katalogu co plik HTML). Jeśli nie szukasz problemów – nie używaj polskich znaków ani spacji w nazwach plików i katalogów, zadbaj także o zgodność wielkości znaków w kodzie strony i w rzeczywistej nazwie. Na komputerze, na którym tworzysz stronę, pewnie nie będzie problemu z zalecanymi tutaj standardami, kłopoty zaczną się po umieszczeniu strony na serwerze.
Wielkość znaków w nazwach
Nazwy plików i katalogów w HTML są wrażliwe na wielkość liter, zwłaszcza na serwerach UNIX/Linux. Oznacza to, że na przykład moj_obraz.jpg i Moj_Obraz.JPG będą traktowane jako dwa różne pliki. Zawsze upewnij się, że ścieżka dostępu do obrazu w kodzie HTML odpowiada dokładnie nazwie pliku, uwzględniając wielkość liter.
Tekst zastępczy
Atrybut alt w znaczniku <img> jest używany do zapewnienia tekstu zastępczego dla obrazów. Jest to ważne z punktu widzenia dostępności, ponieważ czytniki ekranu używają tego tekstu, aby opisać obraz osobom niewidomym lub niedowidzącym. Tekst zastępczy powinien być krótki i opisywać obraz.
W przypadku obrazów, które służą wyłącznie jako elementy dekoracyjne i nie przekazują żadnej istotnej treści, nadal zaleca się używanie atrybutu alt, ale w taki sposób, aby był on pusty. Pusty atrybut alt (alt="") informuje czytniki ekranu i inne technologie wspomagające, że obraz można zignorować, co jest ważne dla dostępności strony.
<img src="dekoracyjny_obrazek.jpg" alt="">
Puste alt jest szczególnie ważne z kilku powodów. Użytkownicy korzystający z czytników ekranu nie będą słuchać niepotrzebnych opisów obrazów, które nie przekazują żadnych istotnych informacji. Pozwala to im skupić się na treściach, które są istotne, bez rozpraszania uwagi przez wyjaśnianie znaczenia dekoracyjnych elementów. Rozwiązanie to spełnia wymogi dostępności, takie jak WCAG (Web Content Accessibility Guidelines), które zalecają stosowanie pustego atrybutu alt dla obrazów czysto dekoracyjnych.
Pamiętaj, że każdy obraz na stronie powinien mieć atrybut alt, nawet jeśli jest pusty. Pominięcie atrybutu alt może być interpretowane jako błąd lub zaniedbanie w kontekście dostępności strony internetowej.
Podsumowanie
W tym przykładzie <img src="obrazy/moj_obraz.jpg" alt="Opis mojego obrazu"> jest znacznikiem, który dodaje obraz, src wskazuje ścieżkę do obrazu, a alt zawiera tekst zastępczy.
<img src="obrazy/moj_obraz.jpg" alt="Opis mojego obrazu">
