È ovvio che le foto sono parte integrante della nostra vita. Di conseguenza, difficilmente possiamo immaginare un sito web senza immagini. Le immagini attirano la vista dei visitatori e aiutano a organizzare i contenuti del sito. Le immagini rendono una pagina interessante, ricca di informazioni e migliorano l’esperienza dell’utente.
Le immagini sovradimensionate hanno un effetto negativo sulle prestazioni di un sito Web e le immagini dovrebbero essere ridimensionate in base al tema attivo. Sono elementi importanti in un sito web e meritano di essere mostrati nel miglior modo possibile. È molto importante fornire immagini in scala su un sito WordPress.
Le dimensioni delle immagini in scala si adattano alla giusta dimensione in base a quelle definite in HTML e CSS. Tuttavia, non molti webmaster prestano attenzione a questo importante dettaglio di design. Prendi l’esempio di un’immagine con 500 x 500 pixel per una miniatura di 50 x 50. Il browser web deve scaricare l’immagine e ridimensionarla in modo che possa essere mostrata al visitatore. Chiaramente, questo è inefficiente e rallenterà il sito web.
La differenza di risoluzione non è visibile e quindi il peso che le immagini di grandi dimensioni portano con sé spesso passa inosservato. La maggior parte delle persone non è nemmeno consapevole del fatto che questa risoluzione eccessiva sta causando problemi e il problema non è stato risolto. Lasciano il problema da gestire al browser.
Perché servire immagini in scala su un sito WordPress
Il motivo principale per la pubblicazione di immagini in scala è che le immagini ad alta risoluzione completa rallentano un sito Web e aumentano i tempi di caricamento. Una pagina lenta porta a un’esperienza utente scadente e invece di rimanere e tornare, se ne andranno e staranno lontani. Le statistiche di Kissmetrics mostrano che le pagine che impiegano più di tre secondi per essere caricate avranno una frequenza di rimbalzo maggiore.
Con le dimensioni dell’immagine ottimizzate su un sito Web, i tempi di caricamento saranno più brevi. È più probabile che le persone rimangano più a lungo sul sito Web e tornino più tardi. Questo migliora la SEO e il posizionamento del sito web salirà.
Immagini di grandi dimensioni causano problemi diversi
- Aumenta lo stress sulle prestazioni del browser. Il browser dovrà eseguire richieste server aggiuntive. Non può mostrare l’immagine velocemente, ma richiederà tempo e risorse per ridimensionare l’immagine. I siti Web con immagini pesanti richiedono più tempo per essere caricati.
- Se le immagini ad alta risoluzione di grandi dimensioni vengono visualizzate di piccole dimensioni su un sito Web, sprecano tempo e scaricano dati. Questo è il caso, ad esempio, quando un selfie da un telefono cellulare viene utilizzato non elaborato per un minuscolo Gravatar.
Come ridimensionare le immagini su siti Web WordPress
Manualmente
Per iniziare dall’inizio, analizza le immagini sul sito utilizzando uno strumento come GTMetrix. GTMetrix è uno strumento di analisi delle prestazioni, progettato da GT.net. Questa azienda è famosa per il monitoraggio e l’ottimizzazione della velocità e Pingdom. Dopo che GTMetrics ha analizzato il sito Web, genera un rapporto. Questo mostra quali problemi sono stati rilevati e quali miglioramenti consiglia.
Durante la revisione del rapporto, prestare particolare attenzione alla scheda Struttura. In questa scheda, fai clic su Immagini di dimensioni corrette. Mostrerà un elenco di immagini che non sono dimensionate correttamente.
WordPress non riduce automaticamente le immagini quando possibile, ma le aggiunge al sito senza elaborarle. Per risolvere questo problema ci sono due opzioni.
Anche se l’uso dei plugin non è il modo desiderato, ci sono altre opzioni. Il primo modo per ridimensionare le immagini è regolare manualmente le dimensioni di ciascuna utilizzando un editor di foto, come Photoshop. Può sembrare che questo metodo sia inefficiente ma in realtà non lo è.
In Photoshop ci sono più opzioni oltre a regolare l’altezza e la larghezza dell’immagine. Un’altra cosa da controllare qui è la risoluzione dell’immagine. Il più delle volte, per le applicazioni web, 72 PPI sono sufficienti per una buona esperienza visiva.
Il secondo è usare un plugin per ridimensionare le immagini. Questa opzione è facile e veloce. WordPress ha la sua funzione per farlo, srcset. Questo strumento può convertire la grafica, come le immagini, in file reattivi. Le immagini reattive vengono adattate automaticamente a diversi dispositivi e dimensioni dello schermo. Di seguito sono riportati alcuni altri plugin che fanno un ottimo lavoro nel ridimensionamento delle dimensioni delle immagini.
Ottimo
Uno strumento eccellente per servire immagini in scala è Optimole. È un plugin per WordPress in grado di ridimensionare le immagini per diversi dispositivi. Ridimensiona automaticamente alla dimensione ottimale per un’immagine, in base ai diversi tipi di dispositivi. I risultati sono immagini in scala di alta qualità.
Queste sono alcune delle caratteristiche che rendono Optimole una scelta interessante:
- Le immagini elaborate sono più piccole ma mantengono la loro qualità.
- È completamente automatizzato. Si tratta solo di caricare le immagini.
- Optimole supporta tutti i formati di immagine.
- Supporta diversi tipi di immagine, inclusi Retina e WebP
- Supporta le librerie di immagini cloud.
- Optimole fornisce gratuitamente immagini CDN globali.
- Non è necessario indovinare o stimare la dimensione desiderata. Optimole utilizza le specifiche del dispositivo del visitatore.
- C’è il pieno supporto per i costruttori di siti web, come Elementor.
La funzione di elaborazione automatica delle immagini è un grande vantaggio di questa opzione di plug-in. Non è necessario scorrere un lungo elenco di impostazioni; Optimole fa tutto da solo.
In Media > Optimole il plugin mostra lo stato dei servizi, nonché l’ utilizzo e l’ ottimizzazione raggiunti.
La sezione Opzioni si trova nella scheda Impostazioni . Qui, ci sono due caratteristiche che meritano una menzione speciale:
- Abilita la sostituzione dell’immagine. Assicurati che questa opzione sia abilitata per usufruire della funzionalità avanzata di ottimizzazione delle immagini.
- Immagini in scala e carico pigro. Questa è l’opzione che permette il ridimensionamento delle immagini in base alle dimensioni dello schermo del visitatore. Il caricamento lento mostra queste immagini.
Ottimizzazione dell’immagine Smussh
Smush Image Optimization, Compression e Lazy Load è il nome completo in questo elenco di plugin. Quando si ridimensionano le immagini assicurarsi che la qualità dell’immagine sia preservata.
Per utilizzare WP Smush è necessario prima installarlo e attivarlo. Quindi l’icona Smush apparirà nella dashboard di WordPress. Nella dashboard compaiono le statistiche che Smush accumula e lo stato attuale delle diverse funzionalità.
Accanto ai Dati sul Risparmio Totale, apparirà un’icona che riporta tutte le immagini nella libreria multimediale che richiedono l’elaborazione. Se ci sono immagini che necessitano di elaborazione, la cosa più semplice da fare è andare al modulo Bulk Smush. Questo ridimensionerà tutte le immagini che contrassegna.
Per elaborare individualmente le immagini, vai al Catalogo multimediale e fai clic su Ricontrolla le immagini. Ciò produce un aggiornamento in tempo reale delle immagini che devono essere elaborate.
Smush ha funzionalità che consentono il filtraggio delle immagini in base allo stato Smush e il ridimensionamento selettivo delle immagini.
Il plug-in Smush non elabora video e file GIF. I file di immagine che non vengono ridimensionati indicano che il potere di Smush non viene utilizzato appieno.
EWWW Ottimizzatore di immagini
EWWW Image Optimizer è anche un plugin per WordPress che ottimizza le dimensioni e i formati delle immagini. Funziona con nuovi caricamenti e immagini esistenti. È dotato di un’opzione che esegue la scansione di tutte le immagini su un sito Web e le ottimizza.
Per iniziare ad usarlo, scaricalo e installalo e attivalo dall’area di amministrazione del sito WordPress. Nell’ambiente Dashboard, fai clic su Impostazioni, quindi su EWWW Image Optimizer. In Impostazioni di base, si trovano varie opzioni, come la rimozione dei metadati dalle immagini. Il livello di ottimizzazione per GIF, JPG e PNG deve essere impostato su Pixel Perfect. Solo la versione a pagamento consente anche l’ottimizzazione dei file PDF.
La scheda Ridimensiona contiene un’opzione Rilevamento ridimensionamento . In Ridimensiona immagini impostare l’altezza e la larghezza massime consentite delle immagini sul sito web. Inoltre, attiva le opzioni Ridimensiona altre immagini e Ridimensiona immagini esistenti. Non dimenticare di salvare le modifiche.
ShortPixel
La raccomandazione finale per la pubblicazione di immagini in scala è il plug-in ShortPixel. Questa è l’opzione giusta per coloro che devono offrire immagini in scala ma hanno un budget limitato. La versione gratuita offre 100 ridimensionamenti delle immagini al mese.
ShortPixel è semplice e facile da usare. Elabora automaticamente le immagini alle dimensioni specificate dall’utente durante il caricamento sul sito web. Oltre all’opzione automatica, c’è anche un’opzione per elaborare le immagini manualmente.
Il plugin riduce le dimensioni dell’immagine senza perdita di dati o con perdita di risoluzione. È in grado di elaborare immagini GIF, JPEG e PNG e può persino ottimizzare i file PDF.
Considerazioni finali su come servire immagini in scala
Chiaramente, ci sono molti modi per servire immagini in scala su un sito WordPress e farlo non deve essere difficile o costoso. Il problema è quando il sito è online da molto tempo e ci sono molte immagini da elaborare.
Il ridimensionamento delle immagini è un’abilità importante per chiunque crei o mantenga un sito web. Aiuta a rendere più veloci i siti Web lenti e offre altri vantaggi in termini di prestazioni. La corretta specifica dell’immagine migliorerà la velocità di qualsiasi sito web.
Se ti è piaciuto leggere questo articolo su come servire immagini in scala in WordPress, dovresti dare un’occhiata a questo su come rendere cliccabile un numero di telefono in WordPress.
Abbiamo anche scritto di alcuni argomenti correlati come come incorporare un video di Facebook in WordPress, come eliminare i temi di WordPress, come scansionare il database di WordPress alla ricerca di malware, come caricare un file HTML in WordPress, come eseguire una pulizia del database di WordPress, come trovare e sostituire un URL in un database di WordPress e come nascondere l’autore in WordPress