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 rigtigt, så de indlæses hurtigt, ser skarpe ud og kan bruges af alle.

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

Det sker der, når du uploader et foto

Du uploader et foto fra din telefon: 4.000 gange 3.000 pixels, 5 MB. WordPress gør så 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 gemmes også. Det kaldes big image threshold og har fandtes siden WordPress 5.3.
2. WordPress laver desuden en række mindre størrelser: miniature (som standard 150 x 150 pixels, beskåret), mellem (300), stor (1024) og ekstra størrelser på 768, 1536 og 2048 pixels i bredden. Dit tema og dine plugins tilføjer ofte deres egne størrelser.
3. Alle versioner havner i wp-content/uploads/2026/11/ (år og måned for uploaden).

Ét foto bliver på den måde hurtigt til otte eller flere filer. Derfor vokser mappen uploads så meget (lektion 1.3), og derfor betyder det noget, hvad du uploader.

På siden sætter WordPress en srcset på et billede: en liste over alle de størrelser. Browseren vælger selv den mindste størrelse, der er skarp nok til skærmen. En telefon indlæser så størrelsen på 768 pixels, en stor skærm den på 1536. Det virker kun, hvis størrelserne findes, altså hvis du uploader via mediebiblioteket og ikke med FTP.

Formindsk og komprimer på forhånd

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

• Størrelse: et foto, der aldrig vises bredere end 1.600 pixels på dit websted, behøver ikke være 4.000 pixels bredt. Formindsk det på forhånd til cirka 2.000 pixels på den lange led. Det sparer lagerplads, backupstø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-placeringen, hvor de er taget. Vil du ikke have, at alle ved, hvor du bor, så fjern den, før du uploader. WordPress fjerner meget metadata fra de formindskede størrelser, men originalen kan stadig indeholde den.

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

Hvilket format

Kan din server ikke behandle et format, giver WordPress en fejl ved upload eller laver ingen mindre størrelser. Under Værktøjer > Webstedshelbred kan du på fanen Info under Mediehåndtering 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 (det gør WordPress ved billeder fra mediebiblioteket). Så reserverer browseren plads på forhånd, og teksten hopper ikke, når fotoet kommer ind.

Alt-tekst: til dem, der ikke ser billedet

Alt-teksten (alternativ tekst) beskriver, hvad der er på et billede. Skærmlæsere læser den op 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årlig: IMG_4032.jpg eller foto.
• Dårlig: cykelbutik cykel elcykel køb billig cykel (at stable søgeord hjælper ingen).
• God: Mekaniker justerer bremserne på en blå elcykel 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 det over. Tom er noget andet end manglende: et billede uden alt får ofte en skærmlæser til at læse filnavnet op. Et billede, der er et link (for eksempel et logo, der går til forsiden), beskriver, hvor linket fører hen: Til forsiden af Fietsenwinkel De Spaak.

I mediebiblioteket angiver du alt-teksten ved selve billedet, og i blokeditoren ved billedblokken. Bemærk: en alt-tekst, du udfylder i mediebiblioteket, ændres ikke automatisk ved billeder, der allerede står på sider.

Filnavne og ophavsret

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

Lagerplads og oprydning

Mediebiblioteket rydder ikke selv op. Et billede, du fjerner fra en side, bliver i biblioteket og i uploads med alle sine størrelser. På et websted med mange års indhold løber det op. Ryd op en gang imellem, men forsigtigt: et billede kan være brugt et sted, som biblioteket ikke ser (i en temaindstilling, en widget eller en mail). Tag først en backup.

Opsummering

• WordPress laver flere størrelser af hver upload og formindsker store fotos til 2.560 pixels; browseren vælger via srcset den passende størrelse.
• Formindsk og komprimer fotos på forhånd, og fjern placeringsdata.
• Brug JPEG eller WebP til fotos, PNG til logoer og skærmbilleder; SVG kun med et plugin, der renser.
• Lazy loading sker automatisk, undtagen for det første store billede; bredde og højde forhindrer, at indholdet hopper.
• 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. Udfyld adressen på dit websted. Programmet læser forsiden og ser på de første 20 billeder: har de en alt-attribut (tom er i orden, 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 markeret. Ret det, der er rødt, i dit mediebibliotek eller på siden, og kontroller igen.

Læs mere

Disse artikler beskriver trinene i WebOkés paneler; i andre paneler fungerer de på lignende 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/
• Skriv alt-tekster (W3C, engelsk): https://www.w3.org/WAI/tutorials/images/decision-tree/