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. Generelt trenger du denne tilnærmingen når du håndterer nettbutikker. Brukere blir vant til å klikke på et bilde og få et kort med en fullstendig produktbeskrivelse og pris.

For å gjøre et bilde klikkbart, kan du pakke <img>-taggen inn i en <a>-tag. For eksempel:

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

Bildebildetekst

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: spesifiserer bildeteksten, synlig for brukere;
• img: spesifiserer bildet som skal vises.

Bildeoptimalisering

Dette er viktig for nettsider, hvor store bildefiler kan redusere lastetiden for siden og få nettstedet til å føles tregt. Ved å følge de følgende tipsene, kan du forbedre den generelle ytelsen og tilgjengeligheten til nettstedet.

• Endre størrelsen på bilder til riktig størrelse. Endre størrelsen på bilder til den størrelsen de vil bli vist på nettsiden i stedet for å laste opp store bilder og endre størrelsen ved hjelp av HTML eller CSS;
• Bruk passende filformater. Generelt brukes JPEGs for fotografier, PNGs for grafikk og bilder med gjennomsiktighet. Unngå større BMP- eller TIFF-filer;
• Komprimer bilder. Det finnes en mengde online verktøy som kan komprimere bilder uten å gå på kompromiss med kvaliteten. Gjør dette før du laster opp bilder til nettstedet.

Merk

Du kan bruke følgende kilder for å komprimere bilder: Raster grafikkoptimalisering, Vektor grafikkoptimalisering. Hva er forskjellen mellom dem? - Vurder dette i neste kapittel.