Media: bilder og alt-tekst

Modul 4: Lage innhold · Lesetid: 9 minutter

Læringsmål: Etter denne leksjonen kan du forberede, laste opp og beskrive bilder riktig, slik at de laster raskt, ser skarpe ut og er brukbare for alle.

Nøkkelbegreper: mediebibliotek, bildeformater, big image threshold (2560 piksler), JPEG, PNG, WebP, AVIF, komprimering, srcset, lazy loading, alt-tekst, filnavn, opphavsrett

Hva som skjer når du laster opp et bilde

Du laster opp et bilde fra telefonen din: 4.000 ganger 3.000 piksler, 5 MB. WordPress gjør da mer enn du tror:

1. Er bildet bredere eller høyere enn 2.560 piksler, lager WordPress en nedskalert versjon (med -scaled i navnet) og bruker den som «original». Den ekte originalen blir også bevart. Dette kalles big image threshold og har eksistert siden WordPress 5.3.
2. WordPress lager i tillegg en rekke mindre formater: miniatyrbilde (standard 150 x 150 piksler, beskåret), medium (300), stor (1024), og ekstra formater på 768, 1536 og 2048 piksler bredde. Temaet og utvidelsene dine legger ofte til egne formater.
3. Alle versjoner havner i wp-content/uploads/2026/11/ (år og måned for opplasting).

Ett bilde blir dermed fort til åtte eller flere filer. Det er derfor uploads-mappen vokser så raskt (leksjon 1.3), og derfor det betyr noe hva du laster opp.

På siden setter WordPress en srcset på bildet: en liste over alle disse formatene. Nettleseren velger selv det minste formatet som er skarpt nok for skjermen. En telefon laster da formatet på 768 piksler, en stor skjerm det på 1536. Dette fungerer bare godt hvis formatene finnes, altså hvis du laster opp via mediebiblioteket og ikke med FTP.

Skalere ned og komprimere på forhånd

Selv med disse automatiske formatene lønner det seg å skalere ned bilder på forhånd:

• Størrelse: et bilde som aldri vises bredere enn 1.600 piksler på nettstedet ditt, trenger ikke være 4.000 piksler bredt. Skaler det ned til omtrent 2.000 piksler på den lange siden i forkant. Det sparer lagringsplass, sikkerhetskopistørrelse og opplastingstid.
• Komprimering: en JPEG med kvalitet 75 til 85 ser nesten likt ut for øyet som kvalitet 100, men er ofte halvparten så stor.
• Metadata: bilder fra en telefon inneholder ofte GPS-posisjonen der de ble tatt. Vil du ikke at alle skal vite hvor du bor, fjern dette før du laster opp. WordPress fjerner mye metadata fra de nedskalerte formatene, men originalen kan fortsatt inneholde dem.

Det finnes utvidelser som komprimerer bilder ved opplasting eller konverterer dem til et nyere format. Nyttig, men sjekk om de gjør det på din egen server eller sender bildene til en ekstern tjeneste (leksjon 9.3), og om du virkelig trenger en utvidelse hvis du også kan gjøre det på forhånd.

Hvilket format

Kan ikke serveren din behandle et format, gir WordPress en feilmelding ved opplasting eller lager ikke mindre formater. Under Verktøy > Nettstedshelse (fanen Info, under Mediehåndtering) ser du hvilke formater serveren din støtter.

Lazy loading

Siden WordPress 5.5 får bilder automatisk loading="lazy": nettleseren laster ikke et bilde før du scroller til det. Det gjør en lang side med mange bilder mye raskere. WordPress lar bevisst det første store bildet øverst på siden være uten lazy loading og gir det ofte prioritet med fetchpriority="high", fordi det bør være synlig så raskt som mulig. Dette kommer vi tilbake til i leksjon 6.3.

Angi alltid bredde og høyde på et bilde (WordPress gjør dette automatisk for bilder fra mediebiblioteket). Da reserverer nettleseren plass på forhånd, og teksten hopper ikke rundt når bildet lastes inn.

