Billeder og Billede-links i HTML

Der er flere måder at indsætte billeder på i HTML, her kan du læse om nogle af dem.

4774 visninger

Edited: 2021-04-12 08:30

Når man indsætter billeder i HTML, kan man anvende img elementet, men der findes i dag også andre muligheder, for at indsætte billeder; img er dog stadigvæk den mest udbredte.

Ofte vil man også angive en alternativ tekst sammen med billedet, hvor den alternative tekst kan indskrives i alt attributten på img elementet.

En alt-tekst vil kun blive brugt, når et billede af en eller anden grund ikke kan indlæses, og hvis den besøgende benytter sig af en skærmoplæser – hvilket eksempelvis kan være tilfældet for svagtseende. Det anbefales altid at inkludere en alt-tekst, uanset om du forventer besøgende med skærmoplæsere eller ej.

Det er src attributten som angiver adressen til billedet som skal indlæses. Det anbefales at man så vidt muligt bruger kendte og åbne formater; et par kendte formater er eksempelvis jpg og png.png filer egner sig bedst til mindre grafiske elementer og screenshots, imens .jpg filer egner sig bedst til fotos.

Man kan indsætte et billede ved at benytte koden nedenfor:

<img src="/billeder/MitBillede.jpg" alt="Et billede af mig selv...">

Billeder som links

Der er flere måder at bruge billeder som links. En af de nemmeste måder at gøre det på, er ved at indsætte img elementet i et link element. Når man indsætter almindelige links bruges a elementet, så hvis man vil indsætte et billede inden i et a element, kan man gøre som vist i koden nedenfor:

<a href="https://beamtic.dk/"><img src="/i/html-living-standard-logo-orange1.png" alt="Beamtic.dk"></a>

Man kan også angive billedet som en baggrund direkte på a elementet, det kræver dog at man bruger CSS til at skifte nogle egenskaber for elementet først. Normalt er a elementet et inline element, hvilket bivirker at man ikke umiddelbart kan skifte højden og bredden på elementet, og det vil også opføre sig uhensigtsmæssigt. Derfor skal vi først ændre elementet til et block element – det kan vi gøre via display egenskaben i CSS som vist nedenfor:

#supportA {
  display:block;
  width:200px;
  height:250px;
  background: url("/i/webudvikling/html-living-standard-logo-orange1.png");
}

Når vi så efterfølgende indsætter vores link, skal vi bare give det et unikt ID. Alternativt, hvis man har flere links, som bruger samme billede, kan man bruge en klasse i stedet for et ID. Læs mere om klasser og ID'er her

Hvis vi eksempelvis har et support link på vores hjemmeside, og vi ønsker, at benytte et billede som link, så kan vi nu bruge, den noget kortere, kode som vist nedenfor:

<a href="https://beamtic.dk/" id="supportA"></a>

Før at ovenstående vil virke, er det dog vigtigt, at du har linket til et eksternt StyleSheet. Hvordan du gør det, bliver omtalt i en anden vejledning.

De mest almindelige problemer

Det nok mest almindelige problem er, at et billede man bruger ikke vises; det kommer normalt til udtryk ved, at der opstår en 404 (Ikke Fundet) fejl. Når det sker, er det næsten altid fordi, at adressen til billedet er forkert. Læs: Absolutte og Relative Stier

Hvis det derimod er et baggrundsbillede som ikke vises, kan det skyldes, at man har brugt et tomt inline element som "kollapser". Husk derfor altid display:block; på inline elementer.

En anden årsag kan være, at en fil man har uploaded ikke har de rigtige fil-tilladelser; web-serveren skal have adgang til at læse en fil, før den kan fremvise den til en besøgende.

Hvad er det bedste filformat?

Hvad for et fil-format du skal bruge, det afhænger meget af omstændighederne, og hvad der er dine mål. Hvis du er ligeglad med optimering i første omgang, så kan du næsten bruge, lige det format som du ønsker.

Det anbefales dog, at man optimere sine billeder så meget som muligt, inden at man bruger dem på sin hjemmeside. Hvis man bruger Wordpress, så findes der plugins, som man kan bruge; hvis man selv er Udvikler, så kan man bruge Beamtic's PHP klasse til fil-håndtering, som automatisk vil forsøge at konvertere til- og levere det bedst egnede format til brugerens browser.

Du kan bruge Beamtic's fil-håndtering klasse til PHP, for at konvertere- og levere de bedst egnede billeder til brugernes browser; læs mere her: Beamtic's File Handler

Hvis man ønsker en meget høj komprimering, eksempelvis for at optimere indlæsningshastigheder og spare båndbredde, så kan man også anvende enten AVIF eller WebP.avif filer er typisk omkring 50% mindre end .jpg.

WebP giver en lidt dårligere komprimering, men det bedre understøttet end AVIF. Faktisk tror jeg kun, det er LinkedIn, som ikke vil læse WebP til deres små udklip, når man deler en artikel. Det hjælper dog ikke at omdirigere til JPG, da LinkedIn simpelthen nægter at anmode om et billede, hvis det ikke har et understøttet filformat. Det er bare en lille ting, som kan være værd, at være opmærksom på.

I nogle tilfælde kan man også spare plads, hvis man konverterer .png filer til AVIF, man skal dog være opmærksom på, at nogle PNG filer er så optimerede, at de kan ende med at blive større i stedet for mindre. Tjek derfor altid filstørrelsen. Det afhænger også meget af værktøjet man bruger.

Læs mere i denne artikel på Engelsk: The AVIF Mime Type

Konvertering af billeder

Der findes mange gratis-værktøjer som kan konverterer billeder; hvis du bruger Adobe pakken, så kan du endda stadigvæk opnå en bedre optimering med gratis-værktøjerne — i hvert fald i nogle tilfælde, og med bestemte filformater.

Hvis du har Windows, så kan du eksempelvis prøve PNGGauntlet til at optimere .png filer; en anden mulighed er programmet Trimage. Begge disse programmer er egentlig bare grafiske brugerflader til andre kommandolinjeprogrammer.

Fortæl os hvad du tænker:

  1. Sådan styrker du dit design med hover-effekter i CSS.
  2. Når man laver links i HTML er der en række overvejelser man bør gøre sig, læs hvilke her i artiklen.
  3. Hvordan man skriver nyttige kommentarer, når man koder HTML.
  4. GDPR.. Fra notifikationer til indholds-blokerende popups og cookie-walls.

Flere i: Webdesign