Bilder

Bildtestet kontrollerar alla bilder på en webbplats för att se om de är länkade till enligt senaste bästa praxis. Vi kontrollerar också att bilderna är i ett lämpligt webbformat.

Varför testar vi för detta?

Webbplatsproducenter inkluderar ofta bilder på sina sidor dåligt, vilket skapar tillgänglighetsproblem för besökare och ökar sidladdningstiderna.

Det är viktigt att inkludera bredd och höjdattribut i varje bildtagg. Koden är giltig utan attribut för höjd och bredd, men det är bästa praxis att inkludera dem. Utan dessa attribut vet inte besökarens webbläsare hur mycket utrymme som ska ges till bilden fören den har har laddats ner. Det betyder att när bilden är laddad måste sidan renderas av besökarens webbläsare en gång till, vilket ökar sidladdningstiden och kan göra att elementen på sidan hoppar, speciellt om användaren har en långsam internetanslutning. Det är också viktigt att inte sträcka ut bilden via användning av dessa attribut, de borde vara identiska med bildens faktiska dimensioner. Detta ökar också sidladdningstiden.

Hur testar vi för detta?

Vi hämtar alla bilder på en webbplats och ger poäng efter flera kriterier:

• Är den ett icke webbvänligt format? Endast webp, avif, jpeg, png, svg och gif bilder är tillåtna.
• Saknas bredd och höjdattributen? Detta syns när du struntat i bredd och höjdattributen för en bild.
• Sträcks den ut i webbläsaren? Detta händer när källbilden har en annan storlek än bredden och höjdattributen som angetts i HTML-koden. Om du vill sträcka en bild i webbläsaren bör du använda CSS, eftersom HTML-taggen bara beskriver källbilden utan att säga hur den ska visas.

Vad kan jag göra åt det?

Se till att alla bilder du använder är i ett webbvänligt format, t.ex jpeg, gif eller png. Du bör också inkludera bredd- och höjdattribut för alla bilder, och dessa ska vara källbildens faktiska dimensioner. Om du behöver sträcka ut bilden i webbläsaren använder du CSS. Bildtaggen i HTML definierar källbilden, och CSS definierar hur den sen ska presenteras.