Come modificare e ridimensionare le immagini su WordPress

L'aggiunta di elementi visivi al tuo sito Web WordPress è un ottimo modo per rendere le tue pagine più coinvolgenti. Ma trovare l'immagine perfetta è solo metà della battaglia. A volte, dovrai modificare la modalità di visualizzazione della grafica per renderla più attraente o ottimizzarla per le prestazioni web.

Fortunatamente, è facile modificare le tue immagini in WordPress. Puoi ridimensionare completamente una foto, ritagliare sezioni non pertinenti e persino ottimizzarla per una pagina di prodotto WooCommerce.

In questo post, ti mostreremo come modificare le immagini in WordPress. Quindi, discuteremo dell'ottimizzazione dell'immagine e di come può migliorare i tempi di caricamento. Iniziamo!

Come modificare facilmente le immagini in WordPress (8 modi)

Esistono diversi modi per modificare le immagini in WordPress. Iniziamo parlando del ridimensionamento.

1. Come ridimensionare un'immagine in WordPress

Potresti voler ridimensionare le tue immagini in WordPress perché le immagini più piccole si caricano più velocemente. Se hai solo una o due foto sul tuo sito, questo potrebbe non fare una differenza notevole. Ma i siti ricchi di immagini richiedono molta elaborazione per caricare i contenuti.

Inoltre, potresti voler ridimensionare le tue immagini a dimensioni specifiche per scopi di progettazione.

Per ridimensionare le tue immagini in WordPress, vai su Media → Libreria. Quindi, carica un nuovo file o selezionane uno esistente. Successivamente, fai clic su Modifica immagine.

In Scala immagine , inserisci le nuove dimensioni, specificando una larghezza e un'altezza esatte. Quindi, premi Scala.

Per utilizzare la versione ridimensionata della foto, torna alla Libreria multimediale e selezionala. Quindi, copia l'URL del file.

Infine, incolla l'URL ovunque desideri utilizzarlo sul tuo sito.

Oppure puoi semplicemente reinserire l'immagine nel blocco Immagine sulla tua pagina.

2. Come ritagliare le immagini in WordPress

Ritagliare un'immagine taglia la tua foto invece di ridimensionarla completamente. Pertanto, consente di ritagliare parti meno importanti dell'immagine e di mettere a fuoco un oggetto specifico all'interno della cornice.

Per ritagliare un'immagine in WordPress, vai su Media → Libreria . Quindi, carica la tua foto. Successivamente, fai clic su Modifica immagine e seleziona Ritaglia .

A questo punto, sarai in grado di trascinare fisicamente l'editor per ritagliare parti dell'immagine che non ti servono.

Quando sei soddisfatto della tua nuova foto, fai di nuovo clic su Ritaglia per eseguire le modifiche. Quindi, premi Salva.

3. Come capovolgere un'immagine

Potresti anche voler capovolgere un'immagine in WordPress. Sebbene non sia così comune come altre modifiche alle immagini, il capovolgimento può avere grandi effetti artistici.

Ad esempio, capovolgere può regolare la messa a fuoco della fotografia, guidando l'occhio del visitatore verso elementi importanti. Inoltre, può rafforzare i temi in un'immagine o evocare determinate emozioni.

Per capovolgere un'immagine in WordPress, vai su Media → Libreria → Modifica immagine . L'azione successiva dipende da come vuoi capovolgere l'immagine. Puoi scegliere Capovolgi verticalmente o Capovolgi orizzontalmente .

Capovolgere verticalmente mostrerà la tua immagine capovolta, mentre l'opzione orizzontale creerà un effetto immagine speculare. Quando sei soddisfatto delle modifiche, fai clic su Salva .

4. Come ruotare un'immagine

Puoi anche ruotare un'immagine in WordPress, ruotando l'immagine in senso antiorario o orario. Questo è un modo semplice per risolvere problemi di corrispondenza o allineamento sulla tua pagina.

Per iniziare, devi andare su Media → Libreria → Modifica immagine . Lì, fai clic su Ruota a sinistra o Ruota a destra .

