Come usare e ottimizzare le immagini per il web

Quanto sono importanti le immagini nel tuo sito web? L’immagine giusta posizionata nel modo giusto può essere l’elemento differenziante che ti permette di convertire i tuoi utenti. Ma serve cura nella scelta dei formati, nell’ottimizzazione e negli strumenti di gestione. Vediamo insieme a un esperto tutto quello che c’è da sapere sulle immagini, e nello specifico:

• Quali formati immagine usare e quando
• Le differenze e gli ambiti di utilizzo di raster e vettoriali
• Come ottimizzare le immagini per WordPress
• I criteri di accessibilità e l’ottimizzazione SEO
• I migliori software per la gestione delle immagini

Guarda il webinar

In questo webinar Marco Tesselli, Graphic Designer in Antreem con oltre 15 anni di esperienza, ci mostra le best practise per la scelta, l’impiego e l’ottimizzazione delle immagini per il web.

Guarda le slide della presentazione di Marco Tesselli 👇

Come sempre vi chiedo di commentare il webinar, in modo da avere un feedback su come è andato e su come vorreste che fossero i prossimi. Sentitevi liberi di dare suggerimenti e di richiedere gli argomenti futuri che vorreste fossero affrontati. Consiglio di dare uno sguardo anche agli altri nostri webinar e seguirci sul canale YouTube di SiteGround Italia.

Per qualsiasi domanda, non esitate a commentare sotto questo articolo. 🙂

Le vostre domande su come ottimizzare le immagini per il web

WordPress supporta le immagini in formato WebP e AVIF? Ho provato più volte a usarli senza successo. Come posso fare?

Se hai WordPress aggiornato con WebP non dovresti avere problemi. Invece AVIF non viene preso, ma puoi usare un plugin. Ti basta cercare “plugin avif wordpress” e potrai con quello caricare le immagini AVIF. L’unico browser che ad oggi non supporta le immagini AVIF è Microsoft Edge.

Quale dovrebbe essere la dimensione massima di ogni immagine in una pagina? E quale risoluzione consigli per siti semplici come un blog?

Non c’è una risposta assoluta nell’indicare una “dimensione massima”. La soluzione migliore è quella di cercare di ottenere il miglior rapporto peso/qualità  definendo inizialmente la dimensione di impiego e controllando la qualità percepita dal nostro occhio.

Un buon modo di ragionare potrebbe essere questo:
Hero images: occupano tutta la larghezza della pagina. Quindi su desktop consideriamo tra i 1600px e i 1920px. Questi sono valori considerabili come riferimento in questo momento storico. Per il mobile consideriamo tra i 512 e i 1024px.
Immagini di pagina: tra i 512 e i 1024px. 

Una volta che hai settato queste larghezze nella tua immagine, “dalle in pasto” ad un software di compressione e, al diminuire del peso del file, controlla che la qualità continui ad essere soddisfacente.

Per “fare i conti della serva”, ossia per dare un suggerimento non assoluto, ti consiglio di non superare i 100kb per le immagini più importanti della tua pagina. 
In merito alla tipologia di sito, non importa se si tratta di una pagina di blog o di una pagina istituzionale. Quello che importa, ripeto, è la superficie sulla quale vuoi renderizzare l’immagine.

Ai fini dell’indicizzazione sui motori di ricerca, cambia qualcosa tra il _ e il – nel nome dell’immagine?

La differenza effettivamente c’è.
Per i motori di ricerca il trattino (“-“) corrisponde ad uno spazio, mentre l’underscore (“_”) viene considerato come elemento di congiunzione tra due stringhe appartenenti alla stessa parola.

Inoltre, durante l’editing del testo (in qualsiasi text area o all’interno di un editor di codice), se fai doppio click con il mouse su una stringa, la selezione si limiterà a quanto compreso tra “-” e “-“.  Se invece sono presenti “_” questi saranno trattati al pari delle altre lettere. Questa è una best practice che potrebbe agevolarti nel flusso di lavoro quotidiano.

Se devi trovare un tuo modo di nominare i file ti suggerisco quindi di preferire il “-“.

In WordPress quando si carica un’immagine, cosa va inserito nei campi “didascalia” e “descrizione”?

A differenza dell’attributo Alt, la didascalia e descrizione non sono influenti a livello SEO e/o utili per la lettura dell’immagine dagli screen reader. In molti, infatti, spesso lasciano entrambi i campi vuoti. In sostanza, la didascalia è quel testo (facoltativo) che compare sotto l’immagine per descriverla, mentre la descrizione è uno spazio in cui puoi fornire ulteriori informazioni sulla tua immagine che nella didascalia e nell’alt text non hai potuto inserire.

In merito ai nomi da dare alle immagini: a volte carico le immagini per fare varie prove e poi decidere. Per non perdere tempo le rinomino dopo dentro a WP. Può creare problemi?

Se ti riferisci ai campi “Titolo”, “Didascalia” e “Descrizione” che compili nella modale di upload dell’immagine in WP, è bene sapere che di fatto non stai rinominando il file ma stai assegnando degli attributi all’immagine.

Nominare semanticamente i file, seppure non sia una pratica obbligatoria, è sicuramente un qualcosa in più che aiuta la tua immagine ad essere indicizzata correttamente.

Se bisogna inserire un’immagine in un elemento che ha una determinata grandezza, anche l’immagine dovrà avere quella grandezza in risoluzione?

Esattamente. Inserire un’immagine più grande significherebbe obbligare il browser a scaricare informazioni che di fatto non servono. 

