Obrazy, wstawianie obrazów
Obrazy odgrywają kluczową rolę w tworzeniu atrakcyjnych i angażujących stron internetowych. Również, podobnie jak nagłówki czy akapity i linki stanowią bardzo ważne treści w kontekście optymalizacji strony internetowej pod kątem SEO. Wstawianie obrazów w HTML jest proste i odbywa się za pomocą tagu <img>.
Atrybuty podstawowe
Należy zwrócić uwagę, na to, że tag <img> wymaga dwóch podstawowych atrybutów:
src– określa ścieżkę (lokalną lub zdalną) do pliku obrazu. Może to być ścieżka względna (względem bieżącego pliku) lub bezwzględna (URL do obrazu na innym serwerze).alt– opis tekstowy obrazu, który jest wyświetlany, gdy obraz nie może być wczytany lub jest używany przez czytniki ekranowe dla osób niedowidzących.
Przykład użycia podstawowych atrybutów:
<img src="obraz.jpg" alt="Przykładowy obraz">
<img src="https://www.example.com/images/logo.png" alt="Logo firmy">Atrybuty rozmiaru
Następnie możemy określić rozmiar obrazu, w tym celu używamy atrybutów width — szerokość i height — wysokość. Podając wartości w pikselach, określamy wymiary obrazu na stronie. Warto zaznaczyć, że zmiana rozmiaru obrazu w HTML nie wpływa na rozmiar pliku.
Przykład użycia atrybutu rozmiaru obrazu:
<img src="obraz.jpg" alt="Przykładowy obraz" width="300" height="200">Responsywność
Zdecydowanie warto tworzyć strony WWW, które będą dostosowane do różnych ekranów. Jednak, aby obrazy były responsywne i dostosowywały się do szerokości ekranu, można użyć atrybutu style z wartością max-width: 100%; oraz height: auto;. Pozwoli to na skalowanie obrazu proporcjonalnie do rozmiaru okna przeglądarki.
Przykład użycia dodanie responsywności obrazu:
<img src="obraz.jpg" alt="Przykładowy obraz" style="max-width: 100%; height: auto;">Zdecydowanie lepszą metodą niż stosowanie atrybutu style w tagu odpowiedzialnym za obrazek jest dodanie odpowiednich reguł CSS dla obrazów w arkuszu stylów. Co więcej, taki kod może odnosić się do wszystkich obrazków na stronie.
Przykład użycia styli:
img {
max-width: 100%;
height: auto;
}Powyższy kod może być wstawiony w sekcji head strony za pomocą styli wewnętrznych lub zewnętrznych. Więcej informacji na ten temat znajdziesz w dziale style zewnętrzne, wewnętrzne, inline.
Warto zapamiętać
Wstawianie obrazów na stronach internetowych pozwala twórcom na przyciągnięcie uwagi użytkowników, ilustrowanie treści i budowanie bardziej atrakcyjnych witryn. Zrozumienie podstawowych atrybutów tagu <img> oraz umiejętność tworzenia responsywnych obrazów są kluczowe dla twórców stron.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
