Come servire facilmente immagini scalate in WordPress (passo dopo passo)

Volete servire immagini in scala sul vostro sito WordPress?

I principianti spesso rallentano i loro siti web caricando immagini senza prestare attenzione alle loro dimensioni.

Il servizio di immagini con le dimensioni corrette migliorerà le prestazioni di WordPress senza ridurre la qualità.

In questo articolo vi mostreremo come servire facilmente le immagini in scala in WordPress.

Perché servire immagini in scala in WordPress?

Sul vostro sito WordPress avrete bisogno di immagini per i post del blog, le miniature, le intestazioni delle pagine, le immagini di copertina e altro ancora.

A seconda del tema, queste immagini occuperanno un certo numero di pixel. Ad esempio, l’immagine principale potrebbe occupare 680×382 pixel e una miniatura di 100×100 pixel.

È importante utilizzare immagini che siano state ridimensionate per adattarsi alle dimensioni corrette necessarie per il sito. Ad esempio, se le immagini in primo piano occupano 680×382 pixel, è necessario salvarle esattamente in queste dimensioni.

In caso contrario, il vostro sito potrebbe essere rallentato o la qualità dell’esperienza dell’utente diminuire. Ecco alcuni dei motivi più comuni:

• I visitatori dovranno scaricare file più grandi del necessario, aumentando i tempi di caricamento.
• Se si utilizzano immagini con un numero di pixel inferiore allo spazio consentito, le immagini appariranno sfocate se visualizzate a dimensioni maggiori.
• Il vostro sito web dovrà modificare le dimensioni delle immagini al volo, il che significa che dovrà eseguire più processi prima di poter mostrare il contenuto agli utenti.

Imagely darà agli utenti una cattiva esperienza e potrebbe anche avere un impatto negativo sulla SEO dell’immagine.

Per questo motivo, se testate le prestazioni del vostro sito web utilizzando la scansione di GTMetrix, spesso vi consiglierà di servire immagini ridimensionate per velocizzare il vostro sito web.

Detto questo, vediamo come servire facilmente le immagini in scala in WordPress. Verranno trattati due metodi:

Metodo 1: Servire immagini ridimensionate con un plugin

Il modo più semplice per servire le immagini in scala è utilizzare un plugin che visualizzi automaticamente le immagini del sito web alle dimensioni corrette. Questo metodo è il più semplice, ma non consente la stessa flessibilità del secondo metodo.

Il plugin gratuito Optimole è uno dei migliori plugin per la compressione delle immagini di WordPress e ridimensiona automaticamente le immagini. Tuttavia, se avete più di 5.000 visitatori al mese, avrete bisogno della versione premium.

Per prima cosa, è necessario installare e attivare il plugin Optimole. Per maggiori dettagli, consultare la nostra guida passo-passo su come installare un plugin di WordPress.

Dopo l’attivazione, verrete automaticamente portati alla pagina Media ” Optimole e vi verrà chiesto di iscrivervi per ottenere una chiave API o di inserire la vostra chiave API esistente. È molto semplice.

È sufficiente assicurarsi che l’indirizzo e-mail sia corretto, quindi fare clic sul pulsante “Crea e collega il tuo account”. La connessione a Optimole avverrà automaticamente. Non sarà necessario visitare un altro sito web o incollare manualmente la chiave.

Imagely inizierà a ottimizzare le immagini in sfondo. Sceglierà automaticamente le dimensioni corrette delle immagini per il dispositivo e il browser di ciascun visitatore e servirà le immagini dal veloce CDN di Optimole Cloud Service.

Facendo clic sulla scheda “Impostazioni”, si vedrà che le immagini dei post e delle pagine verranno automaticamente sostituite con quelle ottimizzate e ridimensionate da Optimole.

Questo non avviene al volo, perché avviene tramite un CDN, il che significa che il vostro sito non subirà alcun impatto sulle prestazioni.

Inoltre, il plugin ha abilitato il lazy loading, il che significa che le immagini sulla pagina che non sono attualmente visibili non verranno caricate fino a quando non saranno necessarie. Questo è un altro modo efficace per ridurre il tempo di caricamento delle pagine e migliorare le prestazioni del sito web.

Queste impostazioni funzionano bene per la maggior parte dei siti web. Tuttavia, è possibile personalizzare ulteriormente Optimole utilizzando le impostazioni del menu “Avanzate” per capire cosa funziona meglio per il proprio sito web.

