Hai mai visitato un sito e te ne sei andato in pochi secondi perché le immagini non si caricavano abbastanza velocemente? È esattamente quello che i tuoi visitatori potrebbero sperimentare se non stai fornendo immagini scalate sul tuo sito WordPress. 

Questo problema si verifica quando le tue immagini sono troppo grandi per le loro dimensioni di visualizzazione, il che fa sì che il tuo sito si carichi lentamente e influisca negativamente sull'esperienza dell'utente.

Ma non preoccuparti, ti abbiamo coperto! Segui il rapido tutorial qui sotto per imparare come servire immagini scalate facilmente!

Perché devi servire immagini scalate?

Le immagini scalate sono immagini che sono state ridimensionate per corrispondere alle dimensioni esatte con cui verranno visualizzate su una pagina web. Questo è diverso dagli upload originali, che di solito hanno dimensioni e risoluzioni molto più grandi.

Ad esempio, la tua immagine in evidenza originale può essere 4000 x 3000 pixel, ma il tuo sito web la visualizza solo a 800 x 600 pixel. Se l'immagine originale viene usata al posto della versione ridotta, il tuo sito si caricherà più lentamente.

Quando le immagini non sono scalate correttamente, il browser deve ridimensionarle manualmente al volo. Questo rallenterà il caricamento della pagina, costringendo gli utenti ad attendere e potenzialmente aumentare il tasso di rimbalzo.

È importante usare immagini scalate perché non farlo può portare a diversi problemi:

• Tempi di caricamento inutili, poiché gli utenti devono scaricare file più grandi del necessario.
• Immagini pixelate o sfocate, se l'immagine è troppo piccola e viene allungata.
• Tempo di elaborazione aumentato, poiché il browser deve ridimensionare le immagini al volo, causando ritardi nella visualizzazione del contenuto.

Guida passo-passo

1. Usa strumenti di modifica delle immagini

Questo metodo offre un ridimensionamento delle immagini più veloce utilizzando strumenti di editing. Puoi usare strumenti come Adobe Photoshop per creare immagini correttamente scalate. Photoshop consente una personalizzazione estesa così puoi decidere le dimensioni dei pixel in base ai requisiti di dimensione.

Se stai cercando un'alternativa gratuita, gli strumenti online come PhotoPea sono una buona opzione. Ma per questo tutorial, ci concentreremo su Photoshop per le sue funzionalità complete.

Per ridimensionare un'immagine prima di caricarla, segui il tutorial qui sotto:

• Apri la tua immagine in Photoshop
• Fai clic sul Image scheda e seleziona Image Size

• Nella finestra di dialogo che appare, modifica la dimensione dell'immagine in base ai requisiti di visualizzazione della pagina web. 

Ad esempio, se la tua immagine originale è 1281 x 493 px e vuoi ridimensionarla a 3600 x 2400 px, inserisci le nuove dimensioni. 

• Modifica il Risoluzione a 72 PPI per l'uso web, o 300 PPI se hai bisogno di alta qualità di stampa.
• Quindi, seleziona un metodo di ricampionamento. Le due opzioni più adatte per l'ottimizzazione web sono:

• Fai clic OK per applicare le modifiche. La tua immagine è ora ridimensionata.
• Per salvare l'immagine, apri il File scheda e seleziona Esporta.

• Fai clic Esporta come e scegli qualsiasi formato di file e regola le impostazioni per ottenere la dimensione di file più piccola possibile senza perdere troppa qualità dell'immagine.

2. Sfrutta le dimensioni di immagine integrate di WordPress

Se preferisci non installare alcun software di terze parti, puoi utilizzare l'editor di immagini integrato in WordPress. Con questo strumento, puoi eseguire operazioni di base di modifica delle immagini come ritaglio, capovolgimento e ridimensionamento.

Puoi accedere a questa funzionalità facendo clic su qualsiasi immagine nel tuo post o nella libreria media. Inoltre, puoi definire dimensioni personalizzate delle immagini modificando il file functions.php del tuo tema.

Per semplificare le cose, iniziamo con una guida di base qui sotto:

• Carica la tua immagine nel tuo post WordPress. 

• Seleziona l'immagine, poi fai clic Sostituisci e scegli Apri Libreria Media dal menu.

• Nella barra laterale, fai clic Modifica immagine.

• Verrai portato all'editor di immagini. Fai clic su Scala per ridimensionare un'immagine

• Inserisci il nuova dimensione per la tua immagine. Ad esempio, cambialo da 1198 × 744 px a 805 x 500 px. Il rapporto d'aspetto è vincolato, quindi l'altro valore si aggiusterà automaticamente in base alla larghezza o all'altezza inserita.

• Fai clic su Scala pulsante per applicare le modifiche.
• La tua immagine è ora ridimensionata e pronta per l'uso nel tuo post.

3. Utilizza i plugin

• Installa e attiva WP Meta SEO sul tuo sito WordPress.

• Dal tuo cruscotto WordPress, vai a WP Meta SEO > editor di immagini.

• Apri le impostazioni Image SEO & HTML Resize.