Alt-tekst: for dem som ikke ser bildet

Alt-teksten (alternativ tekst) beskriver hva som er på et bilde. Skjermlesere leser den opp for blinde og svaksynte besøkende, og den vises hvis bildet ikke lastes inn. Søkemotorer bruker den for å forstå bildet.

En god alt-tekst beskriver hva bildet sier i denne konteksten:

• Dårlig: IMG_4032.jpg eller foto.
• Dårlig: sykkelbutikk sykkel elsykkel kjøpe billig sykkel (å stable søkeord hjelper ingen).
• Bra: Mekaniker justerer bremsene på en blå elsykkel i verkstedet.

Er et bilde ren dekorasjon (en linje, et bakgrunnsmønster), la alt-teksten være tom. Da hopper en skjermleser over det. Tom er noe annet enn manglende: et bilde uten alt får ofte en skjermleser til å lese opp filnavnet. Et bilde som er en lenke (for eksempel en logo som går til forsiden), beskriver hvor lenken går: Til forsiden til Sykkelbutikken De Spaak.

I mediebiblioteket setter du alt-teksten på selve bildet, og i blokkredigereren på bildeblokken. Legg merke til: en alt-tekst du fyller inn i mediebiblioteket, endres ikke automatisk på bilder som allerede ligger på sider.

Filnavn og opphavsrett

• Filnavn: e-bike-remmen-afstellen.jpg sier mer enn IMG_4032.jpg og havner i adressen til bildet. Små bokstaver, bindestreker, ingen mellomrom.
• Opphavsrett: et bilde fra Google Bilder er ikke fritt til bruk. Fotografer og bildebyråer sender regelmessig fakturaer for bruk uten lisens. Bruk egne bilder, bilder med en tydelig lisens eller et bildebyrå du kjenner vilkårene til, og ta vare på beviset for lisensen din.

Lagring og opprydding

Mediebiblioteket rydder ikke opp i seg selv. Et bilde du fjerner fra en side, blir værende i biblioteket og i uploads, med alle formatene sine. På et nettsted med flere års innhold hoper dette seg opp. Rydd opp av og til, men forsiktig: et bilde kan brukes et sted biblioteket ikke ser (i en temainnstilling, en widget eller en e-post). Ta en sikkerhetskopi først.

Oppsummering

• WordPress lager flere formater av hver opplasting og skalerer ned store bilder til 2.560 piksler; nettleseren velger passende format via srcset.
• Skaler ned og komprimer bilder på forhånd, og fjern posisjonsdata.
• Bruk JPEG eller WebP til bilder, PNG til logoer og skjermbilder; SVG kun med en utvidelse som renser filen.
• Lazy loading skjer automatisk, bortsett fra for det første store bildet; bredde og høyde forhindrer at innhold hopper rundt.
• En alt-tekst beskriver hva bildet sier i konteksten; ren dekorasjon får en tom alt-tekst.

Quiz

Oppgave

Oppgave A4.4: Bilder på forsiden din. Fyll inn adressen til nettstedet ditt. Programmet leser forsiden og ser på de første 20 bildene: har de et alt-attributt (tomt er greit, manglende er det ikke), har de bredde og høyde, og hvor stor er hver fil (via en HEAD-forespørsel)? Bilder over 300 kB blir meldt. Forbedre det som er rødt i mediebiblioteket ditt eller på siden, og sjekk på nytt.

Les mer

Disse artiklene beskriver trinnene i panelene til WebOké; i andre paneler fungerer de på lignende måte.

• DirectAdmin-veiledning 18.5: For stor opplasting (feil 413) eller tidsavbrudd
• Opplasting mislyktes: øk upload_max_filesize og max_execution_time
• Mediebibliotek (wordpress.org, engelsk): https://wordpress.org/documentation/article/media-library-screen/
• Skrive alt-tekster (W3C, engelsk): https://www.w3.org/WAI/tutorials/images/decision-tree/