Stai cercando di caricare immagini sul tuo sito WordPress, ma non sei sicuro di quali dimensioni o tipi di file dovrebbero essere le immagini? Non hai familiarità con il processo di ridimensionamento e compressione delle immagini per il Web? In questo articolo, spiegherò perché l'utilizzo di un corretto dimensionamento delle immagini è importante per il tuo sito Web, inoltre ti mostrerò come ridimensionare e comprimere le tue immagini utilizzando l'editor di foto gratuito GIMP.
Perché è importante ridimensionare le immagini del tuo sito web
Iniziamo con il motivo per cui il ridimensionamento delle immagini del tuo sito Web è così importante.
Secondo WordPress.org, la "dimensione fisica" complessiva di un'immagine gioca un ruolo enorme nelle prestazioni di una pagina di un sito web. “La dimensione del file [di un'immagine] determina il tempo necessario per caricare la tua pagina; maggiore è la dimensione del file... maggiore sarà il tempo necessario per caricare [una pagina]". In altre parole, il caricamento di un file di grandi dimensioni sul tuo sito Web rallenterà le prestazioni di qualsiasi pagina a cui aggiungi il contenuto, che di solito viene visualizzato come velocità di caricamento della pagina più lente nei dati di analisi del tuo sito.
“La dimensione del file [di un'immagine] determina il tempo necessario per caricare la pagina; maggiore è la dimensione del file... più tempo [una pagina] impiegherà a caricarsi".
-WordPress.org
Velocità di caricamento della pagina, denominata anche semplicemente "velocità pagina," è "la velocità di caricamento del contenuto della tua pagina", secondo il Sito SEO Moz. Avere pagine più lente può comportare "frequenza di rimbalzo", che è una metrica di fantasia che rappresenta le sessioni in cui un visitatore del sito lascia il tuo sito dopo aver visualizzato una singola pagina. Pagine più lente possono anche ridurre la quantità di tempo che i visitatori trascorrono sulle pagine del tuo sito, poiché le persone potrebbero diventare impazienti nell'attesa che il contenuto di una pagina venga caricato e lasci il tuo sito più rapidamente.
Queste metriche sono importanti perché in genere desideri che gli utenti trascorrano più tempo sul tuo sito e guardino più pagine del tuo sito.
Sono anche importanti perché svolgono un ruolo nel modo in cui il tuo sito si posiziona nelle pagine dei risultati dei motori di ricerca, o "SERP". SERP sono semplicemente le pagine dei risultati che vengono visualizzate quando digiti una parola o una frase in Google e premi il tasto Invio. Poiché le immagini più grandi sono indicative di cattive pratiche di progettazione web e influiscono negativamente sull'esperienza dell'utente sul tuo sito, i motori di ricerca come Google potrebbero penalizzare il tuo sito per avere queste immagini più grandi e classifica il tuo sito Web al di sotto di altri siti Web con prestazioni migliori.
Più basso si posiziona il tuo sito web su Google, ad esempio, meno traffico riceve il tuo sito e più traffico andrà ai tuoi concorrenti che si posizionano sopra di te nei risultati di ricerca.
Riducendo la dimensione del file delle tue immagini sul tuo sito web, puoi migliorare il tuo velocità pagina e quindi migliorare altre metriche come Frequenza di rimbalzo e tempo a page per migliorare il tuo posizionamento sui motori di ricerca.
Nota che ci sono molte altre variabili importanti che entrano nelle classifiche di ricerca, quindi correggere le tue immagini è solo una parte di un solido Gestione SEO (Ottimizzazione per i motori di ricerca). Tuttavia, è sicuramente molto importante per aiutare il tuo sito a posizionarsi più in alto su luoghi come Google per aumentare il traffico del tuo sito.
Come ridimensionare le immagini per WordPress in GIMP
Quindi, come ridimensionare correttamente le immagini per WordPress?
È possibile ridurre la dimensione del file di un'immagine semplicemente diminuendo la dimensione complessiva dell'immagine utilizzando scala e ritaglio prima di caricarlo sul tuo sito web. Inoltre, puoi applicare quello che viene chiamato "compressione” alla tua immagine per ridurne ulteriormente le dimensioni.
GIMP, l'editor di foto gratuito e open source, può eseguire tutte queste attività esportando anche nei formati di file "di nuova generazione" consigliati per ridurre ulteriormente le dimensioni del file delle immagini e migliorare le prestazioni del tuo sito.
Ridimensiona la tua immagine
Per iniziare questo processo, apri l'immagine che desideri caricare sul tuo sito in GIMP. Puoi farlo trascinando e rilasciando l'immagine dal tuo computer nella finestra dell'immagine di GIMP, oppure puoi semplicemente andare su File> Apri quando sei all'interno di GIMP.
Se utilizzi il metodo File>Apri, vai alla posizione dell'immagine sul tuo computer dall'interno della finestra di dialogo "Apri immagine" che appare e fai doppio clic sul file immagine una volta individuato per aprirlo in GIMP (o fai clic su pulsante "Apri" nell'angolo in basso a destra della finestra di dialogo).
Nella parte superiore della finestra di GIMP c'è una funzione chiamata "Barra del titolo" (freccia rossa nell'immagine sopra). Qui vedrai le dimensioni attuali della tua immagine (riquadro verde ingrandito nella foto). La mia immagine è 1920×1280 – con il primo numero, 1920, che rappresenta la larghezza della mia immagine (in pixel), e il secondo numero, 1280, che rappresenta l'altezza della mia immagine. Le dimensioni finali dell'immagine che vorrai utilizzare per la tua immagine dipenderanno da dove in WordPress intendi utilizzare l'immagine, nonché dal tema che stai utilizzando.
Per questo tutorial, ridimensionerò la mia immagine alla dimensione standard di 1200 × 630 pixel consigliata per le immagini dei post del blog.
Con questo in mente, la prima cosa che voglio fare è ritagliare la mia immagine in modo che le proporzioni della mia immagine originale corrispondano alle proporzioni della dimensione consigliata. Per fare ciò, prenderò il mio strumento di ritaglio premendo MAIUSC+c sulla tastiera o facendo clic sull'icona dello strumento di ritaglio nella casella degli strumenti di GIMP (freccia rossa nell'immagine sopra).
Successivamente, nelle Opzioni strumento per questo strumento, selezionerò la casella accanto a "Risolto" (freccia verde) e farò clic sul menu a discesa per selezionare "Proporzioni" (freccia blu).
Digiterò "1200:630" per impostare le mie proporzioni nel campo di testo sotto il menu a discesa (freccia gialla). Questo corrisponde alle proporzioni della dimensione dell'immagine consigliata che voglio che sia la mia immagine finale.
Usando lo strumento di ritaglio, ora farò clic e trascinerò il mouse sull'immagine per disegnare l'area di ritaglio. Quando rilascio il mouse, tutto ciò che si trova al di fuori dell'area di ritaglio sarà oscurato (freccia rossa nell'immagine sopra, supponendo che "Evidenzia" sia selezionato nelle Opzioni strumento, che di solito è per impostazione predefinita).
Per impostazione predefinita, la mia area di ritaglio ha le guide impostate come "Linee centrali" (freccia gialla nell'immagine sopra). Posso modificare questa impostazione utilizzando il menu a discesa delle guide nella parte inferiore delle Opzioni strumento. Ad esempio, cambierò le mie guide in "Regola dei terzi" (freccia verde). Le varie opzioni guida qui si basano sui principi della fotografia, il che semplifica l'inquadratura della composizione utilizzando questi principi.
Puoi passare il mouse su qualsiasi lato o angolo dell'area di ritaglio (cioè l'area evidenziata indicata dalla freccia rossa nell'immagine sopra), quindi fare clic e trascinare per ridimensionare il confine dell'area di ritaglio. Nota che puoi sempre vedere le dimensioni della tua area di ritaglio nei campi "Dimensioni" situati nelle Opzioni strumento (delineate in verde nell'immagine sopra). Ti consigliamo di mantenere la dimensione complessiva dell'area di ritaglio più grande della dimensione finale di 1200 × 630 dell'immagine.
Puoi anche fare clic e trascinare il mouse al centro dell'area di ritaglio (freccia rossa) per riposizionare il ritaglio sull'immagine.
Quando sei pronto per ritagliare l'immagine, fai clic una volta all'interno dell'area di ritaglio e l'immagine verrà ritagliata.
Nota che se l'opzione "Elimina pixel ritagliati" nelle Opzioni strumento è deselezionata (freccia verde nell'immagine sopra), il bordo dell'immagine originale verrà comunque visualizzato attorno all'immagine tramite una linea tratteggiata gialla (freccia rossa). Puoi ripristinare l'immagine originale, annullando così il ritaglio, andando su Immagine> Adatta tela ai livelli. Verrà esportata solo l'area dell'immagine all'interno del bordo della tela.
La nostra immagine è ora ritagliata nelle proporzioni desiderate, ma se guardi ancora una volta le dimensioni dell'immagine nella "Barra del titolo" vedrai che l'immagine è 1532 × 804 (delineata in verde e ingrandita nella foto sopra - le tue dimensioni saranno probabilmente leggermente diverse in base a quanto grande hai disegnato l'area di ritaglio sull'immagine). Ora dovremo ridimensionare la nostra immagine in modo che corrisponda alle dimensioni desiderate.
Per fare ciò, vai su Immagine>Ridimensiona immagine (freccia rossa).
Nella casella "Ridimensiona immagine" visualizzata, sotto "Dimensioni immagine", assicurati che l'icona del collegamento a catena accanto alle caselle "larghezza" e "altezza" sia collegata (freccia rossa nella foto sopra). Quindi, cambia la "Larghezza" dell'immagine su 1200 (freccia verde). Premi il tasto Tab. L'altezza dell'immagine si aggiornerà automaticamente a "630". In "Qualità", assicurati che il menu a discesa "Interpolazione" (freccia blu) sia impostato su "NoHalo" o "LoHalo" per la migliore qualità dell'immagine dopo il ridimensionamento. (Per ulteriori informazioni sull'interpolazione, dai un'occhiata al mio tutorial sull'argomento).
Premi il pulsante "Scala" per ridimensionare l'immagine (freccia gialla).
Una volta completato il ridimensionamento, controlla le dimensioni dell'immagine nella barra del titolo. Ora dovresti vedere una dimensione dell'immagine di 1200 × 630, la dimensione esatta che vogliamo! Quindi, cosa facciamo ora?
Comprimi la tua immagine esportandola in WebP
Il ritaglio e il ridimensionamento dell'immagine hanno ridotto la dimensione del file riducendo l'altezza dell'immagine da 1920 a 1200 pixel e la larghezza da 1280 a 630 pixel, ma possiamo ridurre ulteriormente la dimensione dell'immagine applicando la compressione quando esportiamo l'immagine.
Quindi, ora dobbiamo esportare l'immagine in un formato di file che applicherà la compressione all'immagine senza ridurre notevolmente la qualità dell'immagine. Mentre i JPEG sono sempre una buona opzione, ora è disponibile un'opzione ancora migliore: WebP.
Il formato WebP applica una compressione maggiore rispetto a JPEG mentre influisce sulla qualità dell'immagine meno di un JPEG. In altre parole, otterrai un'immagine migliore con una dimensione del file più piccola. Inoltre, i formati WebP sono supportati da tutti i 5 principali browser Web.
Per esportare in WebP, vai su File> Esporta come (freccia rossa).
Fai clic su una delle cartelle nella sezione "Luoghi" (delineata in verde) per scegliere l'immagine sul tuo computer in cui desideri salvare l'immagine. Puoi semplicemente fare doppio clic su una cartella per accedervi e vedere in quale cartella ti trovi accanto al titolo "Salva nella cartella" (freccia rossa). Quindi, rinomina la tua immagine come preferisci: assicurati di terminare il nome dell'immagine con l'estensione ".webp" (freccia blu) per esportare l'immagine nel formato WebP. Quando sei pronto, fai clic su "Esporta" nell'angolo in basso a destra della finestra (freccia gialla).
Successivamente, apparirà la finestra di dialogo "Esporta immagine come WebP". Assicurati che "Lossless" sia deselezionato (freccia rossa). In genere imposto "Qualità immagine" su 80 (freccia blu: questa è una percentuale, quindi minore è la percentuale minore sarà la qualità dell'immagine, ma minore sarà la dimensione del file immagine). Se la tua immagine non contiene trasparenza (cioè un logo senza sfondo), non devi preoccuparti dello slider “Alpha quality” (infatti, in un esperimento che ho eseguito, abbassando la qualità alpha da 100 a 90 in realtà leggermente aumentata la dimensione del file di un'immagine con uno sfondo trasparente da 8.50 kb a 8.52 kb). Il menu a discesa "Tipo di sorgente" che puoi mantenere impostato su "Predefinito".
Sta a te decidere se selezionare o deselezionare una qualsiasi delle opzioni di metadati, inclusi i dati Exif, i dati ITPC e i dati XMP. I dati Exif e XMP sono metadati generalmente assegnati dalla tua fotocamera che descrivono informazioni sulla tua foto come il modello di fotocamera utilizzato o il tipo di obiettivo utilizzato. ITPC, d'altra parte, viene utilizzato dai membri della stampa e assegna informazioni alla tua immagine come proprietà, diritti e licenze. Se non sei sicuro di cosa fare, lascia selezionate queste opzioni.
Allo stesso modo, puoi lasciare l'opzione "Salva profilo colore" deselezionata poiché la maggior parte dei browser utilizzerà automaticamente lo spazio colore sRGB per visualizzare l'immagine, che è ciò che utilizza GIMP. Se stai utilizzando un profilo colore diverso, ti consigliamo di lasciare questo selezionato. Inoltre, se sei preoccupato che l'immagine non venga visualizzata correttamente per alcuni browser, lasciarla selezionata aggiunge solo pochi kb alla dimensione complessiva dell'immagine.
Infine, l'opzione "Salva miniatura" può rimanere deselezionata, il che ci farà risparmiare ulteriormente alcuni kilobyte.
Fare clic su "Esporta" (freccia gialla nell'immagine sopra) per esportare l'immagine nel formato WebP. Quando si confronta il file WebP esportato con un file JPEG che ha le stesse dimensioni e la sua qualità è impostata su "80", l'immagine WebP arriva a circa 30 kb, o circa il 25%, di dimensioni inferiori rispetto a JPEG.
Ora puoi accedere al tuo sito WordPress e navigare alla pagina o al post in cui desideri caricare la tua immagine, o semplicemente navigare nella sezione "Media" utilizzando la navigazione principale e trascinare la tua immagine nella Libreria multimediale. Nel mio caso, passerò a "Post" utilizzando la navigazione principale (freccia rossa nell'immagine sopra) e farò clic su "Post del blog 1" (freccia blu) per modificare quel post del blog.
Apro quindi la barra laterale Impostazioni post (freccia rossa) e scorro verso il basso fino alla sezione "Immagine in primo piano" ed espandi questa sezione (freccia blu). Quindi, farò clic sull'immagine per sostituirla con la mia nuova immagine.
Passerò alla scheda "Carica file" (freccia rossa) e posso trascinare e rilasciare la mia immagine dal mio computer in WordPress (frecce blu).
Infine, farò clic su "Imposta immagine in evidenza" per applicare questa modifica (freccia rossa).
Fai clic su "Aggiorna" (freccia rossa) per aggiornare la tua pagina con la nuova immagine in primo piano.
Se faccio clic su "Visualizza post" (freccia blu)...
…ora vedrai la nuova immagine in primo piano visualizzata nella parte superiore del mio blog.
Questo è tutto per questo tutorial! Se vuoi saperne di più sulla progettazione di un sito Web WordPress, ti consiglio di controllare il mio Corso WordPress 6.0 per non programmatori! Oppure, se vuoi saperne di più su GIMP, dai un'occhiata al mio Masterclass di GIMP 2.10 su Udemy!
