Du har laget en nettside med overskrifter og avsnitt, men den ser ut som et Word-dokument fra 1995. Du vet at et bilde ville løftet innholdet, men du er usikker på hvordan du faktisk setter det inn i HTML. Bilder i HTML bruker img-taggen, og den krever bare noen få attributter for å fungere riktig.
Slik setter du inn HTML-bilder med img-taggen
Img-taggen er et selvlukkende element. Den har ingen slutt-tagg og ingen innhold mellom tagger. Alt styres med attributter. De fire viktigste er src, alt, width og height.
src forteller nettleseren hvor bildet ligger. Det kan være en relativ sti til en fil i prosjektet ditt, som src="bilder/landskap.jpg", eller en full URL til et bilde på nettet. Bruker du VS Code, hjelper editoren deg med å navigere filstier. Begynn å skrive stien, og du får forslag fra mappene i prosjektet ditt.
alt er en tekstbeskrivelse av bildet. Nettleseren viser denne teksten hvis bildet ikke kan lastes, for eksempel ved treg nettforbindelse eller feil i filstien. Alt-teksten er også det skjermlesere leser opp for blinde og svaksynte brukere. Uten alt-tekst vet de ikke hva bildet viser.
En god alt-tekst beskriver innholdet i bildet kort og konkret. "Solnedgang over fjorden sett fra Lofoten" er nyttig. "Bilde" er det ikke. Tomme alt-attributter (alt="") brukes bare for dekorative bilder som ikke tilfører informasjon, for eksempel en pyntestrek mellom avsnitt.
Hvorfor du alltid bør sette width og height
Attributtene width og height angir bredde og høyde i piksler. Mange dropper dem fordi bildet jo vises i riktig størrelse uansett. Men det skjer noe irriterende uten dem.
Når nettleseren leser HTML-koden din, bygger den opp siden linje for linje. Teksten vises først fordi den er rask å laste. Bildet tar lengre tid. Uten width og height vet ikke nettleseren hvor mye plass bildet trenger. Teksten legger seg tett, og i det bildet lastes inn, skyves alt under det brått nedover. Brukeren som var midt i en setning, mister plutselig stedet sitt. Dette kalles layout shift.
Med width og height reserverer nettleseren riktig plass fra starten. Teksten legger seg rundt den reserverte plassen, og når bildet dukker opp, skjer det ingen forskyvning. Brukeren merker ingenting. Sett alltid begge attributtene, selv om du bruker CSS til å justere størrelsen senere.
Bruk bilder du har rett til å bruke
De fleste bilder på nettet er beskyttet av opphavsrett. At du finner et bilde via Google-søk, betyr ikke at du har lov til å bruke det på egen nettside. Det finnes tre trygge alternativer.
Det første er bilder du har tatt eller laget selv. Da eier du rettighetene og kan bruke dem fritt. Det andre er bilder med fri lisens. Nettsteder som Unsplash.com tilbyr høykvalitetsbilder du kan bruke gratis, også kommersielt, uten å kreditere fotografen (men kreditering er hyggelig). Det tredje er bilder du har kjøpt lisens til gjennom en bildedatabase.
En ting mange nye webutviklere gjør er å peke src-attributtet direkte til et bilde som ligger på en annen server, for eksempel src="https://andres-side.no/bilde.jpg". Dette kalles hotlinking. Hver gang noen besøker din side, laster de bildet fra den andre serverens båndbredde. Du stjeler i praksis deres serverressurser. Lagre bildet lokalt i prosjektet ditt i stedet.
Alt-tekst som fungerer for alle
Alt-teksten har to jobber: den erstatter bildet visuelt når det ikke kan vises, og den gjør innholdet tilgjengelig for skjermleserbrukere. Begge jobbene krever det samme: en kort, presis beskrivelse av hva bildet faktisk viser.
Beskriv innholdet, ikke formålet. "Et skjermbilde av Excel med en pivottabell i regnearket" er bedre enn "Excel-skjermbilde". Unngå å starte med "Bilde av" fordi skjermleseren allerede sier at det er et bilde. Hold deg under 125 tegn. Lengre alt-tekster blir klippet av noen skjermlesere.
Alt-teksten påvirker også SEO. Søkemotorer bruker den for å forstå hva bildet viser, og det kan hjelpe bildet å dukke opp i bildesøk. Du kan lese mer om dette i artikkelen om å optimalisere bilder for SEO.
Vanlige feil med img-taggen
Feil filsti. Bildet vises ikke, og du ser bare alt-teksten (eller et tomt ikon hvis alt mangler). Dobbeltsjekk at filnavnet stemmer, inkludert store og små bokstaver. "Bilde.JPG" og "bilde.jpg" er to forskjellige filer på de fleste servere.
Manglende alt-attributt. HTML-koden fungerer teknisk, men skjermlesere leser opp filnavnet i stedet, noe som gir en forferdelig opplevelse. Nettlesere kan også vise et tomt rektangel uten noen forklaring. Legg alltid til alt, selv om det bare er en tom streng for rent dekorative bilder.
Kjempestore bildefiler. Et kamerabilde rett fra telefonen kan være 5-10 MB. På en nettside bør bilder sjelden være over noen hundre kilobyte. Komprimer bildene før du bruker dem. Verktøy som TinyPNG eller Squoosh gjør dette gratis i nettleseren. Brukerne dine slipper å vente, og siden din laster mye raskere.
Neste steg
Nå kan du sette inn HTML-bilder med img-taggen og de fire viktigste attributtene. For å lære hvordan du setter inn video med flere kvalitetsnivåer og undertekster, se hvordan du setter inn video i HTML. Vil du bygge inn YouTube-videoer eller Google Maps direkte på siden, forklarer artikkelen om HTML iframe hvordan det fungerer. For en bredere oversikt over HTML, se hovedsiden for HTML.
Denne artikkelen bygger på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset lærer du img-taggen i praksis, responsive bilder, videoinnbygging og alt du trenger for å bygge komplette nettsider. Du kan også lese mer om img-elementet i MDN-dokumentasjonen.
