Tekst som billeder
Tekst bør implementeres som reel tekst og ikke som et rasterbillede — medmindre billedet er uundværligt (et logo, et skærmbillede af en brugergrænseflade der omtales) eller fuldt ud brugerdefinerbart.
Hvad det kræver
Når den samme visuelle fremstilling kan opnås med reel tekst og CSS, skal man bruge reel tekst. Tekst som billeder zoomer ikke rent, kan ikke markeres, kan ikke oversættes af browseren, kan ikke omformes af brugerdefineret CSS og bliver pixeleret ved høj zoom. Undtagelser: logoer, uundværlige billeder (et skærmbillede der viser, hvordan en brugergrænseflade ser ud) og billeder af tekst, som brugeren kan tilpasse.
Sådan opfyldes det
- Gengiv overskrifter, bannere og salgsfremmende tekst som HTML-tekst med webskrifttyper — ikke som eksporterede PNG-filer.
- Brug et
<span>med CSS-styling frem for et sprite-billede til markeringsbadges som „Ny“, „Tilbud“ og „30% rabat“. - Hvis en designer leverer et hero-billede med indlejret tekst, så bed om teksten som et separat lag, der kan lægges oven på billedet med CSS.
- Gengiv serverside-genererede citatbilleder i social-medie-stil som SVG med
<text>-elementer når muligt — SVG-tekst skalerer rent og kan markeres. - Brug
@font-facetil at indlæse brugerdefinerede skærmskrifttyper i stedet for at rasterisere dekorativ typografi.
Hyppige fejl
- Bannerreklamer hvor al tekst („Begrænset tilbud! Shop nu!“) er gengivet som en JPEG, der er sløret ved 200 % zoom.
- Priskort hvor „99 €/måned“ indgår i et kortbillede frem for at være HTML-tekst.
- Sektionsskillelinjer med styliseret tekst („Vores ydelser“) leveret som PNG i stedet for en stilet
<h2>. - Call-to-action-elementer der udelukkende er billedbaserede, med alt-tekst der blot gentager den synlige tekst.
- E-mail-lignende skærmbilleder brugt på markedsføringssider, hvor marketingteksten sagtens kunne være reel tekst.
Hvorfor det er vigtigt
Tekst som billeder er også en oversættelses- og SEO-fejl — Google kan ikke indeksere dem, Chrome kan ikke oversætte dem, og brugere af skærmforstørrelse ser dem pixelerede. Løsningen er som regel triviel: erstat eksporten med HTML. Friktionen er i arbejdsgangen — designere leverer JPEG’er, fordi de er hurtigere at producere i Figma end at specificere.