Come ottimizzare le tue immagini per WordPress

Ci sono molte ragioni per cui dovresti (e dovresti) includere immagini nei tuoi contenuti WordPress. Le immagini aiutano a mantenere i tuoi lettori coinvolti. Sono anche un modo per suddividere lunghi contenuti e migliorare l'ottimizzazione per i motori di ricerca (SEO). Tuttavia, possono anche rallentare il tuo sito web.

Fortunatamente, ci sono alcune risorse disponibili che possono aiutarti a ottimizzare le tue immagini. Ciò significa che avrai maggiori probabilità di superare velocità lente della pagina che possono essere dannose per il successo complessivo del tuo sito web.

In questo articolo, vedremo perché le immagini di grandi dimensioni potrebbero trascinare il tuo sito verso il basso. Quindi esploreremo come comprimere efficacemente i tuoi file multimediali, insieme ad alcuni suggerimenti fondamentali per l'ottimizzazione delle immagini che possono migliorare la SEO del tuo sito.

Perché dovresti ottimizzare le tue immagini per WordPress

Le immagini sono un pezzo prezioso e importante di qualsiasi strategia di contenuto. Tuttavia, possono anche essere una delle cause principali dei tempi di caricamento lenti delle pagine.

Un sito web lento è un problema, perché può allontanare gli utenti. Infatti, le pagine che impiegano cinque o più secondi per caricarsi registrano in media un aumento del 90% nella probabilità che un utente rimbalzi (abbandoni dopo aver visualizzato solo una singola pagina).

Sebbene ci siano diversi fattori che possono rallentare il tuo sito, le immagini e i file multimediali occupano ben il 63% della larghezza di banda sui siti Web moderni. Di conseguenza, è importante ottimizzare le immagini che carichi sul tuo sito.

Vale anche la pena notare che la velocità del sito è un fattore di ranking di Google. Ciò significa che la velocità o la lentezza del caricamento della tua pagina determinerà, in una certa misura, il suo posizionamento nei risultati di ricerca. Ci sono molti fattori che influenzano il tuo PageRank e le immagini rientrano nella categoria "Usabilità delle pagine web".

L'ottimizzazione delle immagini consiste in realtà nel migliorare due cose:

• Il numero di byte utilizzati per codificare ciascun pixel dell'immagine
• Il numero totale di pixel utilizzati.

In altre parole, ottimizzare significa ottenere la migliore qualità possibile dal minor numero di pixel e byte. Ciò riduce le dimensioni dei file multimediali e può avere un impatto significativo sulla velocità complessiva del tuo sito.

Ottimizza le tue immagini prima di caricarle su WordPress

In definitiva, lo scenario migliore per il tuo sito Web è ottimizzare le immagini prima di caricarle. In questo modo non ti ritroverai con duplicati o versioni multiple di un'immagine. Ciò vanificherebbe lo scopo di alleggerire il carico del tuo sito Web attraverso l'ottimizzazione delle immagini.

Con questo in mente, diamo un'occhiata ad alcune delle considerazioni che dovrai fare quando decidi come ottimizzare i media del tuo sito.

Formati di file immagine

Per iniziare, diamo un'occhiata ai vari tipi di formati di immagine esistenti. Capire come ciascuno di essi è diverso e quando è meglio usarli può aiutarti a costruire un uso più snello delle immagini.

I due formati di immagine più comuni utilizzati online sono JPEG e PNG. Entrambi questi formati sono costituiti da pixel. I pixel si allungano quando modifichi le dimensioni di un'immagine, il che a volte può renderla sfocata. Tuttavia, questi tipi di immagini hanno diversi punti di forza e di debolezza.

Quando usare i JPEG

I file JPEG sono una buona scelta sia per la stampa che per i contenuti web. Questo tipo di file immagine utilizza quello che viene chiamato un formato "con perdita". Quando un'immagine più grande viene convertita in JPEG, alcune delle informazioni contenute nel suo file vengono perse.