Questa azione lo farà ruota l'immagine di 90 gradi ogni volta. Quindi, se vuoi ruotare la tua immagine di 180 gradi, fai clic due volte sul pulsante appropriato.

È importante notare che se si commette un errore durante la modifica delle immagini, è sufficiente selezionare Annulla per cancellare l'ultima azione. Quindi, premi Salva quando il tuo fotoritocco è completo!

5. Come allineare un'immagine

Allineare un'immagine è uno dei modi più semplici per modificare una foto in WordPress. Determina dove si posizionerà la tua grafica sulla pagina rispetto ad altri contenuti. Puoi applicare le impostazioni di allineamento solo dopo aver aggiunto un'immagine a un post o a una pagina.

Innanzitutto, inserisci la foto nella tua pagina utilizzando il blocco Immagine. Quindi, vai alla barra degli strumenti sopra il blocco.

Fare clic sull'icona Allinea .

Come puoi vedere, puoi allineare un'immagine a sinistra oa destra o renderla centrata. Inoltre, in questa fase puoi modificare le variazioni di larghezza, rendendo l'immagine Full width o Wide width .

6. Come ripristinare un'immagine alla sua versione originale

Durante la modifica di una foto in WordPress, potresti commettere accidentalmente un errore o applicare modifiche indesiderate. Fortunatamente, è facile annullare qualsiasi modifica e ripristinare un'immagine alla sua versione originale.

Come abbiamo discusso in precedenza, se si desidera annullare solo una singola azione, fare clic su Annulla nell'editor di immagini:

In alternativa, se hai ridimensionato la foto e hai inserito le dimensioni sbagliate, seleziona Ripristina immagine.

A volte, questa impostazione è nascosta per impostazione predefinita. In questo caso, dovrai espandere la scheda Ripristina immagine originale per trovare questa funzione. Ripristinerà la tua foto e rimuoverà le modifiche che hai applicato ad essa.

7. Come ridimensionare in massa le immagini in WordPress

Attualmente, non esiste un modo predefinito per ridimensionare in blocco le immagini in WordPress. Ma puoi usare un plugin come Imsanity per aggiungere quella funzionalità. Questo è uno strumento gratuito, quindi puoi andare avanti e installarlo direttamente all'interno di WordPress.

Quindi, vai su Impostazioni → Imsanity.

Quando ridimensioni tutte le immagini sul tuo sito, è importante essere consapevoli che questa azione può alterare drasticamente il layout dei tuoi post e delle tue pagine. Pertanto, è una buona idea eseguire un nuovo backup del tuo sito prima di iniziare.

Jetpack VaultPress Backup è un eccellente plug-in di backup automatico. Puoi ripristinare il tuo sito con un solo clic utilizzando l'app mobile, anche quando il tuo sito è offline. Meglio ancora, lo strumento può eseguire il backup di tutti i file, i dati di WooCommerce e il tuo database.

Se decidi di ridimensionare tutte le tue immagini WordPress con Imsanity, seleziona l'altezza e la larghezza massime per le tue foto. Quindi, salva le modifiche .

In alternativa, fare clic sull'icona Visualizzazione elenco nella Libreria multimediale per ridimensionare selettivamente le tue immagini.

Qui puoi scegliere foto specifiche e quindi selezionare Ridimensiona immagine .

8. Come modificare e ridimensionare le immagini per WooCommerce

Se gestisci un negozio di e-commerce, potresti anche voler modificare le immagini dei prodotti in WooCommerce. Dopotutto, avrai bisogno di foto di alta qualità per convincere i clienti ad acquistare i tuoi articoli.

Fortunatamente, puoi apportare la maggior parte delle modifiche utilizzando WooCommerce Customizer. Per iniziare, vai su Aspetto → Personalizza → WooCommerce → Immagini del prodotto .

Qui puoi regolare l'immagine principale e le larghezze delle miniature, scegliendo tra quadrato, personalizzato o non ritagliato.

Inoltre, per gli utenti con conoscenze di programmazione, è possibile controllare le dimensioni delle immagini di WooCommerce utilizzando gli hook. Ad esempio, wc_get_image_size La funzione modifica le definizioni delle dimensioni dell'immagine.

