Klikbare billeder

Klikbare billeder er billeder på en webside, der kan klikkes på, typisk for at navigere til en anden webside eller udføre andre handlinger. Generelt har du brug for denne tilgang, når du har med onlinebutikker at gøre. Brugere er vant til at klikke på et billede og få et kort med en komplet produktbeskrivelse og pris.

For at gøre et billede klikbart kan du indpakke <img>-tagget inde i et <a>-tag. For eksempel:

I dette eksempel angiver <a>-tagget URL'en, der skal linkes til i href-attributten, og <img/>-tagget angiver det billede, der skal vises. Når brugeren klikker på billedet, vil browseren navigere til den URL, der er angivet i href-attributten.

Billedtekst

Du kan bruge HTML figure og figcaption elementerne til at knytte en billedtekst til et billede på en webside. Her er et eksempel:

• figure: element indeholder både figcaption og img elementerne;

• figcaption: angiver billedteksten, synlig for brugere;

• img: angiver billedet, der skal vises.

Billedoptimering

Dette er vigtigt for websider, hvor store billedfiler kan sænke sideindlæsningstiderne og få hjemmesiden til at føles langsom. Ved at følge de følgende tips kan du forbedre den overordnede ydeevne og tilgængelighed af hjemmesiden.

• Ændr størrelsen på billeder til den passende størrelse. Ændr størrelsen på billeder til den størrelse, de vil blive vist på websiden, i stedet for at uploade store billeder og ændre størrelsen ved hjælp af HTML eller CSS;

• Brug passende filformater. Generelt bruges JPEG'er til fotografier, PNG'er til grafik og billeder med gennemsigtighed. Undgå større BMP- eller TIFF-filer;

• Komprimer billeder. Der er en stor mængde online værktøjer, der kan komprimere billeder uden at gå på kompromis med kvaliteten. Gør det, før du uploader billeder til hjemmesiden.

Bemærk

Du kan bruge følgende kilder til at komprimere billeder: Rastergrafikoptimering, Vektorgrafikoptimering. Hvad er forskellen mellem dem? - Overvej dette i det næste kapitel.