Znacznik ten zawsze jest stosowany z atrybutem src, którym jest adres do grafiki, która ma być wstawiona na stronie. Możliwe jest również ustawienie następujących atrybutów tego znacznika:
alt - tekst alternatywny, który zostanie wyświetlony jeżeli obraz będzie niedostępny. Zaleca się korzystanie z tego znacznika, jako opisu grafiki na stronie dla przeglądarek internetowych, które lubują się w ich czytaniu;
width - określa szerokość obrazka (nie zalecane jest jego używanie, lepiej jest wstawiać grafikę o żądanych wymiarach na stronie);
height - określa wysokość obrazka (nie zalecane jest jego używanie, lepiej jest wstawiać grafikę o żądanych wymiarach na stronie);
W powyższym przykładzie obrazek został wyśrodkowany za pomocą dwóch stylów:
display:block;margin: auto
Atrybutów width i height warto używać do responsywnego dostosowania szerokości obrazka do strony. Oto przykład z wykorzystaniem zamiast wcześniej wymienionych atrybutów, atrybutu style z odpowiednimi stylami CSS:
Animacja przejścia z wykorzystaniem filtru graficznego
Poniższy kod sprawi, że grafika będzie wyświetlana jako czarno-biała, a po najechaniu kursorem myszy zacznie się jedno sekundowe przejście od czarno-białego do w pełni kolorowego obrazu:
<style>
img.gray
{
-webkit-filter: grayscale(100%); /* filtr grayscale dla Safari 6.0 - 9.0 */
filter: grayscale(100%); /* filtr grayscale dla reszty przeglądarek */
transition-property: filter; /* ustawienie, dla jakich elementów będzie wykonywana animacja przejścia */
transition-duration: 1s; /* czas animacji */
transition-timing-function: linear; /* sposób realizacji animacji - liniowy */
}
img.gray:hover /* zdarzenie najechania kursora myszy na znacznik img z atrybutem class = "gray" */
{
-webkit-filter: grayscale(0%); /* docelowa wartość animacji dla filtra gray (Safari 6.0 - 9.0) */
filter: grayscale(0%); /* docelowa wartość animacji dla filtra gray */
}
</style>
<img class="gray" src="rysunki/Panorama.jpg" alt="panorama" style="display:block;margin: auto; width: 50%;height: 50%; border: 1px solid #aaaaaa;border-radius: 50%;padding: 5px;box-shadow: 0 0 10px 10px rgba(200, 200, 200, 0.5);"/>