Klikkbare bilder

Klikkbare bilder er bilder på en nettside som kan klikkes på, vanligvis for å navigere til en annen nettside eller utføre andre handlinger. Dette er ofte nødvendig i nettbutikker. Brukere er vant til å klikke på et bilde og få opp et kort med full produktbeskrivelse og pris.

For å gjøre et bilde klikkbart, kan du plassere <img>-taggen inne i en <a>-tagg. For eksempel:

I dette eksemplet angir <a>-taggen URL-en som skal lenkes til i href-attributtet, og <img/>-taggen angir bildet som skal vises. Når brukeren klikker på bildet, vil nettleseren navigere til URL-en som er spesifisert i href-attributtet.

Bildetekst

Du kan bruke HTML-elementene figure og figcaption for å knytte en bildetekst til et bilde på en nettside. Her er et eksempel:

• figure: elementet inneholder både figcaption og img elementene;
• figcaption: angir bildeteksten, synlig for brukere;
• img: angir bildet som skal vises.

Bildeoptimalisering

Dette er viktig for nettsider, der store bildefiler kan redusere lastetiden og gjøre nettstedet tregt. Ved å følge disse tipsene kan du forbedre både ytelsen og tilgjengeligheten til nettstedet.

• Endre bildestørrelse til riktig størrelse. Endre bildene til den størrelsen de skal vises i på nettsiden, i stedet for å laste opp store bilder og endre størrelse med HTML eller CSS;
• Bruk passende filformater. Vanligvis brukes JPEG for fotografier, PNG for grafikk og bilder med gjennomsiktighet. Unngå større BMP- eller TIFF-filer;
• Komprimer bilder. Det finnes mange nettbaserte verktøy som kan komprimere bilder uten å redusere kvaliteten. Gjør dette før du laster opp bilder til nettstedet.