Queste informazioni non sono necessarie per la semplice visualizzazione dell'immagine. Tuttavia, ciò che significa è che la conversione in JPEG comporta una dimensione del file inferiore, ma può esserci qualche sacrificio nella qualità complessiva dell'immagine. Fortunatamente, la riduzione della qualità non è troppo evidente, soprattutto per le immagini più piccole.

Quando utilizzare i PNG

I file PNG sono utili anche per i contenuti Web, proprio come i JPEG, ma in modo diverso. Poiché i PNG possono avere sfondi trasparenti, ad esempio, sono più versatili e utili per la progettazione di grafica web.

I PNG utilizzano un formato di file "senza perdita di dati". Ciò significa che tutte le informazioni sull'immagine vengono conservate quando il file viene compresso. Di conseguenza, tendono ad essere di qualità superiore, ma offrono un miglioramento minore nelle dimensioni dei file e nella velocità della pagina. Sono una buona opzione per grafica e icone e per immagini di altissima qualità.

Dimensione dell'immagine

È ora di tagliare il gonfiore. Fornire immagini in scala è uno dei modi più semplici ed efficaci per ottimizzare le tue immagini. Perché così efficace? Il ridimensionamento dell'immagine garantisce di non inviare più pixel del necessario per visualizzare l'asset nelle dimensioni previste nel browser.

Molti siti tentano di fornire immagini grandi e non ridimensionate e si affidano al browser per ridimensionarle, il che si traduce nell'utilizzo di risorse extra e in una minore velocità del sito. Se la dimensione naturale dell'immagine è 820×820 pixel e viene visualizzata dal browser come 400×400 pixel… sono 32.400 pixel non necessari!

La chiarezza e la velocità di caricamento di una pagina hanno molto a che fare con il dispositivo su cui viene visualizzata l'immagine (mobile, desktop, ecc.). Ad esempio, un'immagine 4k può apparire gradevole sul tuo monitor da 27 pollici.

Tuttavia, quando un visitatore carica una pagina con quell'immagine, il browser eseguirà prima il rendering del file alla sua massima risoluzione, quindi lo ridimensionerà per adattarlo allo schermo. Se utilizzano un dispositivo mobile non capace di qualcosa di più grande di 400 pixel, probabilmente perderanno i tuoi contenuti.

Con questo in mente, alcune best practice per l'esportazione delle immagini includono:

• Mantieni le dimensioni dei file delle tue immagini al di sotto di un paio di centinaia di kilobyte, salvandole come JPEG o PNG "ottimizzati per il web".
• Lo standard web per le immagini è di 72 punti per pollice (dpi), che può essere ottenuto salvando le immagini nel formato prescritto sopra.

Puoi utilizzare Photoshop, Lightroom o un editor simile per ridurre le dimensioni dell'immagine a circa 1.500 pixel o meno in larghezza. In Photoshop, vai semplicemente su Immagine> Dimensione immagine per regolare manualmente le dimensioni e la risoluzione dell'immagine. Puoi anche andare su File > Esporta > Salva per Web per ottimizzare le tue immagini per il caricamento sul Web:

Se non desideri visualizzare foto nitide e vivide su un monitor più grande, puoi ridimensionare ulteriormente l'immagine.

Se lavori con Lightroom, vai su File > Esporta per regolare manualmente le dimensioni dell'immagine al momento dell'esportazione:

Le dimensioni e la risoluzione dell'immagine sono solo una parte del puzzle. Quando si tratta di ottimizzare le tue immagini, vorrai anche capire la compressione e usarla in modo efficace.

Compressione delle immagini

In poche parole, la compressione delle immagini è un modo per ridurre al minimo la dimensione (in byte) di un file grafico, senza degradare la qualità dell'immagine a un livello inaccettabile. Come abbiamo discusso, le immagini ad alta risoluzione con dimensioni di file inutilmente grandi possono influire notevolmente sulla velocità della pagina.

D'altra parte, le immagini ottimizzate sono in media il 40% più leggere delle immagini non ottimizzate. Come regola generale, ti consigliamo di ottimizzare tutte le immagini e gli altri media che carichi sul tuo sito web, prima o durante il processo di caricamento.

