Lavorare con immagini cliccabili, didascalie e ottimizzazione

Immagini cliccabili

Immagini cliccabili sono immagini in una pagina web che possono essere cliccate, solitamente per navigare verso un'altra pagina web o eseguire altre azioni. Generalmente, questo approccio è necessario quando si lavora con negozi online. Gli utenti sono abituati a cliccare su un'immagine per visualizzare una scheda con la descrizione completa del prodotto e il prezzo.

Per rendere un'immagine cliccabile, è possibile racchiudere il tag <img> all'interno di un tag <a>. Ad esempio:

• View the Code
• Open the Live Page

In questo esempio, il tag <a> specifica l'URL a cui collegarsi nell'attributo href, e il tag <img/> specifica l'immagine da visualizzare. Quando l'utente clicca sull'immagine, il browser navigherà verso l'URL specificato nell'attributo href.

Didascalia dell'immagine

È possibile utilizzare gli elementi HTML figure e figcaption per associare una didascalia a un'immagine in una pagina web. Ecco un esempio:

• figure: elemento che contiene sia gli elementi figcaption che img;
• figcaption: specifica il testo della didascalia, visibile agli utenti;
• img: specifica l'immagine da visualizzare.

Ottimizzazione delle immagini

Aspetto fondamentale per le pagine web, poiché file di immagini di grandi dimensioni possono rallentare i tempi di caricamento e rendere il sito meno reattivo. Seguendo questi suggerimenti, è possibile migliorare le prestazioni complessive e l'accessibilità del sito web.

• Ridimensionare le immagini alla dimensione appropriata. Ridimensionare le immagini alla dimensione con cui verranno visualizzate sulla pagina web, invece di caricare immagini grandi e ridimensionarle tramite HTML o CSS;
• Utilizzare formati di file appropriati. Generalmente, JPEG viene utilizzato per le fotografie, PNG per la grafica e immagini con trasparenza. Evitare file BMP o TIFF di grandi dimensioni;
• Comprimere le immagini. Esistono numerosi strumenti online che permettono di comprimere le immagini senza comprometterne la qualità. Effettuare questa operazione prima di caricare le immagini sul sito web.