Dodanie zdjęcia do strony internetowej stworzonej w HTML może znacząco wzbogacić jej wygląd i treść. Prawidłowe osadzenie grafiki wymaga jednak znajomości odpowiednich tagów i atrybutów. Poniższy artykuł wyjaśnia krok po kroku, jak wstawić zdjęcie do kodu HTML.
## Jak dodać zdjęcie do kodu HTML?
Aby dodać zdjęcie do strony HTML, należy użyć tagu img. Tag ten nie posiada zamykającego znacznika końcowego, ponieważ służy jedynie do osadzania grafiki. Podstawowa składnia wygląda następująco:
W atrybucie src podajemy ścieżkę do pliku graficznego. Może to być ścieżka względna np. "zdjecia/grafika.jpg" lub bezwzględna zaczynająca się od protokołu http lub https. Wartość atrybutu alt to tekst alternatywny wyświetlany w przypadku, gdy grafika nie może zostać załadowana. Powinien on krótko opisywać, co przedstawia zdjęcie.
### Jakie rozszerzenia plików ze zdjęciami są obsługiwane?
Najpopularniejsze formaty graficzne obsługiwane przez przeglądarki internetowe to JPEG, PNG oraz GIF. Pliki te powinny mieć odpowiednio rozszerzenia: .jpg, .png oraz .gif. Starsze przeglądarki mogą nie obsługiwać plików w formacie WEBP o rozszerzeniu .webp.
### Tag IMG do osadzania grafiki w kodzie strony
Tag img służy wyłącznie do osadzania obrazów. Nie można umieszczać w nim żadnych innych elementów HTML ani tekstu. Jeśli chcemy opatrzyć grafikę dodatkowym opisem, musimy umieścić ją wewnątrz akapitu <p> lub innego kontenera i dodać tekst obok niej.
Przykład:
Powyżej znajduje się zdjęcie przedstawiające...
### Ustawianie szerokości i wysokości grafiki za pomocą atrybutów
W tagu img możemy określić szerokość i wysokość wczytywanego obrazka za pomocą atrybutów width i height. Pozwoli to przeglądarce wcześniej zarezerwować odpowiedni obszar na stronie.
Przykład ustawienia wymiarów na 200 x 100 pikseli:
### Jak ustawić alternatywny tekst dla zdjęcia?
Atrybut alt służy do dodania krótkiego opisu zdjęcia. Jest on wyświetlany, gdy obraz nie może zostać załadowany lub gdy użytkownik najedzie na niego kursorem myszy. Powinien w zwięzły sposób informować o zawartości grafiki.
Przykład alternatywnego tekstu:
### Jak dodać obramowanie i odstępy wokół zdjęcia?
Styl obramowania i odstępów od krawędzi obrazka można zdefiniować w CSS. W tym celu należy nadać zdjęciu identyfikator lub klasę i ustawić odpowiednie właściwości, takie jak border, margin czy padding.
Przykład stylu CSS:
```css img { border: 1px solid black; margin: 10px; padding: 5px; } ``` ### Dostosowywanie stylu zdjęcia za pomocą CSS
Za pomocą kaskadowych arkuszy stylów CSS można dowolnie formatować wygląd zdjęcia na stronie. Oprócz wspomnianych wcześniej właściwości obramowania i odstępów, warto wymienić m.in. możliwość określenia zaokrąglenia narożników (border-radius), cienia (box-shadow) czy przejścia najechania kursorem (transition).
### Optymalizacja zdjęć przed umieszczeniem w kodzie HTML
Bardzo ważne przed dodaniem zdjęć do strony internetowej jest ich optymalizacja. Obejmuje ona m.in.: - zmniejszenie rozmiaru pliku przy zachowaniu jakości, - zamiana na format JPEG dla zdjęć lub PNG dla grafiki wektorowej, - ustawienie poprawnej rozdzielczości, - kompresja i redukcja metadanych.
Pozwoli to przyspieszyć ładowanie strony oraz zmniejszyć koszty transferu danych.
Podsumowanie
Dodanie zdjęć do strony HTML nie jest skomplikowane, wymaga jednak znajomości kilku podstawowych zasad. Należy prawidłowo dobrać format pliku graficznego, zoptymalizować jego rozmiar i jakość a następnie umieścić w kodzie za pomocą tagu img. Warto zadbać o alternatywny tekst i w razie potrzeby dostosować styl obramowania i wygląd obrazka. Zdjęcia mogą znacząco wzbogacić treść i wygląd witryny internetowej.
Tagi
Udostępnij