Compressione con perdita e senza perdita

Come accennato in precedenza, JPEG e PNG utilizzano due diversi tipi di compressione delle immagini. La compressione senza perdita preserva tutti i dati dal file originale, senza sacrificare la qualità.

Con la compressione senza perdita, in genere si suddivide un file in una forma "più piccola" per la trasmissione o l'archiviazione. Quindi le informazioni vengono rimesse insieme dall'altra parte, in modo che possano essere riutilizzate.

D'altra parte, la compressione con perdita rimuove alcuni dei dati contenuti nel file immagine. Ciò può comportare un calo maggiore della qualità, ma anche un miglioramento più significativo della velocità della pagina. Puoi persino personalizzare la quantità di compressione, al fine di raggiungere un equilibrio tra qualità e prestazioni.

Plugin per la compressione delle immagini

Le immagini caricate velocemente significano un sito più veloce e una migliore SEO. Ecco alcuni vari plug-in di ottimizzazione delle immagini per aiutarti con la compressione delle immagini.

Smush Compressione e ottimizzazione delle immagini

Il plug-in di compressione delle immagini di Smush funziona per ridimensionare, ottimizzare e comprimere tutte le tue immagini per il Web, in modo che si carichino più velocemente di prima. Se il tuo sito è ricco di foto, allora questo plugin è un must.

Ottimizzatore di immagini ShortPixel

Il plug-in Image Optimizer di ShortPixel comprime tutte le immagini e i PDF passati e futuri caricati nella tua libreria multimediale. Il plug-in fornisce compressione sia lossy che lossless per la maggior parte dei tipi di file. Se sei un fotografo, potresti optare per la compressione JPEG lucida, che utilizza un algoritmo di ottimizzazione con perdita di alta qualità.

Comprimi immagini JPEG e PNG

Stai cercando di ottimizzare solo JPEG e PNG? Questo plugin utilizza i servizi di compressione delle immagini TinyJPG e TinyPNG per aiutarti con la compressione delle immagini. In media, le immagini JPEG vengono compresse del 40-60 percento e le immagini PNG del 50-80 percento, senza una visibile perdita di qualità.

EWWW Ottimizzatore d'immagine

EWWW Image Optimizer fa il doppio lavoro. Ottimizza le immagini esistenti sul tuo sito e si occupa anche di quelle nuove che carichi. Inoltre, ti offre un grande controllo su come (e quanto) le tue immagini vengono compresse.

Kraken.io Ottimizzatore di immagini

Ultimo ma non meno importante, Kraken.io Image Optimizer è utile anche per ottimizzare sia i media nuovi che quelli esistenti. Supporta la compressione con perdita senza perdita e "intelligente", facilitando l'ottenimento di immagini di alta qualità con file di dimensioni inferiori.

Immagine in primo piano

L'immagine in primo piano non viene inserita nel corpo di un post di WordPress, ma viene utilizzata strutturalmente in tutto il tema. Potrebbe apparire come una miniatura accanto al titolo del post, ad esempio, o nell'intestazione durante la visualizzazione di un determinato post.

La maggior parte dei temi e dei widget si basa su immagini in primo piano, quindi non è qualcosa su cui vorrai saltare. Le immagini in primo piano consentono una maggiore personalizzazione; avrai la possibilità di visualizzare immagini di intestazione personalizzate uniche per post e pagine specifici o impostare miniature per caratteristiche speciali del tuo tema.

Una volta che hai deciso la dimensione che vuoi che sia la tua immagine in primo piano, tale dimensione rimarrà impostata per tutte le future immagini in primo piano. La dimensione che dovresti selezionare dipende dal tema del tuo sito WordPress e dal layout dei tuoi post.

Le immagini in primo piano sono generalmente più larghe di quanto non siano alte, con una larghezza compresa tra 500 e 900 pixel. È anche meglio scegliere un'immagine ad alta risoluzione e non pixelata.

