En räknare som inte förstör layouten

Att bygga in en extern bild i en omsorgsfullt uppbyggd webbsida innebär alltid en risk att rubba den etablerade visuella strukturen. När en webbläsare bygger upp en sida beräknar den positionen för varje textblock och varje grafik, så att läsningen flyter smidigt.

Om en bild saknar uttryckliga måttangivelser kan webbläsaren inte reservera det nödvändiga utrymmet i förväg. Den måste vänta tills bildfilen har laddats ner helt för att kunna fastställa dess exakta höjd och bredd. Den fördröjningen orsakar ett fenomen som kallas layoutförskjutning.

Texten hoppar plötsligt nedåt eller åt sidan för att ge plats åt den nyss anlända grafiken. För den som försöker läsa en artikel är den plötsliga rörelsen mycket störande och ger ett intryck av teknisk instabilitet.

Två siffror i taggen håller platsen

Lösningen på layoutförskjutningar är anmärkningsvärt enkel: fasta attribut läggs direkt i HTML-koden. Varje bildtagg kan ta emot ett värde för höjd och bredd, angivet i pixlar. När måtten anges i förväg i källkoden vet webbläsaren direkt exakt hur mycket tomt utrymme som ska reserveras på skärmen, redan innan själva bildfilen börjar laddas ner.

Utrymmet förblir tomt tills grafiken kommer, och den omgivande texten ligger kvar stadigt på sin plats. För att hitta rätt mått behöver du titta på den design du har valt i katalogen.

Varje design har en exakt och oföränderlig storlek. Skriver du in de här exakta siffrorna i koden försvinner hoppeffekten helt. Det garanterar en jämn och obruten sidladdning oavsett nätverkets hastighet.

Det som syns när bilden inte gör det

När en nätverksanslutning hackar eller bryts helt kan en saknad bild lämna en ful, trasig ikon på skärmen. För att hantera det på ett snyggt sätt finns alternativtexten, det så kallade attributet alt i bildtaggen, som spelar en avgörande roll.

Om bilden inte kan visas, visar webbläsaren i stället texten i det här attributet. För ett rent dekorativt eller tekniskt element som en besöksräknare bör texten hållas mycket kort eller lämnas helt tom med två citattecken utan mellanslag emellan.

En lång, beskrivande alternativtext töjer ut den reserverade rutan på oförutsägbara sätt om bilden inte laddas. Ett tomt attribut lämnar bara ett blankt, diskret utrymme och bevarar strukturen i sidfoten eller sidokolumnen.

Laddas sist, med avsikt

Moderna webbstandarder erbjuder fler verktyg för att styra hur extern grafik påverkar dokumentets totala laddningstid. Två särskilda attribut, loading och decoding, talar om för webbläsaren hur bilden ska prioriteras.

Om attributet loading sätts till lazy skjuter webbläsaren upp hämtningen av filen tills läsaren faktiskt scrollar ner i närheten av den. Om attributet decoding sätts till async kan webbläsaren bearbeta huvudtexten och layouten utan att vänta på att bilddatan har tolkats helt.

Eftersom en statistikgrafik sällan är den viktigaste informationen på en sida för en församling eller förening, ser de här attributen till att det egentliga innehållet alltid visas först. Mätverktyget tar tyst sin plats i bakgrunden och fördröjer aldrig huvudbudskapet.