Znajomość obsługi HTML to konieczność dla osób, które prowadzą własną stronę internetową. Niezależnie od tego, czy robimy to hobbystycznie, czy w celach biznesowych. Dowiedz się, jak w kilku krokach wstawić obrazek w HTML.
Spis treści
Obrazki w HTML – dlaczego są ważne?
Sama ściana tekstu nie jest atrakcyjna wizualnie. Dlatego każda strona internetowa musi uwzględniać zasady UI i UX designu. A te zakładają zarówno odpowiednią strukturę strony i rozmieszczenie tekstu, jak i obecność grafik. Stanowią one pewnego rodzaju oddech w treści oraz wizualizację produktów, usług, czy określonych sytuacji. Powinny znaleźć się szczególnie na blogach, w artykułach i w sklepach internetowych. Jednak aby wspierały wyświetlenia, muszą zostać umieszczone w poprawny sposób. Czyli jaki?
Jak wstawić obrazek w HTML?
Wszelkie zmiany w HTML przeprowadzamy w edytorze kodu (w części <body>). Oczywiście, najpierw musimy sobie odpowiednio przygotować grafikę, którą chcemy umieścić na stronie.
- Najlepiej zacząć od zapisania obrazka w folderze z naszą stroną. Dla porządku warto utworzyć osobny folder, np. images, i właśnie tam wrzucić plik graficzny. Dzięki temu później łatwiej będzie wskazać jego lokalizację w kodzie.
- Kiedy mamy już przygotowany obrazek, otwieramy plik HTML i przechodzimy do miejsca w sekcji <body>, w którym grafika ma się wyświetlić. To może być na przykład pod nagłówkiem, pod akapitem tekstu albo pomiędzy innymi elementami strony.
- Aby dodać obrazek, używamy znacznika <img>. Jest to specjalny element HTML, który służy właśnie do wyświetlania grafik. W jego środku podajemy dwa najważniejsze atrybuty:- src – czyli ścieżkę do pliku,- alt – czyli krótki opis obrazka.
Przykłady kodu HTML z obrazkami
Przykładowy zapis obrazka w kodzie HTML wygląda tak:
<img src=”images/kot.jpg” alt=”Róże wsadzone do wazonu”>
Rozłóżmy to na czynniki pierwsze.
- images/kot.jpg oznacza, że plik kot.jpg znajduje się w folderze images,
- alt zawiera opis obrazka, który jest przydatny wtedy, gdy grafika się nie załaduje albo gdy ktoś korzysta z czytnika ekranu.
Po wpisaniu takiego kodu zapisujemy plik HTML i otwieramy stronę w przeglądarce. Jeżeli wszystko zostało wpisane poprawnie, obrazek powinien pojawić się w wybranym miejscu.
Problemy z wyświetlaniem obrazka w HTML
Po tych krokach grafika powinna się wyświetlać na stronie. Jeśli tak nie jest, może to oznaczać problemy ze ścieżką do pliku. Wtedy warto sprawdzić:
- poprawność nazwy obrazka w kodzie z nazwą pliku;
- umieszczenie pliku w odpowiednim folderze,
- zgodność rozszerzenia, np. .jpg albo .png.
Umieszczenie obrazka w HTML w kilku krokach
Czyli podsumowując, cały proces:
- Przygotowujemy obrazek.
- Umieszczamy go w folderze projektu, np. images.
- Otwieramy plik HTML w edytorze kodu.
- W sekcji <body> wpisujemy znacznik <img>.
- Uzupełniamy src i alt.
- Zapisujemy plik i sprawdzamy efekt w przeglądarce.
Obraz w HTML – jak zadbać o SEO?
Wspomniany wcześniej alt to jeden z najważniejszych elementów obrazu w HTML z punktu widzenia SEO. To właśnie on pomaga wyszukiwarce lepiej zrozumieć, co znajduje się na grafice, a jednocześnie poprawia dostępność strony dla użytkowników korzystających z czytników ekranu. Tworzący opis alternatywny, pamiętaj, by był konkretny i naturalny. Nie warto wpisywać tam przypadkowych słów kluczowych ani sztucznie upychać fraz, ponieważ taki zapis wygląda nienaturalnie i nie poprawia jakości strony. Znacznie lepiej krótko opisać to, co rzeczywiście widać na obrazku. Mając na uwadze SEO, warto także:
- Wybrać zdjęcie pasujące do kontekstu treści.
- Dopasować nazwę pliku. Musi być czytelna dla wyszukiwarki.
- Zmniejszyć rozmiar grafiki. Nie powinna być zbyć ciężka, by nie spowalniać strony. Warto zatem skompresować ją przed dodaniem.
- Wybrać odpowiedni format grafiki. Zwykle jest to JPG i WebP, lub PNG w przypadku grafik z przeźroczystym tłem.
- Ustawić atrybuty width i height. Dzięki nim przeglądarka wie wcześniej, ile miejsca ma zarezerwować na obrazek. Pomaga to utrzymać stabilny układ strony podczas ładowania.