Parimenti, utilizzare un’immagine più piccola significa dire al browser “prendi questi pixel e stretchali in modo da occupare tutto il contenitore”. Ma le informazioni sono quelle: i pixel restano quelli. Vengono solo “spalmati” su una superficie più vasta.

Ho problemi con l’ottimizzazione delle immagini su WP. Mi appesantiscono il caricamento e se ottimizzo (lazy loading) non riesco più a visualizzarle.

I problemi di lentezza nel caricamento di una pagina sono attribuibili a diverse cause. Non per forza il problema è localizzato nella dimensione delle immagini. Alcuni fattori che concorrono sulla scarsa velocità di una pagina sono:

• Qualità del servizio di hosting
• Immagini troppo pesanti
• Codice non necessario (css ma soprattutto js ed eventuali dipendenze che ci portiamo dietro a livello di librerie)
• Plugin imperfetti o non necessari

In merito ti consiglio di servirti del servizio “Google PageSpeed Insights”, che vi ho citato. Ti aiuterà a capire quali possano essere i dettagli che causano difetti alle performance del sito.

Ho usato uno slider di immagini in home page che però appesantisce il caricamento. Che tipo di immagini e risoluzioni è meglio usare?

Innanzitutto considera che un deficit della performance in tal senso potrebbe essere attribuita non solo al peso delle immagini, ma anche alla qualità del codice con cui è scritto lo slider. Spesso questi plugin hanno dipendenze a librerie JavaScript e quindi devono caricare parecchi elementi che spesso non servono per il tuo scopo.

Ti consiglio di fare un po’ di ricerca online per capire se quello che stai utilizzando sia un plugin efficiente o se ci siano alternative migliorative. Evita di usare plugin che offrano features ulteriori a quelle che effettivamente ti servono.

In merito al formato delle immagini ospitate nello slider, ti suggerisco di utilizzare JPG ottimizzate (giusto rapporto qualità percepita/peso) oppure WEBP. Potrebbe essere l’occasione giusta per vedere quanto un’immagine WEBP, a parità di qualità percepita, possa essere più leggera rispetto all’equivalente JPG.

Come risoluzione per un’immagine sita all’interno di uno slider considererei il fatto che su mobile gli slider (o carousel) tendono a riempire tutta la larghezza della viewport del browser. Come detto ieri, sui dispositivi di alta gamma siamo attorno ai 1000px. Quindi per una ratio quadrata potresti utilizzare immagini a 1024x1024px se vuoi un’ottima resa. Se il problema dell’eccessivo peso rimane, passa a 512x512px e controlla che la qualità percepita su mobile non sia calata troppo.

Perché Google ci tiene così tanto a LCP? Se l’immagine si adatta al browser perché lo considera comunque un contenuto fuori misura?

Google vuole che internet sia fluido il più possibile e per questo motivo decide di premiare non solo la qualità dei contenuti ma anche l’esperienza dell’utente sul sito. L’algoritmo di Google si è affinato molto negli ultimi anni e sempre maggiore importanza è stata data alle performance delle pagine web. Se una pagina è ottimizzata al meglio, l’esperienza utente è ottimale, il tasso di abbandono si riduce e Google premia il sito con un ranking maggiore.

È rischioso utilizzare file SVG all’interno di un sito web ?

No. SVG è supportato da WordPress già da diverse release. Se hai un buon hosting e non fai errori particolari nella lavorazione del tuo sito, puoi stare tranquillo.

Quali specifiche dare ad un fotografo per poter poi lavorare comodamente le foto?

Un fotografo scatta a risoluzioni altissime. Tuttavia questo va bene poiché per il web puoi sempre fare un downscaling delle immagini. Il problema sarebbe fare il contrario, ossia partire da immagini a bassa risoluzione e allargarle. Il consiglio è di utilizzare le foto inviate ottimizzandole e ridimensionandole. Uno strumento gratuito e open-sorce ad esempio è XnView.

Se si esporta un vettoriale su un sito diventa di tipo raster? Come si fa a caricare una grafica vettoriale su un sito?

No, se carichi un SVG quello viene renderizzato direttamente dal browser. Chiaramente l’output è sempre un pixel perché il dispositivo fisico che lo mostra è uno schermo, però non è un formato di interscambio, è un formato che può essere messo in pasto direttamente al browser. Il browser è in grado di mostrarlo in modo chiaro.

Se io sviluppo un sito di larghezza massima 1920 px, dovrò caricare un immagine di dimensione 1920×3 affinché sia ottimizzata per schermo retina?

Nella tua domanda ci sono un paio di cose da chiarire.

Con “larghezza massima 1920” suppongo tu stia parlando di un layout per dispositivi desktop.

Quando si fa un sito responsive, ossia dove i contenuti hanno un comportamento differente in base al device che li sta mostrando, occorre pensare sia allo scenario desktop che allo scenario mobile.

Per restare sul tuo caso, puoi utilizzare l’immagine 1920px (full screen su desktop) anche su mobile. Ieri abbiamo infatti detto che i dispositivi Apple più recenti (iPhone 14pro) hanno 333px fisici in larghezza che equivalgono a 999px renderizzati (@3x, come dici tu). Quindi la stessa immagine 1920px usate per desktop è spendibile sui 999px del mobile.

Se poi tu volessi fare un lavoro ottimale dovresti servire alle due tipologie di dispositivi due immagini diverse (restando sul tuo caso, 1920px per desktop e 1000px per mobile). Questo lo fai con le cosiddette “media query” all’interno del codice css.