Klickbara Bilder

Klickbara bilder är bilder på en webbsida som kan klickas på, vanligtvis för att navigera till en annan webbsida eller utföra andra åtgärder. Generellt behöver du detta tillvägagångssätt när du hanterar nätbutiker. Användare är vana vid att klicka på en bild och få ett kort med en komplett produktbeskrivning och pris.

För att göra en bild klickbar kan du omsluta <img>-taggen inuti en <a>-tagg. Till exempel:

I detta exempel specificerar <a>-taggen URL:en att länka till i href-attributet, och <img/>-taggen specificerar bilden att visa. När användaren klickar på bilden kommer webbläsaren att navigera till URL:en som anges i href-attributet.

Bildtext

Du kan använda HTML-elementen figure och figcaption för att associera en bildtext med en bild på en webbsida. Här är ett exempel:

• figure: elementet innehåller både figcaption och img element;

• figcaption: specificerar bildtexten, synlig för användare;

• img: specificerar bilden som ska visas.

Bildoptimering

Detta är viktigt för webbsidor, där stora bildfiler kan sakta ner sidladdningstider och få webbplatsen att kännas trög. Genom att följa följande tips kan du förbättra webbplatsens övergripande prestanda och tillgänglighet.

• Ändra storlek på bilder till lämplig storlek. Ändra storlek på bilder till den storlek de kommer att visas på webbsidan istället för att ladda upp stora bilder och ändra storlek på dem med HTML eller CSS;

• Använd lämpliga filformat. Generellt används JPEG för fotografier, PNG för grafik och bilder med transparens. Undvik större BMP- eller TIFF-filer;

• Komprimera bilder. Det finns en mängd onlineverktyg som kan komprimera bilder utan att kompromissa med kvaliteten. Gör det innan du laddar upp bilder till webbplatsen.

Notera

Du kan använda följande källor för att komprimera bilder: Raster graphic optimization, Vector graphic optimization. Vad är skillnaden mellan dem? - Tänk på detta i nästa kapitel.