Брояч, който не разваля оформлението
Включването на външно изображение в грижливо изградена уеб страница винаги носи риск да се наруши установената визуална структура. Когато браузърът изгражда страницата, той изчислява позицията на всеки текстов блок и всяка графика, за да осигури плавно четене.
Ако за изображението не са зададени изрично размери, браузърът не може предварително да запази нужното място. Той трябва да изчака файлът с изображението да се изтегли изцяло, за да определи точната му височина и ширина. Това забавяне предизвиква явление, известно като разместване на оформлението.
Текстът внезапно подскача надолу или встрани, за да направи място на току-що пристигналата графика. За всеки, който се опитва да прочете статия, това внезапно движение е силно смущаващо и създава впечатление за техническа нестабилност.
Две числа в тага запазват мястото
Решението срещу разместването на оформлението е забележително просто: към HTML кода направо се добавят фиксирани атрибути. Всеки таг за изображение може да получи конкретна стойност за височина и ширина в пиксели. Когато тези размери са обявени предварително в изходния код, браузърът веднага знае точно колко празно място да запази на екрана, още преди самият файл с изображението да започне да се изтегля.
Мястото остава напълно празно, докато графиката пристигне, и околният текст стои здраво закотвен на мястото си. За да се намерят правилните размери, трябва да се погледне конкретният дизайн, избран от каталога.
Всеки дизайн има точен, непроменлив размер. Вписването на тези точни числа в кода премахва изцяло подскачането. Това гарантира плавно, непрекъснато зареждане на страницата независимо от скоростта на мрежата.
Какво се показва, когато изображението не се появи
Когато мрежовата връзка засича или прекъсне напълно, липсващото изображение може да остави на екрана грозна икона на повредена картинка. За да се избегне това по изящен начин, атрибутът за алтернативен текст, известен като alt атрибут, играе решаваща роля.
Ако изображението не може да бъде показано, браузърът показва вместо него текста, зададен в този атрибут. За чисто декоративен или технически елемент като брояча на посетители този текст трябва да бъде изключително кратък или да остане напълно празен – с две кавички без интервал между тях.
Дългият, описателен алтернативен текст ще разтегне запазеното поле в оформлението по непредвидим начин, ако изображението не се зареди. Празният атрибут просто оставя празно, ненатрапчиво място и запазва целостта на структурата на долния колонтитул или страничната лента.
Зарежда се последен – нарочно
Съвременните уеб стандарти предлагат допълнителни средства за контрол върху това как външните графики влияят на общата скорост на зареждане на документа. Два конкретни атрибута, loading и decoding, указват на браузъра какъв приоритет да даде на изображението.
Задаването на атрибута loading със стойност lazy указва на браузъра да отложи изтеглянето на файла, докато читателят действително не превърти надолу близо до мястото му. Задаването на атрибута decoding със стойност async позволява на браузъра да обработи основния текст и оформлението, без да чака данните на изображението да бъдат напълно интерпретирани.
Тъй като една статистическа графика рядко е най-важната информация на страницата на енория или клуб, тези атрибути гарантират, че същинското съдържание винаги се появява първо. Инструментът за измерване тихо заема мястото си на заден план и никога не забавя доставянето на основното послание.