Arbeide med klikkbare bilder, bildetekster og optimalisering

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 når du arbeider med 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:

• View the Code
• Open the Live Page

I dette eksempelet 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, hvor store bildefiler kan gjøre at siden lastes tregere og gir en dårligere brukeropplevelse. Ved å følge disse tipsene kan du forbedre både ytelsen og tilgjengeligheten på nettstedet.

• Endre størrelsen på bilder til riktig størrelse. Endre størrelsen på bildene til den størrelsen de skal vises i på nettsiden, i stedet for å laste opp store bilder og endre størrelsen 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.