Podczas tworzenia strony internetowej za pomocą HTML, znacznik obrazu służy do wstawienia zdjęcia lub grafiki w określonym miejscu na stronie. Istnieje wiele sposobów wykorzystania obrazów na stronach internetowych, od zwiększania zainteresowania do używania jako narzędzia nawigacyjnego lub dostarczania informacji. Istnieje również kilka różnych formatów obrazów, których można użyć. Bez względu na to, jak i jaki obraz jest dodawany do strony internetowej, zawsze wymagany jest tag obrazu.
Aby dodać obraz, tag obrazu znajduje się w miejscu, w którym ma się on pojawić na stronie. Na przykład, jeśli obraz miałby zostać wstawiony po tym akapicie, znacznik obrazu lub , zostanie dodany do dokumentu HTML po tym akapicie. Tag definiuje wszystkie obrazy w HTML. Nazywa się go pustym znacznikiem, ponieważ zawiera atrybuty i nie ma znacznika zamykającego. Atrybuty to opcje dostępne dla określonego znacznika HTML.
Gdyby tylko zostały dodane do dokumentu HTML, nic nie zostanie pokazane, ponieważ atrybuty znacznika nie zostały uwzględnione. Najważniejszy atrybut dla to „src”, co oznacza źródło. Atrybut src określa, gdzie faktycznie znajduje się plik obrazu, lub jest to adres pliku obrazu. Ponieważ obraz jest używany na stronie internetowej, lokalizacja obrazu zostanie podana jako adres URL. W dokumencie HTML obraz wyglądałby tak: .
W szczególności adres URL wskazuje, gdzie obraz jest przechowywany. Na przykład, jeśli obraz komputera o nazwie pliku computer.jpg był przechowywany w folderze obrazów na stronie www.Popeye and Cloudy.com, adres URL zostanie zastąpiony: . Gdy przeglądarka otwiera stronę internetową, wyświetla obraz, w którym znajduje się tag obrazu.
Tag obrazu ma wiele innych różnych atrybutów. Pozwalają użytkownikowi dostosować wygląd obrazu na stronie. Następujące atrybuty są powszechnie używane dla tego znacznika: alt, border, size i align.
Atrybut alt oznacza tekst alternatywny i jest wyświetlany, jeśli przeglądarka nie może wyświetlić obrazu. Również tekst alternatywny jest odczytywany dla tych użytkowników, którzy mają problemy ze wzrokiem i decydują się wyświetlać tekst na obrazach. W powyższym przykładzie tekst alternatywny można określić jako alt = „obraz komputera”.
Atrybut border dodaje obramowanie do obrazu o grubości zależnej od podanej liczby pikseli. Może to być szczególnie przydatne, gdy tło obrazu i tło strony internetowej są podobne i pożądane jest wyraźne rozróżnienie. Na przykład border=”10″ umieści wokół obrazu obramowanie o grubości 10 pikseli.
Atrybuty rozmiaru są również ważne, ponieważ szerokość i wysokość mogą być użyte do określenia dokładnego rozmiaru obrazu. Z atrybutów tych należy korzystać bardzo ostrożnie, ponieważ ich zmiana może wpłynąć na proporcje lub jakość wyświetlanego obrazu. Atrybuty rozmiaru nie zmieniają rzeczywistego pliku, tylko sposób wyświetlania go przez przeglądarkę.
Atrybut align określa sposób wyrównania obrazu w porównaniu z tekstem na stronie. Istnieje kilka różnych możliwości wyboru tego atrybutu, w tym góra, dół, środek, lewy, prawy, absmiddle, absbottom, base i texttop. Tagi te pomagają również określić, w jaki sposób tekst na stronie jest wyrównany z obrazem.