Come ottimizzare le immagini in Elementor

Una foto può sembrare piccola in Elementor e richiedere comunque un download pesante. L’editor ne controlla l’aspetto; WordPress, hosting e plugin di ottimizzazione contribuiscono a determinare il file ricevuto dai visitatori. Questa guida spiega come interagiscono, soprattutto per widget Immagine, sfondi dei contenitori e prima grande immagine della pagina.

Scegli la risoluzione adatta nei widget Immagine

Seleziona un widget Image e apri la scheda Content. Cerca Image Resolution, chiamata Image Size in alcuni widget o nelle versioni precedenti. Qui scegli una dimensione WordPress, come Medium, Large o Full. Width e Max Width regolano invece lo spazio occupato nel layout. La documentazione del widget Image descrive questi controlli.

Full non significa semplicemente «riempi la colonna». Seleziona come sorgente l’allegato a dimensione intera. Per un file grande, WordPress potrebbe aver già creato una versione intera ridimensionata: non è quindi sempre l’originale intatto della fotocamera. La documentazione sulla generazione delle dimensioni WordPress spiega questo comportamento.

Anche il browser interviene: se l’immagine pubblicata include srcset e sizes, può scegliere tra i file disponibili in base a layout, densità di pixel e proprie decisioni di caricamento. Full non garantisce quindi che tutti scarichino il file più grande. Una risoluzione adeguata e un caricamento di dimensioni ragionevoli restano una base migliore del solo automatismo.

Sono esempi, non dimensioni obbligatorie di Elementor. Le dimensioni registrate in WordPress dipendono da impostazioni, tema e plugin. Anche l’altezza deve bastare per il ritaglio previsto. Raddoppiare la larghezza può aiutare sugli schermi ad alta densità, ma è un compromesso tra qualità e peso, non una regola per esportare tutto al doppio.

La risoluzione Custom può servire quando i formati standard non sono adatti. Controlla il ritaglio e che l’immagine pubblicata offra ancora versioni responsive adeguate. Custom non migliora sempre la distribuzione e non disattiva necessariamente le immagini responsive.

Modificare Style → Width o Max Width non ridimensiona né ricomprime il file salvato. Il markup responsive può aiutare il browser a scegliere una versione più piccola, ma ridurre la larghezza visibile non dimostra da solo una diminuzione dei dati scaricati.

Ottimizza gli sfondi dei contenitori per il mobile

Un’immagine inserita tramite Style → Background di un contenitore o sezione diventa normalmente uno sfondo CSS. A differenza di un’immagine HTML, non possiede attributi srcset o sizes. Senza varianti fornite da un altro sistema, un telefono può quindi scaricare lo stesso sfondo del desktop.

Decidi prima se l’immagine debba essere uno sfondo. Una texture decorativa o un’immagine d’atmosfera può andare bene. Foto di prodotti, diagrammi e immagini con informazioni essenziali funzionano di solito meglio come widget Image, con testo alternativo e versioni responsive.

Se lo sfondo richiede una composizione diversa sul mobile:

1. Seleziona il contenitore o la sezione e apri Style → Background.
2. Passa al breakpoint mobile tramite il controllo responsive dello sfondo, se presente nel tuo editor.
3. Scegli una copia mobile ritagliata secondo le proporzioni del contenitore. Un’area principale alta può richiedere un taglio verticale; un banner basso può restare orizzontale.
4. Scegli Cover per riempire l’area senza deformazioni. Mantiene le proporzioni e ritaglia ciò che supera il contenitore.
5. Regola la posizione per mantenere visibile il soggetto e prova anche larghezze vicine al breakpoint.

Controlla altezza del contenitore, contrasto del testo e richiesta dell’immagine sulla pagina mobile pubblicata. Un ritaglio diverso può migliorare la composizione, ma riduce i dati solo se la versione mobile sostituisce davvero il file maggiore. Nascondere una sezione desktop separata non garantisce che le sue immagini non vengano richieste.

Carica subito l’immagine principale

Largest Contentful Paint (LCP) misura quando compare l’elemento di contenuto visibile più grande nella schermata iniziale. Può essere un’immagine principale, uno sfondo o un blocco di testo. Individua l’elemento LCP effettivo in un rapporto sulle prestazioni prima di cambiare le priorità.

Il caricamento differito, o lazy loading, è utile più in basso nella pagina. Può però ritardare l’immagine principale perché il browser aspetta di stabilire quando serve. La guida Google all’ottimizzazione del LCP consiglia di rendere individuabile presto l’immagine LCP e di non caricarla in modo differito.

