WPLake > Blog > Ottimizzazione delle immagini in WordPress con il caricamento pigro e il formato Webp
  • English
  • Deutsch
  • Español
  • Français

Ottimizzazione delle immagini in WordPress con il caricamento pigro e il formato Webp

Tempo di lettura: 3 minuti

-

Plugin Suggerimenti e trucchi

-

Aggiornato 17.07.23

Vediamo alcune tecniche e pratiche per ottimizzare le immagini nel vostro sito WordPress. Migliorare i tempi di caricamento e l'esperienza dell'utente.
Cameras take large photos

Indice dei Contenuti

Cos'è l'ottimizzazione delle immagini?

#link copiato

L'ottimizzazione delle immagini in WordPress si riferisce al processo di ottimizzazione delle immagini per migliorarne le prestazioni e ridurne le dimensioni dei file senza comprometterne significativamente la qualità visiva.

Vediamo alcune tecniche e pratiche volte a migliorare la velocità di caricamento delle immagini su un sito WordPress. Questo di solito si traduce in una migliore esperienza utente e in un migliore posizionamento nei motori di ricerca (perché i motori di ricerca non amano i siti web che si caricano lentamente).

Tecniche comuni per l'ottimizzazione delle immagini

#link copiato

Vediamo alcune tecniche comuni per ottimizzare le immagini in WordPress.

Compressione delle immagini

#link copiato

Si tratta di ridurre le dimensioni del file di un'immagine senza perdere troppa qualità visiva. È possibile comprimere le immagini con vari metodi e utilizzando strumenti di compressione delle immagini online, plugin per WordPress o software di ottimizzazione delle immagini.

Ridimensionamento e ritaglio

#link copiato

Le immagini dovrebbero essere ridimensionate in base alle dimensioni di visualizzazione sul sito web, per evitare un inutile utilizzo della larghezza di banda. Detto questo, cercate comunque di mantenere la quantità di dimensioni di ritaglio al minimo, altri plugin e persino temi possono registrare dimensioni di ritaglio aggiuntive per il vostro WordPress; fortunatamente è possibile disabilitarli, quindi fate attenzione.

Il ritaglio consente di rimuovere le parti indesiderate di un'immagine che non sono essenziali per il contenuto. WordPress ha 3 dimensioni di ritaglio incorporate: miniatura, media e grande. Solo la dimensione della miniatura ha una casella di controllo che consente di ritagliare alle dimensioni esatte; le altre dimensioni vengono infatti ridimensionate in proporzione. È possibile modificare le dimensioni dalla schermata di amministrazione. Visitare Impostazioni > Media per modificarle.

Visually the same, but much smaller
Visivamente le immagini sono identiche, ma l'immagine ottimizzata ha dimensioni di file inferiori del 76%.

Suggerimento: è necessario rigenerare le miniature (cioè tutte le dimensioni più piccole dell'originale) affinché le immagini esistenti vengano ritagliate in base alle dimensioni impostate per i media. Per saperne di più su controllare le dimensioni delle immagini in WordPress.

Nota: se volete avere immagini ad alta risoluzione sul vostro sito, per qualsiasi motivo, cercate di mantenere le dimensioni al massimo della larghezza o dell'altezza del vostro formato più grande.

Formati di file

#link copiato

La scelta del giusto formato di file per le immagini può avere un impatto significativo sulle dimensioni del file e sulla velocità di caricamento. Il formato JPEG è generalmente adatto a fotografie e immagini complesse, mentre il formato PNG è migliore per immagini con sfondi trasparenti o grafica semplice. Con WebP è possibile avere il meglio di entrambi i mondi, con file di dimensioni ridotte e una perdita minima di qualità visiva.

Caricamento pigro

#link copiato

Con il caricamento pigro, le immagini vengono caricate solo quando diventano visibili nel punto di vista del visitatore, anziché tutte insieme. Questa tecnica riduce il tempo di caricamento iniziale della pagina, soprattutto per le pagine con molte immagini. Da WordPress 5.5 il caricamento pigro è ora una caratteristica predefinita.

Caching delle immagini

#link copiato

Il caching consiste nel memorizzare le immagini sul browser del visitatore, consentendo ai successivi caricamenti della pagina di recuperare le immagini localmente anziché scaricarle nuovamente. Questo riduce il carico del server e velocizza il caricamento delle pagine. Utilizzate plugin come WP Super Cache (che è quello che usiamo su wplake.org), W3 Total Cache o LiteSpeed Cache per attivare la cache del vostro sito web.

Tecniche complesse per l'ottimizzazione delle immagini

#link copiato

Queste tecniche non sono poi così complesse, richiedono solo qualche passaggio in più. Ma se le utilizzate, probabilmente otterrete anche altri vantaggi collaterali. Diamo un'occhiata.

Rete di consegna dei contenuti (CDN)

#link copiato

L'utilizzo di un CDN aiuta a fornire immagini in modo più efficiente. Naturalmente, un CDN è molto più di un semplice servizio di consegna delle immagini. In breve, accelera il vostro sito memorizzando copie su server distribuiti in diverse località geografiche. Questo riduce la distanza e la latenza tra il browser dell'utente e il server delle immagini.

Plugin di WordPress

#link copiato

Esistono diversi plugin per WordPress, come Smush, Imagify e EWWW Image Optimizer, che automatizzano i processi di ottimizzazione delle immagini. Consiglio sempre di provarli prima su un ambiente di prova, finché non si sa cosa fanno. Perché se non si è sicuri di ciò che fa, potrebbe ad esempio cancellare le immagini originali (significa che quando si prova un'altra cosa, le nuove immagini non vengono ritagliate dalle originali, ma piuttosto da una versione più piccola dell'immagine). Inoltre, questi plugin possono gestire compiti come la compressione, il ridimensionamento, il caricamento pigro e la cache, semplificando il flusso di lavoro di ottimizzazione.

Suggerimento: Ricordate di non sovrascrivere o duplicare i passaggi. Per esempio, se avete il plugin Image Optimizing che offre anche la cache, non attivatelo se avete già un plugin Cache in uso.

Conclusione

#link copiato

Molto spesso si tratta di uno scenario di tentativi ed errori quando si ottimizza la velocità della pagina e le immagini, ma sappiate che se il vostro sito non contiene molte immagini, l'impatto non sarà così grande come se fosse il contrario.

Implementando queste tecniche, potete migliorare significativamente la velocità di caricamento e le prestazioni delle immagini sul vostro sito web WordPress, ottenendo una migliore esperienza utente e potenzialmente un posizionamento più elevato nei motori di ricerca. Ci sono molte altre tecniche che potete utilizzare per ottimizzare il vostro sito WordPress perché, in definitiva, un sito web veloce migliora l'UX e, come ormai dovreste sapere, i motori di ricerca lo adorano.

Spero che questo articolo vi sia stato utile.

Buona ottimizzazione!

Sull'autore
Baxter Jones

Working in the web industry for over 15 years gaining experience in design,user experience and web best practices. Has a keen eye for detail and enjoys having a process when working and creating. He thinks WordPress is the best thing since sliced bread and when he’s not behind his computer he’ll be in the garden.

0 Commenti

    Lascia un commento

    Rispondi a 

    Siate premurosi quando lasciate un commento.

    Non mostrato pubblicamente

    Got it