Inoltre, WooCommerce versione 3.3 e successive fornisce l'accesso al ridimensionamento automatico delle miniature. In alternativa, puoi installare un plug-in, come Force Regenerate Thumbnails, per gestire questo processo per te.

Come ottimizzare le tue immagini per una migliore velocità di caricamento

Finora, abbiamo discusso principalmente della modifica delle foto per motivi di progettazione visiva. Tuttavia, c'è una considerazione altrettanto importante: l'ottimizzazione dell'immagine.

Come accennato in precedenza, i file immagine pesanti possono danneggiare la velocità di caricamento della pagina e frustrare i visitatori. Ecco perché è una best practice ottimizzare le tue foto per il tuo sito Web WordPress.

Di seguito sono riportati alcuni passaggi per aiutarti a iniziare.

Passaggio 1: installa Jetpack e Jetpack Boost

Uno dei modi più semplici per ottimizzare la consegna dei contenuti sul tuo sito è installare plugin come Jetpack e Jetpack Boost.

Jetpack ha un CDN di immagini gratuito che serve le tue immagini dalle posizioni più vicine ai tuoi visitatori. Ciò può migliorare i tempi di caricamento per gli utenti di tutto il mondo. I CDN sono particolarmente utili per i siti Web ricchi di immagini che tendono a rallentare le prestazioni.

Ma la tecnologia Photon di Jetpack CDN fa molto di più di un normale CDN. Ricodifica automaticamente le immagini in formati più leggeri e moderni. Li ridimensiona automaticamente in base alle esigenze di ogni singolo visitatore, offrendo la migliore esperienza possibile in termini di velocità e qualità visiva.

Jetpack Boost ti consente di implementare facilmente il caricamento lento delle immagini e include anche opzioni aggiuntive per migliorare la velocità come il rinvio di JavaScript e la generazione di CSS critici.

Meglio ancora, entrambi gli strumenti funzionano in background sul tuo sito, richiedendo poca o nessuna manutenzione continua. Inoltre, con Jetpack Boost, puoi accedere a report rapidi con chiari punteggi delle prestazioni del sito su desktop e dispositivi mobili.

Puoi installare Jetpack Boost come plug-in WordPress gratuito o eseguire l'upgrade a uno dei piani a pagamento, che offre funzionalità di ottimizzazione aggiuntive. Quindi, vai su Plugin → Aggiungi nuovo per installare e attivare lo strumento.

Segui la stessa procedura per scaricare il plug-in Jetpack.

Passaggio 2: abilita il caricamento lento e il CDN

Il caricamento lento è uno dei modi migliori per velocizzare la consegna dei contenuti. Questa impostazione impedisce il caricamento delle immagini finché i visitatori non scorrono verso il basso fino al punto in cui si trovano nella pagina. Pertanto, il tuo sito Web non dovrà caricare tutti i tuoi contenuti visivi contemporaneamente.

Fortunatamente, questa è una delle funzionalità gratuite disponibili con Jetpack Boost. Per iniziare con il plug-in, dovrai collegarlo a un account WordPress.com. Se non hai un account, crearne uno è completamente gratuito.

Quindi, vai su Jetpack → Boost per configurare le tue impostazioni.

Qui, usa l'interruttore per abilitare il caricamento lento delle immagini.

Per abilitare il CDN, vai su Jetpack → Impostazioni e apri la scheda Prestazioni .

Cerca la sezione che dice Prestazioni e velocità . Quindi, attiva Enable site accelerator :

Passaggio 3: attiva impostazioni aggiuntive per velocità più elevate

La prima impostazione che vedrai nella dashboard di Jetpack Boost è Optimize CSS Loading . Quando attivi questa impostazione, Jetpack genererà Critical CSS per le tue pagine web.

Ciò significa che verrà caricato solo il CSS "above the fold" (la parte della pagina immediatamente visibile agli utenti) finché i visitatori non scorrono la pagina verso il basso. Pertanto, i tuoi contenuti si caricano molto più velocemente, specialmente per quelli su dispositivi mobili.

