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.

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