Medier: billeder og alt-tekst

Modul 4: Lav indhold · Læsetid: 9 minutter

Læringsmål: Efter denne lektion kan du forberede, uploade og beskrive billeder korrekt, så de indlæses hurtigt, ser skarpe ud og kan bruges af alle.

Nøglebegreber: mediebibliotek, billedformater, big image threshold (2560 pixels), JPEG, PNG, WebP, AVIF, komprimering, srcset, lazy loading, alt-tekst, filnavn, ophavsret

Hvad der sker, når du uploader et foto

Du uploader et foto fra din telefon: 4.000 x 3.000 pixels, 5 MB. WordPress gør da mere, end du tror:

1. Er fotoet bredere eller højere end 2.560 pixels, laver WordPress en formindsket version (med -scaled i navnet) og bruger den som "original". Den rigtige original bliver også gemt. Det kaldes big image threshold og har eksisteret siden WordPress 5.3.
2. WordPress laver desuden en række mindre formater: miniature (som standard 150 x 150 pixels, beskåret), mellem (300), stor (1024), og ekstra formater på 768, 1536 og 2048 pixels bredde. Dit tema og dine plugins tilføjer ofte også deres egne formater.
3. Alle versioner havner i wp-content/uploads/2026/11/ (år og måned for uploadet).

Ét foto bliver hurtigt til otte eller flere filer. Derfor vokser mappen uploads så hurtigt (lektion 1.3), og derfor har det betydning, hvad du uploader.

På siden sætter WordPress et srcset ved et billede: en liste over alle de formater. Browseren vælger selv det mindste format, der er skarpt nok til skærmen. En telefon indlæser så formatet på 768 pixels, en stor skærm det på 1536. Det virker kun, hvis formaterne findes, altså hvis du uploader via mediebiblioteket og ikke med FTP.

Forminsk og komprimer på forhånd

Selv med de automatiske formater kan det betale sig at formindske fotos på forhånd:

• Størrelse: et foto, der på dit websted aldrig vises bredere end 1.600 pixels, behøver ikke være 4.000 pixels bredt. Formindsk det på forhånd til omkring 2.000 pixels på den lange side. Det sparer plads, backup-størrelse og uploadtid.
• Komprimering: en JPEG med kvalitet 75 til 85 ser for øjet næsten ud som kvalitet 100, men er ofte halvt så stor.
• Metadata: fotos fra en telefon indeholder ofte GPS-positionen, hvor de er taget. Vil du ikke have, at alle ved, hvor du bor, så fjern det, før du uploader. WordPress fjerner meget metadata ved de formindskede formater, men originalen kan stadig indeholde det.

Der findes plugins, der komprimerer billeder ved upload eller konverterer dem til et mere moderne format. Praktisk, men tjek om de gør det på din egen server eller sender fotos til en ekstern tjeneste (lektion 9.3), og om du virkelig har brug for et plugin, hvis du også kan gøre det på forhånd.

Hvilket format

Kan din server ikke håndtere et format, giver WordPress en fejl ved upload eller laver ingen mindre formater. Under Værktøjer > Webstedshelbred (fanen Info, under Medie-håndtering) kan du se, hvilke formater din server understøtter.

Lazy loading

Siden WordPress 5.5 får billeder automatisk loading="lazy": browseren indlæser først et billede, når du scroller hen til det. Det gør en lang side med mange fotos meget hurtigere. WordPress lader bevidst det første store billede øverst på siden være uden lazy loading og giver det ofte forrang med fetchpriority="high", fordi det skal være synligt så hurtigt som muligt. Det vender vi tilbage til i lektion 6.3.

Sæt også altid bredde og højde på et billede (WordPress gør det ved billeder fra mediebiblioteket). Så reserverer browseren plads på forhånd, og teksten hopper ikke rundt, når fotoet indlæses.

Alt-tekst: for dem der ikke ser billedet

Alt-teksten (alternativ tekst) beskriver, hvad der er på et billede. Skærmlæsere læser den højt for blinde og svagtseende besøgende, og den vises, hvis billedet ikke indlæses. Søgemaskiner bruger den til at forstå billedet.

En god alt-tekst beskriver, hvad billedet siger i denne sammenhæng:

• Dårligt: IMG_4032.jpg eller foto.
• Dårligt: cykelbutik cykel el-cykel køb billig cykel (at stable nøgleord hjælper ingen).
• Godt: Mekaniker justerer bremserne på en blå el-cykel i værkstedet.

Er et billede ren pynt (en streg, et baggrundsmønster), så lad alt-teksten være tom. Så springer en skærmlæser den over. Tom er noget andet end manglende: et billede uden alt får ofte en skærmlæser til at læse filnavnet højt. Et billede, der er et link (f.eks. et logo, der går til forsiden), beskriver, hvor linket fører hen: Til forsiden af Fietsenwinkel De Spaak.

I mediebiblioteket sætter du alt-teksten ved selve billedet, og i blokeditoren ved billedblokken. Bemærk: en alt-tekst, du udfylder i mediebiblioteket, ændrer ikke automatisk billeder, der allerede er på sider.

Filnavne og ophavsret

• Filnavn: e-bike-remmen-afstellen.jpg siger mere end IMG_4032.jpg og kommer i adressen på billedet. Små bogstaver, bindestreger, ingen mellemrum.
• Ophavsret: et billede fra Google Billeder er ikke frit at bruge. Fotografer og billedbanker sender jævnligt fakturaer for brug uden licens. Brug egne fotos, fotos med en klar licens eller en billedbank, hvis betingelser du kender, og gem beviset for din licens.

Opbevaring og oprydning

Mediebiblioteket rydder ikke selv op. Et billede, du fjerner fra en side, bliver stadig i biblioteket og i uploads, med alle sine formater. Ved et websted med mange års indhold hober det sig op. Ryd op en gang imellem, men forsigtigt: et billede kan bruges et sted, som biblioteket ikke ser (i en temaindstilling, en widget eller en mail). Tag en backup først.

Opsummering

• WordPress laver flere formater af hver upload og formindsker store fotos til 2.560 pixels; browseren vælger via srcset det rette format.
• Formindsk og komprimer fotos på forhånd, og fjern positionsdata.
• Brug JPEG eller WebP til fotos, PNG til logoer og skærmbilleder; SVG kun med et plugin, der renser filen.
• Lazy loading sker automatisk, undtagen for det første store billede; bredde og højde forhindrer, at indhold hopper rundt.
• En alt-tekst beskriver, hvad billedet siger i sammenhængen; ren pynt får en tom alt-tekst.

Quiz

Opgave

Opgave A4.4: Billeder på din forside. Indtast adressen på dit websted. Programmet læser forsiden og ser på de første 20 billeder: har de et alt-attribut (tomt er okay, manglende er ikke), har de bredde og højde, og hvor stor er hver fil (via en HEAD-forespørgsel)? Billeder over 300 kB bliver rapporteret. Forbedr det, der er rødt, i dit mediebibliotek eller på siden, og kontroller igen.

Læs mere

Disse artikler beskriver trinnene i WebOkés kontrolpaneler; i andre kontrolpaneler fungerer de på tilsvarende måde.

• DirectAdmin vejledning 18.5: Upload for stor (fejl 413) eller timeout
• Upload mislykkedes: forøg upload_max_filesize og max_execution_time
• Mediebibliotek (wordpress.org, engelsk): https://wordpress.org/documentation/article/media-library-screen/
• Sådan skriver du alt-tekster (W3C, engelsk): https://www.w3.org/WAI/tutorials/images/decision-tree/