Consiglio dell'esperto: per controllare i contenuti multimediali visualizzati ogni volta che un post o una pagina viene condiviso su Facebook o Twitter, installa il plug-in Yoast SEO. Non solo potrai personalizzare il titolo e la descrizione, ma anche caricare le dimensioni dell'immagine corrette per ogni canale social.

Ottimizza le tue immagini dopo averle caricate su WordPress

Ti consigliamo di ottimizzare le tue immagini prima di caricarle. Tuttavia, se ciò non è possibile o desideri ottimizzare le immagini già presenti sul tuo sito, puoi comunque farlo. Esistono alcuni metodi che possono aiutarti a ottimizzare i tuoi contenuti live.

Caricamento pigro delle immagini

Normalmente quando qualcuno visita una pagina web, tutto il suo contenuto inizia a caricarsi. Ciò significa che, per una pagina ricca di contenuti, può essere necessario un po' di tempo prima che tutto venga visualizzato.

Il "caricamento lento" comporta la modifica del modo in cui il tuo sito carica i contenuti. Indica al tuo sito di concentrarsi sul primo caricamento del testo, delle immagini e di altri elementi che sono immediatamente visibili. Solo dopo inizierà a caricare contenuti accessibili solo scorrendo la pagina verso il basso. Questo è un ottimo modo per velocizzare il tuo sito e migliorare l'esperienza dei tuoi visitatori.

Il modo più semplice per aggiungere il caricamento lento al tuo sito è tramite un plug-in come Lazy Load.

Questo è uno strumento di WP Rocket che aiuta a ridurre il volume di richieste inviate al server web del tuo sito contemporaneamente. Sostituisce persino le immagini segnaposto per i video di YouTube, in modo che il video effettivo venga caricato solo se necessario.

Immagini cache

Un altro modo per migliorare la velocità del tuo sito è tramite il 'caching'. Ciò comporta il salvataggio di alcuni dei dati del tuo sito in un luogo a cui un visitatore possa accedere più facilmente e rapidamente, spesso su un server di terze parti più vicino a dove si trova o nel proprio browser.

Esistono molti modi per eseguire la memorizzazione nella cache tramite codifica, plug-in e altri strumenti. Qui a WP Engine, implementiamo una solida memorizzazione nella cache su tutti i nostri siti per impostazione predefinita. Ciò è utile per ridurre l'impatto che tutti i tuoi contenuti hanno sulla velocità della pagina, non solo sulle tue immagini.

Rimuovi i dati EXIF

I dati EXIF ​​vengono memorizzati come parte di un file immagine e contengono informazioni su dove e come è stata scattata una foto. Viene aggiunto automaticamente alle immagini dalle fotocamere e generalmente non è necessario per i tuoi file web.

Pertanto, la rimozione di questi dati dalle tue immagini può velocizzare le tue pagine, anche se è probabile che l'impatto non sia enorme. Al momento non ci sono plugin aggiornati che possano aiutarti a farlo, sfortunatamente. Quindi, se utilizzi molte fotografie sul tuo sito e sei preoccupato per i dati EXIF, ti consigliamo di contattare uno sviluppatore per chiedere aiuto.

Evita i reindirizzamenti degli URL delle immagini

Infine, un altro elemento che può rallentare le tue pagine è quando le tue immagini causano reindirizzamenti. Questo accade più comunemente quando si collegano da qualche altra parte.

Per questo motivo, dovresti evitare di incorporare immagini da fonti esterne sul tuo sito. Invece, salva e carica ogni immagine o pezzo di media direttamente sul tuo sito, se possibile. Potresti anche voler assicurarti che le tue immagini non si colleghino a nulla, come una pagina multimediale separata.

Ottimizzazione delle immagini per i motori di ricerca

La formattazione dei titoli delle immagini è un altro passaggio importante nell'ottimizzazione delle immagini. Ciò significa che il nome del file immagine è rilevante per il suo contenuto. Quando lo fai, è più probabile che vengano visualizzati nei risultati di ricerca di immagini correlate tramite i motori di ricerca.