• Abilita l'opzione Dynamic Image Resizing per consentire a WP Meta SEO di ridimensionare automaticamente le immagini in base alle loro dimensioni di visualizzazione.

• Definisci i valori massimi di larghezza e altezza per controllare come le immagini vengono ridimensionate sul front end.

Una volta abilitato, WP Meta SEO regolerà automaticamente le dimensioni delle immagini quando verranno visualizzate sul tuo sito, garantendo dimensioni ottimali senza intervento manuale. Questo approccio migliora la velocità della pagina, potenzia le prestazioni SEO e offre un'esperienza utente migliore—soprattutto per i siti ricchi di immagini. 

Per ulteriori dettagli, puoi consultare la documentazione ufficiale e la panoramica delle funzionalità:

• WP Meta SEO Funzionalità Image SEO & HTML Resize
• Dinamico Documentazione sul ridimensionamento delle immagini

4. Implementa immagini responsive usando l'attributo srcset

Il attributo srcset è usato nel tag in HTML per fornire diverse sorgenti di immagini per varie risoluzioni dello schermo. Aggiungendo questo attributo, il browser può selezionare l'immagine più appropriata in base al dispositivo dell'utente.

Ad esempio, se un utente accede al tuo sito web su un dispositivo mobile con un display a bassa risoluzione, il browser caricherà un'immagine a risoluzione inferiore per fornire un'esperienza più fluida.

Se vuoi sapere come servire immagini scalate manualmente, segui le istruzioni qui sotto:

• Apri il file HTML del sito tramite il tuo editor di codice.
• Individua il tag per l'immagine che desideri ottimizzare.

• Modifica il tag e aggiungi l'attributo srcset, come mostrato nell'immagine. 

In questo esempio, 100w e 400w indicano la larghezza reale di ciascuna immagine. Il browser utilizzerà queste informazioni per decidere quale immagine caricare sul dispositivo dell'utente.

• Salva le modifiche e ricarica il tuo sito web per vedere il risultato.

Come identificare le immagini non scalate

Dopo aver imparato come ottimizzare le immagini, è anche importante identificare quali immagini devono ancora essere ridimensionate e quali sono già ottimizzate.

Esistono due modi comuni per verificare la presenza di immagini non ridimensionate, oppure utilizzando strumenti o eseguendo un audit regolare del sito. Segui il tutorial qui sotto:

1. Utilizzando Google PageSpeed Insights

Questo è uno strumento essenziale che offre suggerimenti per rendere il tuo sito web più veloce. Questi suggerimenti sono generati attraverso un'analisi approfondita usando Google Lighthouse. Un suggerimento comune è ridimensionare correttamente qualsiasi immagine contrassegnata come non scalata.

Per fare un controllo rapido, puoi seguire le istruzioni qui sotto:

• Apri Google PageSpeed Insight su https://pagespeed.web.dev

• Incolla l'URL completo URL della tua pagina web nel campo di input.
• Fai clic su Analizza per avviare il processo.
• Attendi il completamento. PSI ti fornirà quindi un rapporto sulle prestazioni.
• Scorri verso il basso per trovare una voce etichettata Dimensiona correttamente le immagini
• Se presente, vedrai un elenco di immagini non scalate trovate sul tuo sito.

Se una delle tue immagini è contrassegnata come non scalata, Google PageSpeed Insights potrebbe offrire diversi suggerimenti, tra cui:

• Fornire immagini in formati di nuova generazione, come WebP, AVIF, JPEG XR o JPEG2000.
• Ridimensionare correttamente le immagini per soddisfare diverse esigenze di dimensione, ad esempio ridimensionandole a 1000 x 1000 px per una pagina di dettaglio prodotto, o a 400 x 400 px per una pagina di elenco prodotti.
• Utilizzando lazy loading, in modo che solo le immagini visibili sullo schermo dell'utente vengano caricate immediatamente.

2. Eseguendo un audit regolare del sito

Eseguire audit regolari del sito ti fornisce approfondimenti dettagliati sulla salute e sulle prestazioni del sito's.

Durante l'audit, cerca di dare priorità alla revisione dell'architettura del tuo sito e dell'esperienza utente per scoprire eventuali problemi potenziali.

Questo processo può anche rivelare opportunità di ottimizzazione delle immagini. Assicurati di testare il tuo sito su diversi dispositivi, come mobile, tablet e desktop, per garantire un'esperienza coerente.

Inoltre, presta attenzione a se le immagini sono correttamente ridimensionate. Se non lo sono, non dimenticare di seguire il tutorial sopra.

Conclusione

Utilizzare immagini ridimensionate è essenziale per ottimizzare le prestazioni del sito, soprattutto sui dispositivi mobili. Aiuta le tue pagine a caricarsi più velocemente e riduce il tasso di rimbalzo.

Tuttavia, ridimensionare un gran numero di immagini può richiedere molto tempo. Considera l'uso di un plugin come WP Media Folder, che consente di ridimensionare, organizzare e sostituire automaticamente le immagini garantendo che rimangano ottimizzate per le prestazioni.