Počítadlo, které nerozbije rozvržení

Začlenění externího obrázku do pečlivě sestavené webové stránky vždy nese riziko, že naruší zavedenou vizuální strukturu. Když prohlížeč sestavuje stránku, vypočítává polohu každého textového bloku a každé grafiky, aby se text četl plynule.

Pokud obrázek nemá výslovně uvedené rozměry, prohlížeč pro něj nemůže předem vyhradit potřebné místo. Musí počkat, až se soubor obrázku celý stáhne, aby zjistil jeho přesnou výšku a šířku. Toto zpoždění způsobuje jev zvaný posun rozvržení.

Text náhle poskočí dolů nebo do strany, aby uvolnil místo nově dorazivší grafice. Pro každého, kdo se snaží číst článek, je tento náhlý pohyb velmi rušivý a vyvolává dojem technické nestability.

Dvě čísla ve značce drží místo

Řešení, jak posunům rozvržení zabránit, je pozoruhodně jednoduché a spočívá v přidání pevných atributů přímo do HTML kódu. Každá značka obrázku může mít zadanou výšku a šířku v pixelech. Když jsou tyto rozměry uvedeny předem ve zdrojovém kódu, prohlížeč hned ví, kolik prázdného místa má na obrazovce vyhradit, ještě než se soubor obrázku začne stahovat.

Místo zůstává prázdné, dokud grafika nedorazí, a okolní text tak zůstává pevně na svém místě. Správné rozměry zjistíte u konkrétního designu, který jste vybrali z katalogu.

Každý design má přesnou, neměnnou velikost. Zapsáním těchto přesných čísel do kódu poskakování úplně zmizí. Zaručuje to plynulé a nepřerušované načtení stránky bez ohledu na rychlost sítě.

Co se zobrazí, když obrázek ne

Když síťové připojení zakolísá nebo úplně selže, může chybějící obrázek zanechat na obrazovce ošklivou ikonu rozbitého obrázku. Aby se to zvládlo elegantně, hraje zásadní roli alternativní text v atributu alt přímo ve značce obrázku.

Pokud obrázek nelze zobrazit, prohlížeč místo něj ukáže text uvedený v tomto atributu. U čistě dekorativního nebo technického prvku, jako je počítadlo návštěv, by měl být tento text velmi krátký, nebo úplně prázdný – dvě uvozovky bez mezery mezi nimi.

Dlouhý popisný alternativní text nepředvídatelně roztáhne vyhrazený rámeček rozvržení, pokud se obrázek nenačte. Prázdný atribut prostě ponechá prázdné, nenápadné místo a zachová strukturu patičky nebo bočního sloupce.

Načteno naposled, záměrně

Moderní webové standardy nabízejí další nástroje, jimiž lze řídit, jak externí grafika ovlivňuje celkovou rychlost načítání dokumentu. Dva konkrétní atributy, loading a decoding, určují, jakou prioritu má prohlížeč obrázku dát.

Nastavení atributu loading na hodnotu lazy říká prohlížeči, aby soubor stáhl až ve chvíli, kdy čtenář doroluje do jeho blízkosti. Nastavení atributu decoding na hodnotu async umožní prohlížeči zpracovat hlavní text a rozvržení, aniž by čekal na úplné zpracování dat obrázku.

Protože statistická grafika je na stránce farnosti nebo spolku jen zřídka tou nejdůležitější informací, tyto atributy zajistí, že se skutečný obsah vždy objeví jako první. Měřicí nástroj tiše zaujme své místo v pozadí a nikdy nezpomalí doručení hlavního sdělení.