• Parti dall’automatismo di Elementor: Attiva Optimized Image Loading nelle impostazioni descritte sotto e controlla il risultato pubblicato.
• Controlla gli altri sistemi di lazy loading: Plugin di cache o ottimizzazione possono cambiare il risultato. Se ritardano l’immagine principale, usa le esclusioni del plugin per quell’immagine o elemento.
• Distingui caricamento immediato e priorità: Un’immagine HTML senza lazy loading può iniziare a caricarsi normalmente. loading="eager" lo richiede espressamente; fetchpriority="high" è un’indicazione di priorità separata. Assegnare priorità alta a tutto ne annulla l’utilità.
• Esamina gli sfondi principali separatamente: Non usano gli attributi di caricamento degli elementi immagine. Se lo sfondo è l’elemento LCP e la richiesta parte tardi, verifica quando CSS o script di lazy loading rendono disponibile l’URL. Ridurre le dimensioni non elimina da solo quel ritardo.
• Rivaluta gli slider iniziali: Un’unica immagine statica è più facile da prioritizzare. Se mantieni lo slider, controlla se le slide nascoste competono con la prima visibile durante il caricamento.

Riserva lo spazio delle immagini prima del caricamento

Cumulative Layout Shift (CLS) misura spostamenti inattesi del contenuto visibile. Se il browser ignora lo spazio necessario, testo e pulsanti possono muoversi quando arriva l’immagine. Le dimensioni aiutano a riservare quello spazio.

1. Mantieni gli attributi di larghezza e altezza: Il normale HTML delle immagini WordPress li include. Indicano le proporzioni e possono funzionare con CSS responsive.
2. Definisci il riquadro: Per schede ritagliate in modo uniforme, riserva spazio con un rapporto d’aspetto o dimensioni di layout esplicite. Usa i controlli del widget o CSS aspect-ratio quando serve. Per riempire un riquadro fisso, object-fit: cover conserva le proporzioni durante il ritaglio.
3. Prova i template con contenuti diversi: In Theme Builder o Loop Grid, visualizza articoli con immagini in evidenza orizzontali, verticali o mancanti. Prevedi un’area immagine stabile e un’immagine sostitutiva se necessaria.

Uno sfondo CSS non dà un’altezza naturale al contenitore. Lo spazio dipende da layout, contenuto, padding o altezza minima. Controlla questi valori a ogni breakpoint, senza aspettarti che il file di sfondo mantenga aperta la sezione.

Controlla separatamente gallerie, caroselli e lightbox

Una galleria deve offrire una panoramica compatta e mostrare abbastanza dettagli quando si apre un’immagine. Le due funzioni possono richiedere file diversi.

• Scegli la risoluzione in base alla slide o scheda visibile: Un carosello con quattro immagini piccole non richiede la risoluzione di una sola immagine a tutta larghezza. Controlla anche il mobile, dove meno slide simultanee possono allargare ogni immagine.
• Separa anteprima e ingrandimento: Imposta una risoluzione adatta alla griglia e configura collegamenti Media File e Lightbox se serve una vista ingrandita. Ottimizza anche il file grande. Controlla le richieste prima e dopo l’apertura: il precaricamento può variare.
• Controlla il template del loop: Per schede di archivio e Loop Grids, regola Featured Image dentro l’elemento ripetuto. Un’immagine eccessiva ripetuta può appesantire tutto l’archivio anche se le schede sembrano piccole.

Scegli un formato adatto all’immagine

Confronta i formati alle stesse dimensioni e con una qualità che pubblicheresti davvero. Non esiste una percentuale di risparmio fissa per tutte le immagini.

• WebP: Un buon punto di partenza per foto e molte illustrazioni. Supporta compressione con perdita, senza perdita e trasparenza. Prova JPG in WebP o PNG in WebP e osserva dettagli e bordi.
• JPG: Pratico per foto quando un’altra fase del lavoro lo richiede. Regola la qualità confrontando i risultati anziché considerare universale una percentuale.
• PNG: Utile per grafica senza perdita, screenshot e processi che lo richiedono. La sola trasparenza non impone PNG invece di WebP. Le foto PNG sono spesso molto più pesanti di un’esportazione con perdita adeguata.
• AVIF: Da confrontare per le foto se WordPress, hosting e sistema di ottimizzazione lo supportano. Prova elaborazione dopo il caricamento e distribuzione pubblicata prima di convertire l’intera libreria.
• SVG: Adatto a loghi e icone vettoriali. Usa fonti affidabili e segui le indicazioni Elementor per caricare SVG, comprese pulizia dei file e precauzioni di caricamento.

