Nie zmuszaj do czekania na obrazki

Między pozornie bardzo podobnymi zapisami

<img src="/images/butt/lft_mieszkania.gif">

i (podobny zapis znajdziesz w źródłach tej strony)

<img src="/images/butt/lft_mieszkania.gif" width="140" height="48">

istnieje spora różnica. I nie dotyczy ona ewentualnego przeskalowania obrazka gdyby miał inny rozmiar (skalowanie przeglądarką nie ma sensu, program graficzny zrobi to lepiej). Powyższy przycisk ma 140 pixeli szerokości i 48 grubości.

Róznica leży w czasie, jaki użytkownik czeka na załadowanie strony i jest łatwa do przeoczenia przy testach w szybkiej sieci lokalnej. Gdy podamy rozmiary obrazka, przeglądarka może ustalić rozmieszczenie poszczególnych elementów na stronie i wyświetlić stronę jeszcze przed jego ściągnięciem. Gdy ich nie podamy, przeglądarka musi ściągnąć obrazek przed wyświetleniem strony - by wiedzieć, jak będzie ona skonstruowana.

Proponuję prosty eksperyment: kliknij Shift-Reload (czy też Shift-Odśwież) i zaobserwuj co się dzieje. Treść tej strony powinna pojawić się od razu, a obrazki po kolei później, w miarę jak przeglądarka zdąży je ściągnąć. Gdybym nie podał rozmiarów obrazków, wpatrywałbyś/wpatrywałabyś się w pustą stronę aż do momentu ściągnięcia wszystkich obrazków.

Nowsze wesje Internet Explorera próbują wyświetlać strony jeszcze przed załadowaniem obrazków o nieznanym rozmiarze. Także w tym wypadku rozmiary warto jednak podawać - po załadowaniu obrazka przeglądarka może zmodyfikować układ strony, co dla czytającego jest zdecydowanie nieprzyjemne (tekst, który czytam, nagle ucieka w bok itp).

komentarze obsługiwane przez Disqus