Se si apportano modifiche alle impostazioni, non dimenticare di fare clic sul pulsante “Salva modifiche” in fondo alla pagina.

Metodo 2: Servire immagini ridimensionate manualmente

È possibile ridimensionare le immagini anche senza un plugin. Ci sono tre modi per farlo: si può usare il software di editing delle immagini, la funzione di editing delle immagini nella libreria multimediale di WordPress o modificando i valori nelle impostazioni dei media di WordPress.

Ridimensionare le immagini con i software di editing

È possibile ridimensionare le immagini alle giuste dimensioni prima di caricarle sul sito web utilizzando un software di fotoritocco sul computer, come Adobe Photoshop o Affinity Photo.

Il software consente di scegliere il numero corretto di pixel per l’immagine e di salvarla con un file di dimensioni ridotte e nel formato preferito.

Ad esempio, ecco una schermata che mostra lo strumento di ritaglio di Affinity Photo.

Oltre a scegliere le giuste dimensioni delle immagini fin dall’inizio, ci sono altre cose che si possono fare prima di caricare le immagini per assicurarsi che non rallentino il sito web.

Per ulteriori informazioni, consultate la nostra guida su come ottimizzare le immagini per le prestazioni web.

Scalare le immagini nella libreria multimediale di WordPress

Sapevate che è possibile modificare le immagini di base in WordPress? La funzione “Modifica immagine” di WordPress consente di ritagliare, ruotare, capovolgere e scalare le immagini.

Quando si modifica un post o una pagina, è necessario fare clic sull’immagine che si desidera modificare. Successivamente, si deve fare clic sul pulsante “Sostituisci” e poi selezionare “Apri libreria multimediale” dal menu.

Si aprirà la Libreria multimediale di WordPress con l’immagine selezionata.

Sulla destra è presente un’area in cui è possibile aggiungere un testo alt, un titolo, una didascalia e una descrizione per l’immagine. È presente anche un link “Modifica immagine”.

Basta fare clic su questo link per visitare la pagina “Modifica immagine”.

Qui si trovano l’anteprima dell’immagine, i pulsanti di modifica e diverse altre opzioni utili per ridimensionare o ritagliare l’immagine.

Per scalare l’immagine, è sufficiente modificare uno dei valori di “Nuove dimensioni” in Scala immagine sulla destra.

Ad esempio, questa immagine ha una risoluzione molto grande di 2560×1637 pixel. Possiamo ridurla a una larghezza di 1200 pixel digitando il primo campo ‘Scala immagine’.

È sufficiente modificare la larghezza, perché il valore dell’altezza dell’immagine verrà modificato automaticamente per mantenere l’immagine in proporzione.

Successivamente, è sufficiente fare clic sul pulsante ‘Scala’ per modificare la risoluzione dell’immagine.

Si noti che in WordPress è possibile solo ridimensionare un’immagine. Non è possibile ingrandire le immagini aumentandone le dimensioni.

Per istruzioni dettagliate, consultate le nostre guide su come eseguire la modifica di base delle immagini in WordPress e su come ritagliare e modificare le miniature dei post di WordPress.

Regolazione delle dimensioni delle immagini nelle impostazioni dei media

Quando si caricano immagini sul proprio sito web, WordPress crea automaticamente diverse copie di dimensioni diverse. È possibile personalizzare queste dimensioni visitando la pagina Impostazioni ” Media nell’area di amministrazione di WordPress.

Qui è possibile modificare facilmente le dimensioni delle miniature, delle immagini medie e di quelle grandi.

In alcuni siti web, potrebbero essere necessarie altre dimensioni di immagine oltre a miniatura, media e grande. Potete imparare a creare queste dimensioni seguendo la nostra guida su come creare dimensioni aggiuntive per le immagini in WordPress.

Se si modificano le dimensioni predefinite delle immagini o se si creano dimensioni aggiuntive, saranno interessate solo le nuove immagini. È necessario rigenerare le dimensioni delle immagini esistenti.

Quando si aggiunge un’immagine a un post o a una pagina, è possibile selezionare le dimensioni dell’immagine nelle impostazioni del blocco a sinistra della pagina.

Speriamo che questo tutorial vi abbia aiutato a capire come servire immagini in scala in WordPress. Potreste anche consultare la nostra guida sull’ottimizzazione SEO delle immagini in WordPress o dare un’occhiata al nostro articolo sull’utilizzo dell’IA per generare immagini per gli articoli del blog.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.