Con un piano Jetpack Boost a pagamento, puoi risparmiare tempo con Critical CSS automatizzato .

In questo modo, puoi continuare ad apportare modifiche al sito secondo necessità. Jetpack rigenera automaticamente il CSS critico e i punteggi delle prestazioni del tuo sito Web ogni volta che aggiorni i tuoi contenuti.

Jetpack Boost ti consente anche di posticipare il caricamento di JavaScript non essenziale. Ciò significa che il tuo sito caricherà prima gli elementi più visibili, come stili e immagini, e ritarderà altre attività fino a dopo. Questo processo riduce il carico sul tuo server.

Domande frequenti sulla modifica delle immagini in WordPress

Ora, rispondiamo ad alcune delle domande più comuni sulla modifica e l'ottimizzazione delle immagini in WordPress!

Quali sono i migliori formati di immagine per WordPress?

La libreria multimediale di WordPress attualmente supporta immagini JPEG/JPG, PNG e WebP. JPEG e PNG sono in genere i formati più popolari e utilizzano processi di compressione diversi.

I file JPEG sono un'ottima opzione per portfolio fotografici e altri contenuti altamente visivi, poiché il tipo di compressione mantiene un'elevata qualità dell'immagine.

D'altra parte, i PNG supportano sfondi trasparenti, quindi sono spesso preferiti per scopi di progettazione grafica. Inoltre, funzionano bene per screenshot e icone.

WebP sta crescendo in popolarità. Essendo un formato di immagine progettato specificamente per l'utilizzo sul Web, offre una compressione migliore rispetto alle alternative e si traduce in una dimensione del file inferiore.

È meglio ridimensionare un'immagine prima di caricarla su WordPress?

Per mantenere tempi di caricamento rapidi, è meglio ridimensionare le immagini prima di caricarle su WordPress. In questo modo, sarai in grado di mantenere le dimensioni dei file le più piccole possibili.

Naturalmente, puoi ridimensionare ulteriormente le immagini all'interno di WordPress. Dopo aver aggiunto una foto al tuo sito, sarai in grado di applicare ulteriori modifiche alla tua Libreria multimediale, come il ridimensionamento o il ritaglio.

La compressione e l'ottimizzazione delle immagini sono importanti?

La compressione dell'immagine crea un file più piccolo. Puoi anche ottimizzare le tue immagini utilizzando funzionalità extra come il caricamento lento.

Sia la compressione che l'ottimizzazione delle immagini sono importanti perché migliorano la velocità complessiva di caricamento. Questo è essenziale, poiché Google utilizza la velocità come fattore di ranking.

Inoltre, un sito web veloce è più user-friendly. Può ridurre la frequenza di rimbalzo incoraggiando i visitatori a trascorrere più tempo sul tuo sito.

La velocità è importante anche per Core Web Vitals. Questo è un insieme di metriche standardizzate che rivelano come un utente vive una pagina web. La compressione e l'ottimizzazione delle immagini consentono di migliorare due metriche chiave: First Contentful Paint (FCP) e Largest Contentful Paint (LCP).

Modifica e ottimizza le immagini in WordPress

Scattare bellissime fotografie o creare illustrazioni uniche è un ottimo modo per abbellire il tuo web design. Ma a volte le tue immagini richiedono alcune modifiche o aggiustamenti.

Fortunatamente, puoi ridimensionare, ritagliare, allineare, capovolgere e ruotare facilmente le immagini in WordPress. Meglio ancora, puoi ridimensionare le foto in blocco con l'aiuto di un plug-in. È anche semplice ridimensionare le immagini e le miniature dei prodotti per WooCommerce.

L'ottimizzazione delle immagini è fondamentale per mantenere tempi di caricamento rapidi e creare una migliore esperienza utente. Il modo più semplice per ottimizzare le tue immagini è con Jetpack Boost. Con questo plug-in avrai accesso a lazy loading, Critical CSS e CDN di Jetpack. Dai un'occhiata ai piani di Jetpack oggi per iniziare!