La nostra guida ai formati immagine per il Web approfondisce vantaggi e compromessi.

Prepara ogni immagine per la sua posizione

Conserva l’originale separatamente ed esporta una copia per il sito. Anche il file a dimensione intera resterà gestibile, cosa importante per sfondi e immagini aperte dalle gallerie.

1. Misura la massima visualizzazione prevista: Controlla desktop e mobile. Un’immagine accanto al testo può occupare un’intera riga sul tablet e diventare più larga.
2. Ritaglia per il layout: Elimina spazio inutile con lo strumento di ritaglio mantenendo il soggetto. Lascia posto al testo eventualmente sovrapposto.
3. Ridimensiona una copia: Confronta misure adatte con lo strumento di ridimensionamento. Non ingrandire una piccola sorgente solo per raggiungere una larghezza prestabilita.
4. Comprimi e controlla: Usa il compressore di immagini e confronta l’esportazione alla dimensione finale. Una principale da 100–200 KB o un’immagine di contenuto sotto 100 KB può essere un obiettivo iniziale. Dettagli, dimensioni e peso complessivo della pagina determinano ciò che è ragionevole.
5. Assegna nome e descrizione: Scegli un nome descrittivo come office-reception.webp. Aggiungi testo alternativo che esprima la funzione delle immagini informative; quelle decorative richiedono normalmente testo alternativo vuoto. Segui le indicazioni Google sulla SEO delle immagini senza riempire i campi di parole chiave.

Se un plugin ottimizza nuovamente il caricamento, confronta l’immagine distribuita alla fine. Compressioni con perdita ripetute possono rovinare texture fini o testo anche quando ogni singola impostazione sembra ragionevole.

Controlla le impostazioni delle prestazioni in Elementor

La documentazione attuale colloca questi controlli nella bacheca WordPress, in Elementor → Editor → Settings → Performance. Le installazioni precedenti possono mostrare menu diversi. La guida ufficiale alle prestazioni distingue le schede Performance e Features.

• Optimized Image Loading: Aiuta a dare priorità alla probabile immagine LCP e gestisce il lazy loading più in basso. Consulta la guida Elementor all’ottimizzazione del caricamento. Verifica il risultato, soprattutto se altri plugin modificano il markup delle immagini.
• Lazy Load Background Images: Secondo la documentazione rimanda il caricamento degli sfondi, tranne il primo. Controlla che lo sfondo visibile in cima alla tua pagina reale arrivi rapidamente.

Modifica un’impostazione alla volta, svuota le cache interessate e prova la pagina pubblicata. Questi controlli agiscono sul caricamento, ma non sostituiscono dimensioni adatte o compressione dei file.

Verifica la pagina pubblicata

Inizia dall’aspetto senza essere autenticato: il ritaglio è corretto, il testo leggibile e il layout stabile mentre compaiono le immagini? Esamina poi i file se un’immagine resta pesante, sfocata o lenta.

1. Apri la pagina pubblicata in una finestra privata. Negli strumenti di sviluppo scegli Network, filtra per Img e attiva Disable cache mentre gli strumenti restano aperti.
2. Ricarica e ordina le richieste per dimensione trasferita. Parti dai file più grandi e dalle immagini subito visibili.
3. Esamina URL e anteprima per trovare le dimensioni effettive. Confrontale con visualizzazione e densità di pixel. Un file da 2400 pixel in una scheda da 350 merita verifica; 700 pixel può essere adatto su uno schermo 2×.
4. Per immagini HTML, controlla srcset e sizes se il browser sceglie sempre una variante troppo grande. Verifica caricamento e priorità sul vero elemento <img>, non soltanto sul widget che lo contiene.
5. Passa all’emulazione mobile prima di ricaricare e controlla le versioni di sfondo e immagini richieste. Conferma l’aspetto su un telefono reale.

Esegui PageSpeed Insights prima e dopo la modifica in condizioni comparabili. Guarda l’elemento LCP e le segnalazioni sulle immagini, non soltanto il punteggio totale. Una piccola immagine principale che parte tardi ha un problema diverso da un file grande richiesto subito.

