Obraz HTML – Szerokość i Wysokość
width i height
Jednymi z bardziej istotnych atrybutów elementu <img> są parametry jego rozmiaru, czyli szerokość (ang. width) oraz wysokość (ang. height).
<img src="how2html.png" width="119" height="51">
Szerokość oraz wysokość elementu <img> wyrażana jest w pikselach (px), dlatego wystarczy wpisać wartości liczbowe. Skąd natomiast możemy pozyskać te wartości?
Możemy to zrobić na kilka sposobów. Wymiary obrazu możemy sprawdzić otwierając go w programie graficznym zazwyczaj w zakładce o nazwie „Rozmiar Obrazu”.
Prostszym i szybszym sposobem na poznanie dokładnego rozmiaru obrazu jest kliknięcie prawym przyciskiem myszy na obrazie i wybranie opcji „Właściwości”, a następnie zakładki „Szczegóły”. Tam wszystkie dane obrazu mamy jak na dłoni.
Niezależnie od tego, czy uzupełnimy atrybuty width oraz height, obraz i tak zostanie wyświetlony w swoich naturalnych rozmiarach. Jest to również częstą przyczyną pomijania tego atrybutu przez wielu webdeveloperów. To po co w zasadzie uzupełniać te atrybuty, skoro obraz i tak zostanie prawidłowo wyświetlony?
Przeglądarka nie zna rozmiarów obrazu dopóki nie zostanie on pobrany w całości. Przekazując jego rozmiary w atrybutach width oraz height, pomagamy przeglądarce określić ile miejsca ma zarezerwować na wyświetlenie tych obrazów, jak już zostaną pobrane. Pomaga to unikać zmian w rozkładzie strony podczas jej ładowania, poprzez rezerwacje miejsca.
Może zdarzyć się również taka sytuacja, w której obraz nie zostanie wyświetlony w ogóle, np. ze względu na to że ktoś go usunął i przeglądarka nie może go odnaleźć. Używając atrybutów width oraz height unikniemy sytuacji zaburzenia rozkładu strony,co prawda obraz nie zostanie wyświetlony, ale miejsce zostanie zarezerwowane.
Dla przykładu dodajmy element <img> z nieistniejącą ścieżką dostępu w atrybucie src, np. logo.png. I rozważmy dwa przypadki jeden z atrybutami width oraz height oraz bez tych atrybutów.
<img src="logo.png">
<img src="logo.png" width="119" height="51">
Szara ramka dookoła ikonki pustego elementu <img> określa jego rozmiar, w pierwszym przypadku jest ona tak ciasna, że prawie niewidoczna. W drugim przypadku natomiast ramka ta odzwierciedla podany przez nas rozmiar w pikselach.
Atrybutów width i height możemy jedynie używać do określania rozmiarów elementu <img> do określania rozmiarów innych elementów html, będziemy używać języka CSS.