width i heightJednymi 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.