Se resta una vecchia immagine, verifica prima file selezionato e breakpoint. Svuota poi le cache di pagina, ottimizzazione e CDN pertinenti. Se il vecchio URL proviene dal CSS Elementor, usa la rigenerazione di file o CSS in Tools; il nome varia secondo la versione. Rigenerare CSS non crea dimensioni di miniature WordPress mancanti.

Esempio: immagine accanto a una colonna di testo

Immagina una foto del team da 4800 × 3200 pixel e 5,4 MB. La colonna è larga circa 550 pixel su desktop, ma al breakpoint tablet la foto occupa tutta una riga.

1. Controlla la posizione più larga: Se sul tablet raggiunge circa 700 pixel, usa questa larghezza per confrontare le esportazioni anziché basarti solo sulla colonna desktop.
2. Prepara ritaglio e misure: Se il 4:3 funziona, confronta 1000 × 750 e 1400 × 1050 pixel. Esamina volti e dettagli importanti alla dimensione finale.
3. Confronta la compressione: Prova WebP a qualità moderata e controlla il risultato. Annota il peso reale: una foto di gruppo dettagliata può richiedere più dati di un ritratto semplice con le stesse misure.
4. Configura il widget: Carica l’esportazione scelta, aggiungi testo alternativo e imposta Image Resolution. Per un file da 1400 pixel potrebbe servire Full per rendere disponibile la versione maggiore. Verifica i file responsive offerti dalla pagina.
5. Verifica il risultato: Controlla richieste desktop e mobile, nitidezza e stabilità. Più in basso il lazy loading può essere adatto; se è l’immagine LCP, deve caricarsi presto.

Risolvi i problemi più comuni delle immagini

Perché l’immagine sembra sfocata?

Controlla Image Resolution, dimensioni della sorgente e file scelto dal browser. Una miniatura da 300 pixel estesa a 600 perde nitidezza, ma aumentare la risoluzione non recupera dettagli assenti nell’originale. Controlla anche compressione e ritagli che ingrandiscono una piccola parte. Leggi la nostra guida alle immagini sfocate sui siti.

Perché lo sfondo mobile manca o è ritagliato male?

Controlla immagine del breakpoint mobile, impostazioni ereditate, visibilità e altezza del contenitore. Cover riempie ritagliando: se il soggetto scompare, cambia posizione o ritaglio. Le proporzioni non dovrebbero deformarsi. Se il file non viene caricato, cerca prima errori nella richiesta.

Perché le modifiche non compaiono sul sito pubblicato?

Verifica di aver aggiornato widget, template e breakpoint corretti. Controlla l’URL pubblicato per distinguere un vecchio file da vecchi stili. Svuota le cache pertinenti e rigenera il CSS Elementor se punta ancora allo sfondo precedente. Ripetere gli upload senza trovare la causa può creare duplicati inutili.

Domande frequenti

Devo sempre evitare Full?

No. Full può andare bene per un file preparato per quella posizione. Controlla dimensioni originali, versioni responsive e file scaricato. Full non serve a riempire la colonna: quello dipende dal layout.

Elementor comprime automaticamente le immagini caricate?

I controlli di risoluzione e caricamento del costruttore non comprimono il file caricato. WordPress crea dimensioni e usa impostazioni di qualità per formato, senza garantire una libreria ottimizzata. Elementor offre anche il prodotto separato Image Optimizer; hosting e plugin possono svolgere elaborazioni simili. Verifica cosa è attivo prima di aggiungere un altro sistema.

Posso caricare direttamente WebP?

WordPress supporta WebP. L’hosting deve avere un’elaborazione compatibile per generare versioni ridotte. Prova quindi un file dal caricamento alla selezione del widget e alla pagina pubblicata prima di convertire tutta la libreria.

Quali dimensioni scegliere per l’immagine principale?

Basati sulla massima visualizzazione e sul ritaglio. Una larghezza di 1600–1920 pixel è un punto di confronto ragionevole per molti layout desktop, ma non è un limite Elementor né una garanzia di nitidezza su ogni schermo. Verifica l’esigenza di un ritaglio mobile e confronta peso e dettaglio.

L’ottimizzazione delle immagini migliora il posizionamento Google?

Può migliorare caricamento ed esperienza, ma non garantisce posizioni più alte. Le indicazioni Google sull’esperienza di pagina spiegano che i Core Web Vitals partecipano ai sistemi di ranking, mentre buoni punteggi da soli non garantiscono le prime posizioni. Immagini pertinenti, nomi descrittivi e testi alternativi utili aiutano anche a capire il contenuto. Leggi la nostra guida a testo alternativo e nomi dei file.