Quanto sono importanti le immagini nel tuo sito web? L\u2019immagine giusta posizionata nel modo giusto pu\u00f2 essere l\u2019elemento differenziante che ti permette di convertire i tuoi utenti. Ma serve cura nella scelta dei formati, nell\u2019ottimizzazione e negli strumenti di gestione. Vediamo insieme a un esperto tutto quello che c’\u00e8 da sapere sulle immagini, e nello specifico:<\/p>\n\n\n\n
In questo webinar Marco Tesselli, Graphic Designer in Antreem<\/a> con oltre 15 anni di esperienza, ci mostra le best practise per la scelta, l\u2019impiego e l\u2019ottimizzazione delle immagini per il web.<\/p>\n\n\n\n\n\n\n\n Come sempre vi chiedo di commentare il webinar, in modo da avere un feedback su come \u00e8 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<\/a>.<\/p>\n\n\n\n Per qualsiasi domanda, non esitate a commentare sotto questo articolo. \ud83d\ude42<\/p>\n\n\n\n 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 \u00e8 Microsoft Edge.<\/p>\n\n\n\n Non c’\u00e8 una risposta assoluta nell’indicare una “dimensione massima”. La soluzione migliore \u00e8 quella di cercare di ottenere il miglior rapporto peso\/qualit\u00e0 definendo inizialmente la dimensione di impiego e controllando la qualit\u00e0 percepita dal nostro occhio.<\/p>\n\n\n\n Un buon modo di ragionare potrebbe essere questo: 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\u00e0 continui ad essere soddisfacente.<\/p>\n\n\n\n Per “fare i conti della serva”, ossia per dare un suggerimento non assoluto, ti consiglio di non superare i 100kb per le immagini pi\u00f9 importanti della tua pagina. La differenza effettivamente c’\u00e8. 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\u00e0 a quanto compreso tra “-” e “-“. Se invece sono presenti “_” questi saranno trattati al pari delle altre lettere. Questa \u00e8 una best practice che potrebbe agevolarti nel flusso di lavoro quotidiano.<\/p>\n\n\n\n Se devi trovare un tuo modo di nominare i file ti suggerisco quindi di preferire il “-“.<\/p>\n\n\n\n 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 \u00e8 quel testo (facoltativo) che compare sotto l’immagine per descriverla, mentre la descrizione \u00e8 uno spazio in cui puoi fornire ulteriori informazioni sulla tua immagine che nella didascalia e nell’alt text non hai potuto inserire.<\/p>\n\n\n\n Se ti riferisci ai campi “Titolo”, “Didascalia” e “Descrizione” che compili nella modale di upload dell’immagine in WP, \u00e8 bene sapere che di fatto non stai rinominando il file ma stai assegnando degli attributi all’immagine.<\/p>\n\n\n\n Nominare semanticamente i file, seppure non sia una pratica obbligatoria, \u00e8 sicuramente un qualcosa in pi\u00f9 che aiuta la tua immagine ad essere indicizzata correttamente.<\/p>\n\n\n\n Esattamente. Inserire un’immagine pi\u00f9 grande significherebbe obbligare il browser a scaricare informazioni che di fatto non servono. <\/p>\n\n\n\n Parimenti, utilizzare un’immagine pi\u00f9 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\u00f9 vasta.<\/p>\n\n\n\n I problemi di lentezza nel caricamento di una pagina sono attribuibili a diverse cause. Non per forza il problema \u00e8 localizzato nella dimensione delle immagini. Alcuni fattori che concorrono sulla scarsa velocit\u00e0 di una pagina sono:<\/p>\n\n\n\n In merito ti consiglio di servirti del servizio “Google PageSpeed Insights”, che vi ho citato. Ti aiuter\u00e0 a capire quali possano essere i dettagli che causano difetti alle performance del sito.<\/p>\n\n\n\n Innanzitutto considera che un deficit della performance in tal senso potrebbe essere attribuita non solo al peso delle immagini, ma anche alla qualit\u00e0 del codice con cui \u00e8 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n In merito al formato delle immagini ospitate nello slider, ti suggerisco di utilizzare JPG ottimizzate (giusto rapporto qualit\u00e0 percepita\/peso) oppure WEBP. Potrebbe essere l’occasione giusta per vedere quanto un’immagine WEBP, a parit\u00e0 di qualit\u00e0 percepita, possa essere pi\u00f9 leggera rispetto all’equivalente JPG.<\/p>\n\n\n\n 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\u00e0 percepita su mobile non sia calata troppo.<\/p>\n\n\n\n Google vuole che internet sia fluido il pi\u00f9 possibile e per questo motivo decide di premiare non solo la qualit\u00e0 dei contenuti ma anche l’esperienza dell’utente sul sito. L’algoritmo di Google si \u00e8 affinato molto negli ultimi anni e sempre maggiore importanza \u00e8 stata data alle performance delle pagine web. Se una pagina \u00e8 ottimizzata al meglio, l’esperienza utente \u00e8 ottimale, il tasso di abbandono si riduce e Google premia il sito con un ranking maggiore.<\/p>\n\n\n\n No. SVG \u00e8 supportato da WordPress gi\u00e0 da diverse release. Se hai un buon hosting e non fai errori particolari nella lavorazione del tuo sito, puoi stare tranquillo.<\/p>\n\n\n\n Un fotografo scatta a risoluzioni altissime. Tuttavia questo va bene poich\u00e9 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 \u00e8 di utilizzare le foto inviate ottimizzandole e ridimensionandole. Uno strumento gratuito e open-sorce ad esempio \u00e8 XnView<\/a>.<\/p>\n\n\n\n No, se carichi un SVG quello viene renderizzato direttamente dal browser. Chiaramente l’output \u00e8 sempre un pixel perch\u00e9 il dispositivo fisico che lo mostra \u00e8 uno schermo, per\u00f2 non \u00e8 un formato di interscambio, \u00e8 un formato che pu\u00f2 essere messo in pasto direttamente al browser. Il browser \u00e8 in grado di mostrarlo in modo chiaro.<\/p>\n\n\n\n Nella tua domanda ci sono un paio di cose da chiarire.<\/p>\n\n\n\n Con “larghezza massima 1920” suppongo tu stia parlando di un layout per dispositivi desktop.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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\u00f9 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 \u00e8 spendibile sui 999px del mobile.<\/p>\n\n\n\n<\/span>Guarda le slide della presentazione di Marco Tesselli \ud83d\udc47<\/span><\/h2>\n\n\n\n
<\/span>Le vostre domande su come ottimizzare le immagini per il web<\/span><\/h2>\n\n\n\n
WordPress supporta le immagini in formato WebP e AVIF? Ho provato pi\u00f9 volte a usarli senza successo. Come posso fare?<\/h4>\n\n\n\n
Quale dovrebbe essere la dimensione massima di ogni immagine in una pagina? E quale risoluzione consigli per siti semplici come un blog?<\/h4>\n\n\n\n
Hero images<\/strong>: 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<\/strong>: tra i 512 e i 1024px. <\/p>\n\n\n\n
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, \u00e8 la superficie sulla quale vuoi renderizzare l’immagine.<\/p>\n\n\n\nAi fini dell’indicizzazione sui motori di ricerca, cambia qualcosa tra il _ e il – nel nome dell\u2019immagine?<\/h4>\n\n\n\n
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.<\/p>\n\n\n\nIn WordPress quando si carica un’immagine, cosa va inserito nei campi “didascalia” e “descrizione”?<\/h4>\n\n\n\n
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\u00f2 creare problemi?<\/h4>\n\n\n\n
Se bisogna inserire un’immagine in un elemento che ha una determinata grandezza, anche l’immagine dovr\u00e0 avere quella grandezza in risoluzione?<\/h4>\n\n\n\n
Ho problemi con l’ottimizzazione delle immagini su WP. Mi appesantiscono il caricamento e se ottimizzo (lazy loading) non riesco pi\u00f9 a visualizzarle.<\/h4>\n\n\n\n
\n
Ho usato uno slider di immagini in home page che per\u00f2 appesantisce il caricamento. Che tipo di immagini e risoluzioni \u00e8 meglio usare?<\/h4>\n\n\n\n
Perch\u00e9 Google ci tiene cos\u00ec tanto a LCP? Se l’immagine si adatta al browser perch\u00e9 lo considera comunque un contenuto fuori misura?<\/h4>\n\n\n\n
\u00c8 rischioso utilizzare file SVG all’interno di un sito web ?<\/h4>\n\n\n\n
Quali specifiche dare ad un fotografo per poter poi lavorare comodamente le foto? <\/h4>\n\n\n\n
Se si esporta un vettoriale su un sito diventa di tipo raster? Come si fa a caricare una grafica vettoriale su un sito?<\/h4>\n\n\n\n
Se io sviluppo un sito di larghezza massima 1920 px, dovr\u00f2 caricare un immagine di dimensione 1920×3 affinch\u00e9 sia ottimizzata per schermo retina?<\/h4>\n\n\n\n