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. Denne tilgang anvendes ofte i forbindelse med onlinebutikker. Brugere er vant til at klikke på et billede og få vist et kort med en komplet produktbeskrivelse og pris.

For at gøre et billede klikbart kan du placere <img>-tagget inden 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-elementerne figure og figcaption til at tilknytte en billedtekst til et billede på en webside. Her er et eksempel:

• figure: elementet indeholder både figcaption og img elementerne;
• figcaption: angiver billedteksten, som er synlig for brugere;
• img: angiver det billede, der skal vises.

Billedoptimering

Dette er vigtigt for websider, hvor store billedfiler kan gøre indlæsningstiden langsommere og få hjemmesiden til at føles langsom. Ved at følge disse tips kan du forbedre den overordnede ydeevne og tilgængelighed på hjemmesiden.

• Tilpas billeder til den korrekte størrelse. Tilpas billeder til den størrelse, de skal vises i på websiden, i stedet for at uploade store billeder og ændre størrelsen med HTML eller CSS;
• Brug passende filformater. Generelt bruges JPEG til fotografier, PNG til grafik og billeder med gennemsigtighed. Undgå større BMP- eller TIFF-filer;
• Komprimer billeder. Der findes mange onlineværktøjer, som kan komprimere billeder uden at gå på kompromis med kvaliteten. Gør dette, før billeder uploades til hjemmesiden.