Ciò aumenterà la visibilità e l'accessibilità del tuo marchio, così come il traffico verso il tuo sito facendo in modo che le immagini del tuo sito vengano elencate più frequentemente nelle ricerche di immagini di Google. L'ottimizzazione delle immagini richiede pochissimo tempo e può fare un'enorme differenza nel traffico del tuo sito.

Ecco alcuni suggerimenti aggiuntivi per aiutare le tue immagini a posizionarsi più in alto.

Testo alternativo

Il testo alternativo, altrimenti noto come "testo alternativo" o "tag alt", è un attributo aggiunto a un'immagine in HTML. Il testo alternativo aiuta i motori di ricerca a capire di cosa tratta la tua immagine, descrivendo cosa include e qual è il suo scopo.

Google si affida al testo alternativo per determinare cos'è un'immagine poiché tutto ciò che "vede" è ciò che è nel tag HTML. Quando utilizzi un testo alternativo efficace e descrittivo per le tue immagini, è più probabile che il tuo sito venga elencato correttamente nei risultati di ricerca.

In WordPress, puoi aggiungere testo alternativo alle tue immagini in due modi. Innanzitutto, puoi aggiungerlo alle immagini che sono state inserite nei post, facendo clic sull'immagine e utilizzando l'opzione Impostazioni immagine sul lato destro dello schermo.

In alternativa, puoi anche aggiungere testo alternativo a un'immagine visitando Media > Libreria e scegliendo l'immagine che desideri. Quindi, aggiungi semplicemente il tuo testo alternativo al campo Testo alternativo per quell'immagine.

Tag del titolo

I title tag sono simili ai tag alt, ma sono per i lettori umani, non per i robot dei motori di ricerca. Una buona ottimizzazione del tag title può aiutare gli utenti ipovedenti ad accedere al tuo sito web.

Crea Sitemap di immagini XML

Un altro modo per far notare le tue immagini a Google è creare una mappa del sito e inviarla. Questa è una buona opzione per le immagini che non possono essere scansionate dai motori di ricerca.

Stiamo parlando di immagini caricate da JavaScript, per esempio. Le Sitemap forniscono ai motori di ricerca maggiori informazioni sulle immagini disponibili sul tuo sito, in modo che possano comprendere e indicizzare i tuoi contenuti in modo più accurato.

In WordPress, i seguenti plugin possono aiutarti a creare una mappa del sito:

• Mappe del sito XML di Google
• Yoast SEO
• Pacchetto SEO tutto in uno
• Udinra Tutte le immagini Mappa del sito

Per i siti Web non WordPress, esistono anche strumenti che possono aiutare a creare una mappa del sito, tra cui Screaming Frog, Dynomapper e altri. Dopo aver creato una mappa del sito, dovrai inviarla tramite gli strumenti per i webmaster di Google.

Posizionamento delle immagini e didascalie

Ultimo ma non meno importante, diamo un'occhiata al posizionamento delle immagini all'interno di un post di blog o di una pagina web. Il punto in cui metti le tue immagini all'interno di un post può avere un impatto significativo sul modo in cui si posiziona su Google.

Ad esempio, se posizioni un'immagine più vicino alle tue frasi chiave, è probabile che si posizioni meglio. Inoltre, tieni presente che l'aggiunta di una didascalia ricca di parole chiave alla tua immagine conta come testo di ricerca e può aiutare con una migliore SEO dell'immagine.

Ottimizza il tuo sito Web WordPress con WP Engine

L'ottimizzazione delle immagini copre molto terreno quando si tratta di migliorare il tuo sito web. L'ottimizzazione può aiutare a migliorare le esperienze degli utenti e mantenere i tempi di caricamento al di sotto dei cinque secondi. Qui a WP Engine, comprendiamo il valore che l'ottimizzazione delle immagini apporta al tuo sito web. Ecco perché offriamo ambienti di hosting WordPress gestiti specializzati. Ciò significa che avrai a portata di mano il supporto di esperti e strumenti e risorse di ottimizzazione completi!