Introduzione: le immagini sono importanti?

Eccome! Danno tono, contesto, forniscono il cosiddetto mood ai tuoi contenuti, alleggeriscono, a volte spiegano. Quindi sono importanti.

Facendo un paragone, usare immagini sui siti web è un po’ come cucinare: puoi avere tutti gli ingredienti giusti, ma se non li dosi e mischi correttamente, il risultato sarà deludente.

Non esiste una “ricetta” universale per le immagini online, ma seguendo qualcuno dei consigli che seguono potrai assicurarti che le tue foto brillino come una stella Michelin.

Dimensioni delle Immagini

Quando si parla di dimensioni delle immagini, immaginiamo di scegliere un abito per un evento importante.

Devi considerare:

sia la taglia (che rappresenta la dimensione di caricamento: media, grande, full hd, 4k ecc.),
sia il modo in cui ti starà addosso (ossia la dimensione di visualizzazione: hero image, slider tutto schermo, full width sull’area contenuti, riquadro laterale, in una colonna, ecc.).

Queste due cose sono strettamente legate: non puoi rispondere alla prima domanda senza pensare anche alla seconda.

E come per un abito, una misura sbagliata può rovinare tutto!

Formati delle Immagini

Il mondo dei formati delle immagini è un po’ come il guardaroba di una persona attenta all’eleganza: ogni occasione ha il suo outfit ideale.

Ecco i capi di base:

JPG/JPEG: Il tuo fedele jeans. Perfetto per le foto, si adatta a ogni situazione. Mantiene una buona qualità con dimensioni di file ridotte (formato “lossy”), ma niente trasparenze (un po’ come un jeans che non si trasforma mai in shorts!).
Esempio: Se hai una bella foto di un tramonto sul mare, il JPG è il formato perfetto per conservarne la bellezza senza occupare troppo spazio.
PNG: La camicia bianca immacolata. Ottima per i loghi e le immagini che richiedono trasparenza. Non perde qualità, ma occupa più spazio rispetto al JPG (si dice formato “lossless”, dotato di trasparenza alfa).
Esempio: Hai un logo con uno sfondo trasparente che deve apparire su vari colori di sfondo? Il PNG è il tuo alleato.
GIF: Il maglione vintage che va e viene di moda. Supporta trasparenze e animazioni, ma è limitato a 256 colori, quindi per i loghi è da evitare come i Birkenstock al ricevimento in ambasciata. Tuttavia, è perfetto per quelle immagini animate che dicono più di mille parole, ovvero meme e animazioni buffe, quindi diciamo bene sulla comunicazione “instant” sui social per strappare un sorriso al tuo pubblico.
Esempio: Vuoi far sorridere i tuoi utenti con una piccola animazione di un gatto che si stira? Un GIF è perfetto per questo.
SVG: Il tailleur su misura. Un formato vettoriale (quindi ogni linea è definita come una formula matematica – in teoria ci puoi fare un cartellone grande come la Francia senza perdere qualità e definizione) che mantiene la nitidezza a qualsiasi dimensione. Ottimo per loghi e grafici che devono sempre essere perfetti, ma è meno comune (come andare in giro con un completo elegante ogni giorno), ma si fa sempre più largo nel web di ogni giorno, grazie al supporto nativo di tutte le recenti versioni die browser in commercio.
Esempio: Se hai un logo che deve apparire nitido sia su un biglietto da visita sia su un cartellone pubblicitario, SVG è il formato che fa per te.
WEBP: L’outfit futuristico. Un formato innovativo sviluppato da Google, che comprime le immagini in modo eccellente. Non è ancora accettato in tutti i negozi vecchio stile (browser un po’ datati e non aggiornati), ma è sicuramente il futuro della moda (digitale).
Esempio: Se stai creando un sito all’avanguardia e vuoi immagini con il massimo della qualità e il minimo dello spazio, prova il WebP!

Dimensione Ottimale delle Immagini

Caricare immagini giganti è un po’ come entrare in un ristorante con un vestito troppo grande: attira l’attenzione, ma rallenta tutto il resto.

Le immagini devono essere della taglia giusta per adattarsi perfettamente al sito.

Dimensioni in Pixel: Scordati del PPI (Pixel Per Inch); pensa solo alle dimensioni in pixel. Le immagini possono variare da 600 a 2500 pixel sul lato più lungo, a seconda di dove devono essere usate.
Esempio: Hai una foto di una splendida torta per la pagina di un blog? Ridimensionala a 1200px di larghezza e vedrai che sarà perfetta sia per desktop che per mobile.
Dimensione del File: La dimensione del file è determinata dalla complessità dell’immagine, dalle dimensioni in pixel e dalla compressione. Immagina di fare le valigie: puoi far entrare tutto con un po’ di compressione, ma attenzione a non stropicciare i tuoi abiti (la qualità)!
Esempio: Hai una foto di una foresta intricata? Compressa bene, potrebbe scendere da 1MB a 200KB senza perdere troppo in qualità.

Dimensioni Appropriate delle Immagini

Decidere quanto grandi devono essere le immagini è come scegliere la giusta misura delle scarpe: né troppo strette né troppo larghe!

Larghezza del Sito: Immagina che il tuo sito sia una passerella larga 1200px. Tutto quello che sfila lì sopra deve stare entro quella larghezza per evitare cadute di stile.
Esempio: Se stai caricando una foto per una sezione a piena larghezza, mantienila sui 1200px per garantirne la nitidezza.
Colonne: Se stai mettendo un’immagine in una colonna, la larghezza dell’immagine dovrebbe corrispondere alla larghezza della colonna.
Esempio: Un’immagine per una colonna che occupa metà pagina? Ridimensionala a circa 600px e sarà perfetta.
Immagini a Larghezza Completa e Immagini di Sfondo: Quando si tratta di immagini di sfondo o a larghezza completa, pensa alle dimensioni dello schermo come alla misura delle tende per una finestra. Una misura troppo piccola non copre tutto, mentre una troppo grande può diventare pesante.
Esempio: Per un’immagine di sfondo che si adatta a qualsiasi monitor, opta per una larghezza di circa 2000-2500px. Sarà sufficiente per la maggior parte degli schermi senza compromettere la velocità di caricamento.

Nota bonus su formati e dimensioni

Il tuo sito dovrebbe avere le immagini nel miglior rapporto formato/risoluzione/peso, per cui:

loghi e trasparenza gestiti con file vettoriale SVG – il supporto è ormai completo, e i browser che non lo fanno sono ormai in percentuale molto scarsa ed ignorabili. Se poi vuoi proprio farlo, puoi anche mettere istruzioni specifiche di “fallback” (sostituzione: vedi punto 4 con l’attributo HTML “srcset” – per quei vecchi dinosauri tramite immagini PNG a trasparenza alfa.
Immagini a corredo in JPG con ottima definizione di base in 2k: ricorda che molti CMS non li caricano proprio i file troppo grandi, e comunque li scalano: ad esempio, WordPress non carica oltre i 2560 pixel di lato, per cui se carichi un 16 megapixel, comunque al massimo avrà larghezza di 2560.
Conversione automatica dei JPG in WEBP: molti CMS hanno plugin che automaticamente eseguono conversione ed ottimizzazione a puntino, abbassando notevolmente il peso complessivo di pagina, quindi il tempo di caricamento: e sia gli utenti che Google sono contenti!
Funzioni di selezione automatica dell’immagine del device: inutile fare scaricare una hero image larga 960px ad un telefono largo 300: se il CMS (e ad esempio WordPress lo fa in automatico) nell’acquisizione dell’immagine caricata in libreria ne fa diverse copie per le diverse dimensioni possibili e fornisce al browser un set di formati (tramite il tag HTML “source”+ il suo attributo “srcset”), il browser scaricherà e userà quella più adatta e leggera.

Compressione delle Immagini

Prima di caricare le immagini, ridimensionala e comprimi il file, come se stessi arrotolando con cura i tuoi vestiti prima di metterli in valigia. Ci sono molti strumenti e plugin che possono aiutarti a fare questo senza sgualcire nulla.
Esempio: Hai una foto di 800KB? Con un po’ di compressione, puoi ridurla a 200KB, quattro volte più leggera, senza che nessuno se ne accorga!

Fattori che Influenzano la Dimensione delle Immagini

Diverse impostazioni del tema o del layout possono influire su quanto grandi o piccole devono essere le immagini, un po’ come accessori che possono trasformare un look.

Larghezza del Sito e della Colonna: Determina la dimensione necessaria delle immagini: se l’immagine è più grande, stai sprecando pixel e byte, quindi secondi di caricamento.
Barre Laterali: Se hai delle barre laterali, considera che riducono lo spazio disponibile, proprio come indossare una giacca può limitare i movimenti.
Impostazioni dello Slider: Le dimensioni delle immagini nei slider dovrebbero corrispondere alle dimensioni del slider, sia a larghezza fissa che a larghezza completa.
Esempio: Se stai creando uno slider a larghezza piena, usa immagini di almeno 2000px di larghezza per garantire che siano sempre nitide e impressionanti, anche sugli schermi più grandi.

Immagini Ottimizzate per la SEO

Ottimizzare le immagini per la SEO è un po’ come scegliere il titolo giusto per un articolo di successo: ogni dettaglio conta!

Nome del File: Usa nomi di file descrittivi e ricchi di parole chiave, proprio come dare un titolo accattivante a un libro.
Esempio: Hai un’immagine di una rosa rossa? Invece di IMG001.jpg, chiamala rosa-rossa-giardino.jpg. I motori di ricerca apprezzeranno il gesto!
Testo Alt: Non dimenticare il testo alternativo! È come mettere una didascalia a una foto su Instagram: aiuta a capire cosa c’è nell’immagine.
Esempio: Descrivi l’immagine in modo preciso, come “Rosa rossa in un giardino fiorito”. Così, anche chi non può vedere l’immagine potrà comprenderne il contenuto.
Ottimizzazione delle Dimensioni del File: Le immagini più leggere caricano più velocemente, un po’ come un buon titolo fa venire voglia di leggere subito l’articolo.
Sitemap delle Immagini: Crea una sitemap delle immagini per aiutare i motori di ricerca a trovarle tutte, come una mappa del tesoro che porta ai contenuti preziosi.

Immagini Ottimizzate per l’Accessibilità

Rendere le immagini accessibili è come assicurarsi che una festa sia divertente per tutti, indipendentemente dalle loro esigenze.

In termini più tecnici, chi non può vedere deve fare affidamento a software specifici come i lettori di schermo o Voice Over, che “raccontano” la pagina all’utente: per il momento, nonostante i grandi progressi dell’Intelligenza Artificiale nel riconoscimento delle immagini, è assolutamente necessario compilare il campo ALT (che significa “ALTernative text”, ovvero “testo alternativo”), che viene appunto letto all’utente quando l’immagine viene incontrata nella navigazione: inutile dire che, se il campo è vuoto o casuale/inappropriato, stiamo dando al lettore di schermo, e quindi all’utente, un’informazione errata e gli stiamo facendo lo sgambetto nella comprensione della pagina.

Esiste una serie di regole e specifiche tecniche aggiuntive, dette WAI-ARIA, che specificano ruolo e visibilità degli elementi: se l’immagine è puramente decorativa (quindi abbellisce ma non “racconta” nulla oltre al testo: se la tolgo la pagina diventa meno gradevole, ma il significato del contenuto rimane inalterato), allora possiamo (e dovremmo, se possibile) nasconderla alla “vista” dei lettori di schermo e delle tecnologie assistive in generale, usando l’attributo HTML aria-hidden="true".

Notiamo come le pratiche per l’accessibilità aiutino molto anche lato SEO, perché di fatto coincidono con la migliore semantica possibile sulla gestione del codice HTML delle immagini, quindi otteniamo 2 piccioni con 1 fava :-)

Testo Alt: Fornisci descrizioni che diano a chi usa lettori di schermo un’idea chiara di cosa rappresenta l’immagine.
Esempio: Se hai una foto di un gatto che dorme, il testo alternativo potrebbe essere “Un gatto grigio che dorme su un divano rosso”. Semplice e chiaro.
Sovrapposizioni di Testo: Evita di mettere testo importante direttamente sulle immagini senza un’alternativa. Sarebbe come far parlare un oratore con un microfono spento.
Contrasto dei Colori: Assicurati che il testo sull’immagine sia leggibile, un po’ come assicurarsi che gli invitati possano sentire la musica durante una festa.
Esempio: Usa un testo bianco su un’immagine scura o viceversa per garantire che tutti possano leggerlo chiaramente.
Didascalie e Descrizioni: Aggiungi descrizioni per le immagini complesse, come fornire una guida dettagliata per capire un’opera d’arte.

Naming per le Immagini

Nominare correttamente le immagini è come scegliere un nickname memorabile: aiuta a essere riconosciuti e ricordati!

Usa Nomi Descrittivi: Nome le immagini in base a ciò che rappresentano, utilizzando parole chiave rilevanti. È come dare a ogni immagine una carta d’identità.
Esempio: Invece di chiamare un’immagine IMG001.jpg, usa un nome come cane-giocattolo-parco.jpg. Così, tutti sapranno subito di cosa si tratta.
Separa le Parole con Trattini: I trattini funzionano meglio degli spazi o degli underscore, come se fossero le stringhe che tengono insieme un bel pacchetto.
Esempio: rosa-rossa-giardino.jpg è molto meglio di rosa_rossa_giardino.jpg.
Evita Caratteri Non Alfanumerici: Usa solo lettere, numeri e trattini. Evita simboli strani, proprio come eviteresti abiti troppo eccentrici per un evento formale.
Convenzioni di Naming Consistenti: Sviluppa un sistema di naming coerente, come avere un dress code per mantenere l’ordine in ogni occasione.
Esempio: Se stai caricando immagini per un sito di e-commerce, mantieni nomi coerenti come scarpe-uomo-casual.jpg, scarpe-donna-elegante.jpg, ecc.

Conclusioni

Usiamo i nostri consigli proprio sull’immagine a corredo di questo articolo, ovvero “Gestire le immagini nei siti web.jpg”, che ha avuto le seguenti ottimizzazioni:

download da sito apposito in cui ho un account per ottenere immagini utilizzabili con licenza commerciale e professionale per il web: il file pesa 3,5 MB, è un classico formato fotografico 3:2 di 6000 x 4000 pixel, e si chiama “photo-camera-with-colorful-printer-photos-on-gray-2023-12-21-21-26-20-utc.jpg”
rinominato il file in “Gestire le immagini nei siti web.jpg” a cui aggiungi anche, se proprio vuoi, il nome del tuo sito o del tuo business – cosa utile nel mondo iper competitivo degli ecommerce, dove anche le virgole fanno SEO, altrimenti puoi tralasciare. Si noti che ho lasciato gli spazi, perché uso WordPress, e questo CMS provvede da solo ad eliminare gli spazi – sostituendoli con trattini – e le lettere accentate, eliminandole.
Piccolo ritaglio dell’inutile, per ridurre altezza dell’immagine e consentire all’utente di vedere il contenuto sotto all’immagine, che deve catturare l’attenzione ma non sviare dal contenuto, che quindi deve rimanere quanto possibile Over The Line (OTL), nell’area immediatamente visibile di pagina.
Fatta prima rapida ottimizzazione a 1920 pixel di lato (ovvero 2k, full hd) tramite un comodo software per Mac OSX: PhotoBulk – i migliori 10 € mai spesi :-) – e qui passiamo dai 3,5 MB originari a 79 KB, quindi circa un quarantesimo! E il 99% degli utenti mai si accorgerà della differenza.
Caricamento nella libreria di WordPress, che appunto opera da solo il renaming ottimizzato per il web e – tramite il plugin appositamente da me installato e configurato – in modo automatizzato lo serve nel sito in formato WEBP, ulteriormente ottimizzato al 60% (livello MEDIUM, come da impostazioni del mio sito): risultato? 37 KB, ovvero circa un centesimo dell’originale – e perfetta presenza, occupazione di spazio, visibilità.

Seguendo questi consigli ed esempi, le immagini sul tuo sito non solo saranno belle, ma anche funzionali e ben ottimizzate.

Tag Archivio per: immagini

Articoli