Spis treści
Czytasz teraz:
Jak wstawić obrazek w HTML? Jak dodać grafikę na stronę internetową?
Zamknij
Dodawanie obrazków do stron internetowych to jedna z podstaw tworzenia treści w HTML. Pozwala nie tylko uatrakcyjnić wizualnie stronę, lecz także przekazać dodatkowe informacje użytkownikom i robotom wyszukiwarek.
Wstawianie zdjęć HTML krok po kroku
Aby wstawić obrazek w HTML, wystarczy skorzystać ze znacznika <img>.
Podstawowa składnia wygląda tak:
<img src="sciezka/do/obrazka.jpg" alt="Opis obrazka">Znacznik <img> jest pusty, co oznacza, że nie ma osobnego zamknięcia – wszystkie informacje o obrazie przekazywane są przez atrybuty. Najważniejsze z nich to src oraz alt.
(Dalszą część artykułu znajdziesz pod formularzem)
Wypełnij formularz i odbierz wycenę
Zapoznamy się z Twoim biznesem i przygotujemy indywidualną ofertę cenową na optymalny dla Ciebie mix marketingowy. Zupełnie za darmo.
Administratorem Twoich danych osobowych jest Verseo spółka z ograniczoną odpowiedzialnością z siedzibą w Poznaniu, przy ul. Węglowej 1/3.
O Verseo
Siedziba Spółki znajduje się w Poznaniu. Spółka jest wpisana do rejestru przedsiębiorców prowadzonego przez Sąd Rejonowy Poznań – Nowe Miasto i Wilda w Poznaniu, Wydział VIII Gospodarczy Krajowego Rejestru Sądowego pod numerem KRS: 0000910174, NIP: 7773257986. Możesz skontaktować się z nami listownie na podany wyżej adres lub e-mailem na adres: ochronadanych@verseo.pl
Masz prawo do:
- dostępu do swoich danych,
- sprostowania swoich danych,
- żądania usunięcia danych,
- ograniczenia przetwarzania,
- wniesienia sprzeciwu co do przetwarzania danych osobowych,
- przenoszenia danych osobowych,
- cofnięcia zgody.
Jeśli uważasz, że przetwarzamy Twoje dane niezgodnie z wymogami prawnymi masz prawo wnieść skargę do organu nadzorczego – Prezesa Urzędu Ochrony Danych Osobowych.
Twoje dane przetwarzamy w celu:
- obsługi Twojego zapytania, na podstawie art. 6 ust. 1 lit. b ogólnego rozporządzenia o ochronie danych osobowych (RODO);
- marketingowym polegającym na promocji naszych towarów i usług oraz nas samych w związku z udzieloną przez Ciebie zgodą, na podstawie art. 6 ust. 1 lit. a RODO;
- zabezpieczenia lub dochodzenia ewentualnych roszczeń w związku z naszym uzasadnionym interesem, na podstawie art. 6 ust. 1 lit. f. RODO.
Podanie przez Ciebie danych jest dobrowolne. Przy czym, bez ich podania nie będziesz mógł wysłać wiadomości do nas, a my nie będziemy mogli Tobie udzielić odpowiedzieć.
Twoje dane możemy przekazywać zaufanym odbiorcom:
- dostawcom narzędzi do: analityki ruchu na stronie, wysyłki informacji marketingowych.
- podmiotom zajmującym się hostingiem (przechowywaniem) strony oraz danych osobowych.
Twoje dane będziemy przetwarzać przez czas:
- niezbędny do zrealizowania określonego celu, w którym zostały zebrane, a po jego upływie przez okres niezbędny do zabezpieczenia lub dochodzenia ewentualnych roszczeń
- w przypadku przetwarzanie danych na podstawie zgody do czasu jej odwołania. Odwołanie przez Ciebie zgody nie wpływa na zgodność z prawem przetwarzania przed wycofaniem zgody.
Nie przetwarzamy danych osobowych w sposób, który wiązałby się z podejmowaniem wyłącznie zautomatyzowanych decyzji co do Twojej osoby. Więcej informacji dotyczących przetwarzania danych osobowych zawarliśmy w Polityce prywatności.
Atrybut src HTML
Atrybut src (skrót od source) określa źródło obrazu. Może to być:
- tzw. ścieżka względna, np. images/logo.png, jeśli plik znajduje się w katalogu projektu;
- tzw. ścieżka bezwzględna, np. /assets/logo.png, jeśli odwołujesz się do konkretnego położenia w strukturze serwisu;
- pełny adres URL, np. https://example.com/logo.png, kiedy korzystasz z zewnętrznego źródła.
Jeśli chodzi o linkowanie obrazków z zewnętrznych źródeł, możesz to zrobić, wskazując pełny adres URL – tak jak w ostatnim punkcie.
Pamiętaj jednak, że korzystanie z cudzych zasobów bez zgody jest nieetyczne i może łamać prawa autorskie, a w większej skali zużywać transfer serwera, na którym umieszczono dany plik. Lepszym rozwiązaniem jest umieszczenie plików na własnym serwerze.
Jeśli plik nie zostanie znaleziony, przeglądarka wyświetli pusty obszar lub tekst alternatywny podany w atrybucie alt.
Wstawianie zdjęć HTML i atrybut alt
Atrybut alt nie powinien być lekceważony – wpływa na przyjazność strony dla osób z niepełnosprawnościami oraz ma bardzo duże znaczenia pod względem SEO.
Opis alternatywny jest odczytywany przez czytniki ekranu, a w razie problemu z załadowaniem grafiki informuje użytkownika, co miało się na niej znajdować. Dla robotów Google jest to też istotna wskazówka przy indeksowaniu grafik.
<img src="produkty/buty-biegowe.jpg" alt="Buty do biegania Nike Air Zoom Pegasus 39">Warto tworzyć opisy klarowne i zgodne z zawartością obrazka, ale bez przesadnego nasycania słowami kluczowymi.
Jak zmienić rozmiar obrazka w HTML?
Rozmiar grafiki można regulować za pomocą atrybutów width i height lub – lepiej – stylami CSS.
Przykładowo:
<img src="logo.png" alt="Logo firmy" style="width:200px; height:auto;">Atrybuty HTML zadziałają poprawnie, choć stosowanie CSS daje większą kontrolę i pozwala łatwiej dostosować obrazy do urządzeń mobilnych. W większości przypadków rekomendujemy więc opcję z CSS.
Jak dodać opis do zdjęcia w HTML (figcaption)?
Aby dodać podpis pod zdjęciem, warto użyć semantycznych znaczników <figure> oraz <figcaption>. Taki zapis jest czytelny dla wyszukiwarek i wspomaga SEO:
<figure>
<img src="jezioro.jpg" alt="Jezioro w górach o zachodzie słońca">
<figcaption>Jezioro Smreczyńskie – widok o zachodzie słońca.</figcaption>
</figure>Dzięki temu grafika staje się samodzielnym elementem treści, z opisem, który może pojawiać się w wynikach wyszukiwania obrazów.
Figcaption nie „zastępuje” alt i nie jest wymagane, żeby grafika mogła pojawić się w wynikach wyszukiwania obrazów. Alt i figcaption grają po prostu różne role – ten pierwszy jest jednym z głównych sygnałów, które wyszukiwarki biorą pod uwagę przy indeksowaniu obrazów.
Ten drugi jest normalnie widocznym podpisem pod obrazkiem, elementem treści dla wszystkich, dodaje kontekst redakcyjny (tytuł, komentarz, źródło, data itp.) i jest nieobowiązkowym dodatkiem semantycznym.
Obrazek na stronie internetowej HTML – optymalizacja pod SEO
Oprócz odpowiednich atrybutów warto pamiętać o technicznej optymalizacji obrazów: kompresuj pliki (np. w formacie WebP lub AVIF) przed wstawieniem na stronę. Jeśli używasz JPG lub PNG, skorzystaj z mocniejszej kompresji w programie graficznym:
- stosuj opisowe nazwy plików zamiast IMG_1234.jpg, np. buty-biegowe-nike.jpg;
- dodawaj wymiary obrazów, aby przeglądarka szybciej renderowała układ strony;
- używaj atrybutu loading=”lazy” do opóźnionego wczytywania grafik, co poprawia czas ładowania strony – jeśli korzystasz np. z WordPressa, są od tego odpowiednie wtyczki.
Dobrze przygotowany obrazek to nie tylko kwestia wyglądu, lecz także doświadczenia użytkownika, pozycjonowania i szybkości działania witryny.
Podsumowanie
W powyższym artykule poruszone zostały tematy:
- Obrazy w HTML wstawia się za pomocą pojedynczego znacznika <img> z atrybutami src i alt, co poprawia estetykę oraz czytelność strony dla użytkowników i wyszukiwarek.
- Atrybut src określa źródło obrazu poprzez ścieżkę względną, bezwzględną lub pełny adres URL, przy czym najlepszą praktyką jest przechowywanie plików na własnym serwerze w celu uniknięcia problemów prawnych i technicznych.
- Atrybut alt dostarcza opis alternatywny obrazu, który jest kluczowy dla dostępności stron, poprawnego indeksowania w SEO oraz informowania użytkownika o zawartości grafiki w przypadku błędu jej ładowania.
- Rozmiar obrazka można określić za pomocą atrybutów width i height w HTML, jednak zaleca się stosowanie stylów CSS, które zapewniają lepszą kontrolę nad responsywnością i wyglądem grafiki na różnych urządzeniach.
- Wykorzystanie semantycznych znaczników <figure> i <figcaption> pozwala na dodanie widocznego dla użytkownika podpisu pod zdjęciem, co wzbogaca kontekst treści i poprawia strukturę SEO strony bez zastępowania technicznej roli atrybutu alt.
- Techniczna optymalizacja obrazów poprzez stosowanie nowoczesnych formatów (WebP, AVIF), opisowe nazwy plików oraz atrybut loading=”lazy” znacząco poprawia szybkość ładowania strony, pozycjonowanie w wyszukiwarkach oraz ogólne doświadczenie użytkownika.
