Számláló, amely nem borítja fel az elrendezést
Egy külső kép beillesztése egy gondosan felépített weboldalba mindig magában hordozza a veszélyt, hogy megbomlik a kialakított vizuális szerkezet. Amikor a böngésző felépít egy oldalt, minden szövegblokk és grafika helyét kiszámítja, hogy zavartalan olvasási élményt nyújtson.
Ha egy képnek nincsenek kifejezetten megadott méretei, a böngésző nem tudja előre lefoglalni a szükséges helyet. Meg kell várnia, amíg a képfájl teljesen letöltődik, hogy megállapítsa a pontos magasságát és szélességét. Ez a késlekedés okozza az elrendezés elcsúszásaként ismert jelenséget.
A szöveg hirtelen lefelé vagy oldalra ugrik, hogy helyet adjon az újonnan érkezett grafikának. Aki éppen egy cikket olvas, annak ez a hirtelen mozgás nagyon zavaró, és a technikai instabilitás benyomását kelti.
Két szám a HTML-tagben fenntartja a helyet
Az elrendezés elcsúszásának megelőzése meglepően egyszerű: rögzített attribútumokat kell közvetlenül a HTML-kódba írni. Minden képtag elfogad egy pixelben megadott magasság- és szélességértéket. Ha ezek a méretek már a forráskódban szerepelnek, a böngésző azonnal tudja, pontosan mennyi üres helyet kell lefoglalnia a képernyőn, még mielőtt maga a képfájl letöltése elkezdődne.
A hely teljesen üres marad, amíg a grafika meg nem érkezik, így a környező szöveg szilárdan a helyén marad. A helyes méretekhez a katalógusból kiválasztott konkrét dizájnt kell megnézni.
Minden dizájnnak pontos, állandó mérete van. Ha ezeket a pontos számokat beírja a kódba, az ugrálás teljesen megszűnik. Így az oldal a hálózat sebességétől függetlenül simán, megszakítás nélkül töltődik be.
Mi jelenik meg, ha a kép nem
Ha a hálózati kapcsolat akadozik vagy teljesen megszakad, a hiányzó kép csúnya, törött ikont hagyhat a képernyőn. Ennek elegáns kezelésében az alternatív szöveg attribútuma, az úgynevezett alt attribútum játszik döntő szerepet.
Ha a kép nem jeleníthető meg, a böngésző helyette az ebben az attribútumban megadott szöveget mutatja. Egy tisztán díszítő vagy technikai elemnél, amilyen a látogatószámláló, ezt a szöveget nagyon röviden kell tartani, vagy teljesen üresen kell hagyni: két idézőjel, szóköz nélkül egymás mellett.
Egy hosszú, leíró alternatív szöveg kiszámíthatatlan módon megnyújtja a lefoglalt dobozt, ha a kép nem töltődik be. Egy üres attribútum egyszerűen üres, feltűnés nélküli helyet hagy, és megőrzi a lábléc vagy az oldalsáv szerkezetét.
Szándékosan utoljára betöltve
A modern webes szabványok további eszközöket kínálnak annak szabályozására, hogyan befolyásolják a külső grafikák a dokumentum teljes betöltési sebességét. Két attribútum, a loading és a decoding, jelzi a böngészőnek, mekkora elsőbbséget adjon a képnek.
A loading attribútum lazy értéke arra utasítja a böngészőt, hogy csak akkor kérje le a fájlt, amikor az olvasó ténylegesen a közelébe görget. A decoding attribútum async értéke lehetővé teszi, hogy a böngésző a főszöveget és az elrendezést anélkül dolgozza fel, hogy megvárná a képadatok teljes értelmezését.
Mivel egy statisztikai grafika ritkán a legfontosabb információ egy plébánia vagy egyesület oldalán, ezek az attribútumok biztosítják, hogy mindig a tényleges tartalom jelenjen meg először. A mérőeszköz csendben, a háttérben foglalja el a helyét, és sosem lassítja le a fő üzenet eljuttatását.