HTML Znacznik IMG reguluje wstawianie obrazów i innych statycznych obiektów graficznych na stronie internetowej. Ten wspólny tag obsługuje kilka obowiązkowych i opcjonalnych atrybutów, które wzbogacają Twoją zdolność do zaprojektowania atrakcyjnej, zorientowanej na wizerunek witryny internetowej.
Przykład w pełni uformowanego tagu HTML IMG wygląda tak:
Wymagane atrybuty tagu IMG
src="/ścieżka/do/obrazu.jpg"
Jedynym atrybutem potrzebnym do wyświetlenia obrazu na stronie internetowej jest src atrybut. Ten atrybut identyfikuje nazwę i lokalizację pliku obrazu do wyświetlenia.
alt="Opis obrazu"
Aby napisać poprawny XHTML i HTML4, alt atrybut jest również wymagany. Ten atrybut służy do dostarczania niewizualnym przeglądarkom tekstu opisującego obraz. Przeglądarki wyświetlają tekst alternatywny na różne sposoby. Niektóre wyświetlają go jako wyskakujące okienko po najechaniu myszą na obraz, inne wyświetlają go we właściwościach po kliknięciu obrazu prawym przyciskiem myszy, a niektóre w ogóle go nie wyświetlają.
Użyj tekst alternatywny aby podać dodatkowe szczegóły dotyczące obrazu, które nie są istotne lub nie są istotne dla tekstu strony internetowej. Pamiętaj jednak, że w czytnikach ekranu i innych przeglądarkach tylko tekstowych tekst zostanie odczytany razem z resztą tekstu na stronie. Aby uniknąć nieporozumień, użyj opisowego tekstu alternatywnego, który mówi (na przykład) „O projektowaniu stron internetowych i HTML” zamiast samego „logo”.
alt tekst jest również niezbędny dla SEO (optymalizacji wyszukiwarek). Boty używane przez wyszukiwarki, takie jak Google, do przeglądania treści w witrynach, nie „widzą” obrazów. Polegają na alt tekst, aby określić, co jest na stronie.
W HTML5, alt atrybut nie zawsze jest wymagany, ponieważ możesz użyć a podpis aby dodać do niego więcej opisu. Możesz również użyć tego atrybutu, aby wskazać identyfikator zawierający pełny opis:
aria-describedby="Opis obrazu"
Tekst alternatywny nie jest również wymagany, jeśli obraz jest czysto dekoracyjny, na przykład grafika na górze strony internetowej lub ikony. Ale jeśli nie masz pewności, na wszelki wypadek dołącz tekst alternatywny.
Atrybuty rozmiaru
szerokość = "500"i.
wysokość="500"W zależności od projektu, używając. wysokość i. szerokość
Ogólnie rzecz biorąc, będziesz chciał, aby rozmiar obrazu był ustawiony w swoim CSS. Najczęściej będzie to wynikiem wymiarów kontenera nadrzędnego obrazu. Takie podejście pozwala na największą elastyczność przy dostosowywaniu się do różnych rozmiarów ekranu. Jednak nadal istnieją przypadki, w których możesz chcieć określić wymiary obrazu jako atrybuty HTML.
Inne przydatne atrybuty IMG
title="Opisowa nazwa obrazu"Atrybut jest atrybutem globalnym, który można zastosować do dowolnego. element HTML. Ponadto. tytuł
Większość przeglądarek obsługuje tytuł atrybut, ale robią to na różne sposoby. Niektóre wyświetlają tekst jako wyskakujące okienko, podczas gdy inne wyświetlają go na ekranach informacyjnych, gdy użytkownik kliknie obraz prawym przyciskiem myszy. Możesz użyć tytuł atrybut do zapisania dodatkowych informacji o obrazie, ale nie licz na to, że te informacje będą ukryte lub widoczny. Zdecydowanie nie powinieneś używać tego do ukrywania słów kluczowych dla wyszukiwarek. Ta praktyka jest obecnie karana przez większość wyszukiwarek.
usemap=""i.
ismap=""Te dwa atrybuty ustawiają po stronie klienta () i po stronie serwera (ISMAP) mapy obrazów
longdesc="Bardziej szczegółowy opis twojego obrazu". długodesc
Przestarzałe i przestarzałe atrybuty IMG
Kilka atrybutów jest teraz przestarzałych w HTML5 lub przestarzałych w HTML4. Aby uzyskać najlepszy HTML, powinieneś znaleźć inne rozwiązania zamiast używać tych atrybutów.
granica = "3"
wyrównaj="w lewo"Ten atrybut umożliwia umieszczenie obrazu wewnątrz tekstu i opływanie go wokół niego. Obraz można wyrównać do prawej lub lewej strony. Został zdeprecjonowany na rzecz. pływać właściwość CSS
hspcace="10"i.
vspace="10". hspacja i. vspace atrybuty dodają odstęp w poziomie ( hspacja) i pionowo ( vspace
lowsrc="/ścieżka/do/lowres.jpg". lowsrc atrybut zapewnia alternatywny obraz, gdy źródło obrazu jest tak duże, że pobiera się bardzo wolno. Na przykład możesz mieć obraz o rozmiarze 500 KB, który chcesz wyświetlić na swojej stronie internetowej, ale pobranie 500 KB zajęłoby dużo czasu. Tworzysz więc znacznie mniejszą kopię obrazu, być może czarno-białą lub po prostu wyjątkowo zoptymalizowaną, i umieszczasz to w. lowsrc
lowsrc atrybut został dodany do Netscape Navigator 2.0 do znacznika. Była częścią DOM poziomu 1, ale została następnie usunięta z DOM poziomu 2. Obsługa tego atrybutu była pobieżna, chociaż wiele witryn twierdzi, że jest obsługiwana przez wszystkie nowoczesne przeglądarki. Nie jest przestarzały w HTML4 ani przestarzały w HTML5, ponieważ nigdy nie był oficjalną częścią żadnej ze specyfikacji.
Unikaj używania tego atrybutu i zamiast tego zoptymalizuj swoje obrazy, aby szybko się ładowały. Szybkość ładowania strony jest kluczowym elementem dobrego projektowania stron internetowych, a duże obrazy ogromnie spowalniają strony — nawet jeśli używasz lowsrc atrybut.