Dodawanie obrazków do strony internetowej jest kluczowe dla uatrakcyjnienia jej wyglądu i przekazania treści w bardziej wizualny sposób. Jeśli zastanawiasz się, jak wstawić zdjęcie HTML, ten przewodnik jest dla Ciebie. Przeprowadzimy Cię krok po kroku przez proces wstawiania obrazka HTML, omówimy znacznik <img>, atrybut src, oraz inne ważne elementy, takie jak atrybut alt i optymalizacja obrazów.
Wprowadzenie do znaczników obrazów w HTML
W HTML do wstawienia zdjęcia używamy elementu <img>. Jest to znacznik, który pozwala na wyświetlenie obrazka w dokumencie HTML bez potrzeby zamykania go parą znaczników. Wstawianie obrazka HTML jest więc proste, ale wymaga zrozumienia kilku kluczowych atrybutów.
Podstawowe użycie tagu <img>
Atrybut src i jego wartość
Atrybut src (source) wskazuje na wartość atrybutu src, czyli lokalizację pliku obrazka. Może to być ścieżka względna lub absolutna, a nawet adres URL zewnętrznego zasobu.
Przykład kodu:
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="folder/img/obrazek.jpg" alt="Opis obrazka">
W powyższym kodzie:
src – określa ścieżkę dostępu do pliku graficznego.
alt – atrybut alt zawiera opis obrazka, który jest ważny dla dostępności i SEO.
Opis obrazka za pomocą atrybutu alt
Atrybut alt dostarcza tekst alternatywny dla obrazka. Jest to kluczowe w przypadku problemów z ładowaniem obrazów oraz dla osób korzystających z czytników ekranu.
Ustawianie rozmiarów obrazka
Atrybuty width i height
Aby kontrolować rozmiar obrazka, używamy atrybutów width i height. Możemy je określić w pikselach lub procentach.
Przykład kodu:
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" loading="lazy" decoding="async" data-src="folder/img/obrazek.jpg" alt="Opis obrazka" width="600" height="400">
Używanie img width height do skalowania
Kiedy chcemy zachować proporcje obrazka, wystarczy podać jeden wymiar. Przeglądarka automatycznie dostosuje drugi.
Przykład kodu:
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="folder/img/obrazek.jpg" alt="Opis obrazka" width="600">
Tutaj img width jest ustawiony na 600 pikseli, a wysokość zostanie dostosowana proporcjonalnie.
Zaawansowane techniki
Tag <picture> w HTML5
HTML5 wprowadził tag <picture>, który pozwala na wyświetlanie różnych obrazków w zależności od warunków, takich jak rozdzielczość ekranu.
Przykład:
<picture>
<source srcset="obrazek.webp" type="image/webp">
<source srcset="obrazek.jpg" type="image/jpeg">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="obrazek.jpg" alt="Opis obrazka">
</picture>
Semantyczne grupowanie z tagiem <figure>
Tag <figure> służy do grupowania obrazka z podpisem za pomocą <figcaption>.
Przykład:
<figure>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="folder/img/obrazek.jpg" alt="Opis obrazka">
<figcaption>Podpis obrazka</figcaption>
</figure>
Optymalizacja obrazów dla lepszej wydajności
Kompresja obrazów
Kompresja obrazów jest kluczowa dla zmniejszenia rozmiaru pliku i przyspieszenia ładowania obrazów. Można używać narzędzi online lub programów graficznych.
Nowoczesne formaty, takie jak WebP
WebP to nowy format oferujący lepszą kompresję bez utraty jakości. Użycie go może znacząco zmniejszyć rozmiar pliku obrazka. Aby dowiedzieć się więcej o tym formacie, odwiedź oficjalną dokumentację WebP.
Lazy loading obrazów
Lazy loading to technika, która opóźnia ładowanie obrazów niewidocznych dla użytkownika, co poprawia czas ładowania strony.
Przykład kodu:
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="folder/img/obrazek.jpg" alt="Opis obrazka" loading="lazy">
Najlepsze praktyki w organizacji plików
Struktura folderu img
Wszystkie obrazki warto trzymać w jednym miejscu, np. w folderze img. Ułatwia to zarządzanie plikami i ścieżkami dostępu.
Poprawna ścieżka dostępu i nazwa pliku obrazka
Używaj czytelnych nazw plików, np. “logo-firmy.png”. Nazwę pliku obrazka powinna odzwierciedlać jego zawartość, co pomaga w SEO.
Praktyczne przykłady
Wstawianie zdjęcia HTML z lokalnego źródła
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iMzAwIiB2aWV3Qm94PSIwIDAgNTAwIDMwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" loading="lazy" decoding="async" data-src="folder/img/obrazek.jpg" alt="Opis obrazka" width="500" height="300">
Wstawianie zdjęcia HTML z zewnętrznego adresu URL
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDQiIGhlaWdodD0iNTMiIHZpZXdCb3g9IjAgMCAxNDQgNTMiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OiAwLjE7Ii8+PC9zdmc+" width="144" height="53" decoding="async" data-src="https://www.przyklad.pl/obrazek.jpg" alt="Opis obrazka">
Wstawianie obrazka HTML z użyciem atrybutów width i height
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="folder/img/obrazek.jpg" alt="Opis obrazka" width="50%" height="auto">
Wstawianie obrazka HTML przy użyciu tagu <picture>
<picture>
<source srcset="folder/img/obrazek.webp" type="image/webp">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="folder/img/obrazek.jpg" alt="Opis obrazka">
</picture>
FAQ: Pytania i odpowiedzi
Aby wstawić zdjęcie w HTML, użyj znacznik img z atrybutami src i alt. Atrybut src wskazuje lokalizację obrazka, a atrybut alt dostarcza opis.
Atrybut src określa ścieżkę dostępu do pliku obrazka. Wartość atrybutu src może być ścieżką względną, bezwzględną lub adresem URL.
Opis obrazka powinien być krótki i precyzyjny, opisujący zawartość obrazka. Jest to ważne dla dostępności i SEO.
Atrybuty width i height kontrolują szerokość i wysokość obrazka. Img width height pozwala na skalowanie obrazka do pożądanych rozmiarów.
Tag picure pozwala na wyświetlanie różnych wersji obrazka w zależności od urządzenia, co jest przydatne w responsywnym designie.
Optymalizacja obrazów poprzez kompresję obrazów i użycie formatów takich jak WebP zmniejsza rozmiar pliku, co przyspiesza ładowanie obrazów i poprawia czas ładowania strony.
Lazy loading opóźnia ładowanie obrazów niewidocznych dla użytkownika. Wystarczy dodać loading=”lazy” do tagu <img>.
Trzymaj obrazki w folderze img i używaj jasnych nazw plików. Ułatwia to zarządzanie i zapewnia, że plik obrazka zostanie poprawnie odnaleziony.
Niepoprawna ścieżka dostępu w atrybucie src.
Brak atrybutu alt.
Zbyt duży rozmiar pliku obrazka.
Strona MDN Web Docs oferuje szeroki zakres informacji i przykładów dotyczących tagu <img> i innych elementów HTML.
Podsumowanie
Wiedza o tym, jak wstawić zdjęcie HTML, jest podstawą w tworzeniu atrakcyjnych stron internetowych. Poprzez zrozumienie działania znacznika img, atrybutu src, oraz innych atrybutów, możesz efektywnie dodawać i optymalizować obrazki. Pamiętaj o najlepszych praktykach, takich jak organizacja folderu img, używanie atrybutów width i height oraz nowoczesnych technik jak Lazy loading i format WebP.
Poznanie sposobów na wstawianie obrazów to tylko jedna z umiejętności potrzebnych do tworzenia stron internetowych. Jeśli chcesz dowiedzieć się więcej o HTML i poznać inne kluczowe znaczniki, zapraszamy do lektury naszego artykułu: