Non è solo una foto: l’arte di ottimizzare le immagini per il Web
Che tu venda prodotti online, promuova il tuo brand o abbia semplicemente un biglietto da visita digitale, l’unica cosa che conta è apparire. Non solo, apparire bene. Pagine veloci, comunicativamente efficaci, colorate ma non pacchiane. Insomma, quello che conta è saper lavorare bene con le immagini, anche se non sempre è una cosa facile.
Per questo, voglio darti qualche dritta: giusto un paio di consigli per rendere le tue foto efficaci anche senza bisogno di essere un guru della grafica per il web.
Mai caricare alla cieca
Hai fatto un servizio fotografico e lo studio ti invia tutto il materiale. L’errore più grosso che puoi fare è caricare tutto senza neanche passare dal via. Certo, puoi farlo, ma otterrai tre risultati:
🧑💻 Gli sviluppatori del tuo sito non ti vorranno bene: caricare immagini troppo grandi e pesanti (sì, sono due cose diverse, ora te lo spiego per bene) mette in ginocchio i server.
🕹️ I tuoi utenti non ti vorranno bene: stanno tornando di moda gli anni ’90, ma quelli belli di Beverly Hills 90210, non quelli della connessione 56k delle immagini che si caricano una riga alla volta.
🤖 Google non ti vorrà bene: solitamente, se qualcosa non piace agli sviluppatori di un sito e non piace agli utenti, non piace nemmeno a Google.
Controlliamo la cassetta degli attrezzi
La prima cosa da fare è trovare un software per l’editing delle foto.
Se vuoi lavorare nel modo più professionale possibile, Adobe Photoshop è la scelta giusta. Leader nel campo grafico dal 1988, è uno dei software più completi per il photo editing e per l’ottimizzazione delle immagini. Non solo: oltre ad anni di affidabilità e crescita del prodotto, quasi ogni grafico usa Photoshop; quindi, troverai guide per fare tutto quello che ti viene in mente. C’è solo una piccola pecca, anzi due. Si tratta di un software a pagamento (una licenza costa poco meno di 30€ al mese) e ha una curva di apprendimento decisamente alta.
Esistono delle alternative:
GIMP: software simile a Photoshop, ma con licenza GPL (per chi non è pratico, voglio dire che è gratis), è quanto di più simile potrai trovare sul mercato. Sia chiaro: ho detto “simile”, non “uguale”. La differenza c’è, specie se hai già iniziato a studiare come funziona Photoshop. Fidati che anche qui avrai parecchio da imparare.
Canva: so che molti grafici di mestiere hanno già storto il naso, ma va detto che Canva è uno strumento fantastico per chi si cimenta per la prima volta nel vasto mondo della grafica. Gratuito, intuitivo, tutto interfacce, template e drag & drop. Inoltre, fa quello che serve a noi: ottimizza le immagini.
Le specifiche da nerd
Abbiamo chiarito cosa fare, adesso tocca al come. Stammi dietro, non sarà proprio semplicissimo, specie per i neofiti.
In primo luogo, come dicevo prima, la differenza tra grandezza e peso. Quando parlo di grandezza mi riferisco ai pixel dell’immagine, quando parlo di peso parlo di kilobyte.
Quelli che riuscite a vedere senza neanche aprire i dettagli della foto sono i kilobyte, ma non fatevi trarre in inganno: anche se l’immagine pesa poco, non per questo è piccola e adatta al web. Per ottimizzare un’immagine bisogna modificarne le misure in pixel e il valore del DPI.
La prima è facile: la risoluzione degli schermi più comune nel web è di 1920x1080 pixel. Se la tua immagine è più grande puoi serenamente ridurla. Il DPI è un po’ più complesso: si tratta della densità di pixel per pollice, cioè indica quanti punti colorati della tua immagine ci sono in un pollice (due centimetri e mezzo circa). Non c’è bisogno di formule strane, sappi solo che, se non devi stampare una foto, 96 DPI è il valore giusto. Facile facile.
Ultima nota è il formato: solitamente avrai immagini in JPEG o PNG, ma sul web abbiamo soluzioni migliori:
🖼️ WebP: si tratta di un formato moderno, creato da Google, che consente di ridurre notevolmente il peso rispetto a quelli detti prima, mantenendo un’ottima qualità finale.
🚀 Avif: ancora più nuovo del WebP, comprime meglio e mantiene la stessa qualità. Qualche browser un po’ vecchiotto potrebbe non vederlo correttamente, ma in quanto a prestazioni non si fa battere da nessuno.
Questa era solo una breve carrellata, le specifiche tecniche sono tantissime, ma con queste poche indicazioni dovresti già aver cambiato radicalmente l’impatto della tua foto sul sito.
Mobile o non mobile?
Ricordiamo che la stragrande maggioranza dei nostri utilizzatori naviga il nostro sito da mobile, quindi pensiamo anche a loro. Anzi, pensiamo soprattutto a loro!
Un’immagine per il web che si rispetti ha gli elementi più importanti al centro, così da non risentire di strapazzamenti vari che solitamente una pagina ha quando passa da desktop a mobile e viceversa.
Inoltre, tassativamente vietato mettere testi, numeri, banner o altri elementi che possono andare a nascondersi o essere parzialmente visibili sui telefoni.
Se vuoi fare qualcosa tipo “Offerta super specialissima solo per oggi”, meglio parlare con chi gestisce il sito: sicuramente ha una soluzione che ti eviterà di doverlo scrivere su una foto.
Perché nessuno pensa mai alla SEO?
Anche la SEO vuole la sua parte, specie se stiamo caricando qualcosa sul nostro sito.
Ricordati di dare il giusto nome all’immagine che carichi. Anche se DSA010546.webp ha quel certo alone di mistero, meglio mettere in chiaro cosa stiamo guardando anche al motore di ricerca. Qualcosa come “como-legno-moderno.webp” è decisamente più efficace e più semplice da cercare. Come avrai notato, niente spazi e niente caratteri speciali, solo trattini e lettere minuscole.
Una volta caricata, poi, meglio aggiungere un ALT che spieghi ancora una volta cosa c’è nella foto. Anche questo va a migliorare il posizionamento SEO e, come se non bastasse, migliorerà il punteggio di accessibilità del sito, rendendolo adatto alla navigazione anche per persone con disabilità visive o altre esigenze specifiche.
Le squisitezze tecniche
Forse il tuo sito le ha già, ma nel dubbio ci sono un paio di ottimizzazioni lato software che possono essere fatte per migliorare ancora di più l’esperienza per il tuo utente.
L’uso del Lazy Loading è un’ottima idea. Alla lettera “Caricamento pigro”, permette di avviare il caricamento di una foto solo quando è effettivamente visibile nella finestra del browser, ottimizzando il tempo di apertura della pagina.
CDN, Content Delivery Network: perché avere la tua immagine solo sul tuo server, quando può essere caricata sul server più vicino al tuo utente? Usando una CDN, le immagini saranno archiviate su più server, dislocati in tutto il mondo, che permetteranno al browser del tuo utente di accedere prima ai contenuti.
Piccoli accorgimenti, grandi risultati
Ottimizzare le immagini per il web non richiede strumenti costosissimi o competenze da esperto. Basta un po’ di attenzione, qualche dritta come quelle che hai appena letto, e il tuo sito inizierà già a viaggiare: più veloce, più chiaro, più professionale.
E se ogni tanto ti viene voglia di caricare “IMG_finale_ultima_ok_buonaVERA3.jpg”… fermati un attimo, respira, e ricordati di questa guida.
