Come ottimizzare le immagini in WordPress (sia per Speed ​​+ SEO)

Quando si tratta di ottimizzazione delle immagini, probabilmente hai già sentito parlare abbastanza del testo alternativo.


Esistono in realtà 20 modi diversi per ottimizzare le immagini (se includi sia l’ottimizzazione SEO che quella della velocità). Questi ti daranno punteggi migliori in GTmetrix / Pingdom, potenzialmente posizionandoti più in alto nella ricerca e velocizzando il caricamento dei tuoi contenuti. Sono riuscito a ottenere un rapporto GTmetrix al 100% con tempi di caricamento di 0,5 secondi … l’ottimizzazione delle mie immagini in WordPress è stata una parte importante.

Ottimizza le immagini PRIMA del caricamento – l’utilizzo di un programma come Photoshop per ottimizzare le immagini prima di caricarle può risparmiare molto lavoro. È possibile ridimensionare, comprimere, rimuovere i dati EXIF, salvare nel formato corretto (ad es. PNG / JPEG) e scrivere un nome di file descrittivo (che verrà automaticamente utilizzato come testo alternativo se si utilizza il Plug-in Attributi immagine alternativa automatici). Sono 6 ottimizzazioni!

Se hai bisogno di immagini ad alta risoluzione (ad es. un sito Web di fotografia), potresti non voler ridimensionarli e comprimerli (passaggi 3 e 8) poiché questi possono ridurre la qualità, anche se di piccola entità.

Principali strumenti che utilizzo – Io uso GIMP ridimensionare / comprimere le immagini (il mio editor di immagini preferito), WP Rocket per il mio plug-in cache, Imagify per un’ulteriore compressione senza perdita di dati + rimozione dei dati EXIF, entrambi Cloudflare e StackPath CDN, Plug-in Attributi ALT automatici di immagini per utilizzare automaticamente il nome del file immagine come testo alternativo e Cache Gravatar ottimale memorizzare nella cache Gravatars nei commenti. Io uso WP Review Pro come plug-in per i miei rich snippet, Ricerca migliore Sostituisci per aggiornare in blocco le immagini (molto utile) e GTmetrix come mio strumento di test della velocità. Vedi l’elenco completo degli strumenti.

1. Trova immagini non ottimizzate

Gestisci il tuo sito GTmetrix e vedrai questi elementi nelle schede Velocità pagina / YSlow. I primi cinque sono in genere specifici della pagina, ciò significa che GTmetrix mostrerà solo le immagini non ottimizzate per la singola pagina testata. Gli ultimi 3 si verificano in genere sull’intero sito. Naturalmente, questi sono solo 7 modi per ottimizzare le immagini, ma alcuni dei più importanti, quindi li faremo prima.

  • Servi immagini in scala: ridimensiona le immagini di grandi dimensioni per correggere le dimensioni (passo 2)
  • Specifica le dimensioni dell’immagine: specifica una larghezza / altezza nell’HTML o CSS dell’immagine (passaggio 3)
  • Ottimizza le immagini – comprime senza perdita di immagini (passaggio 4)
  • Combinare le immagini usando gli sprite CSS – combina più immagini in 1 immagine (passaggio 5)
  • Evita reindirizzamenti URL – non pubblicare immagini da una versione errata di www o http (s)passaggio 6)
  • Utilizzare una rete di distribuzione dei contenuti – servire immagini / file da un CDN (passaggio 7)
  • Sfrutta la memorizzazione nella cache del browser – immagini / file della cache utilizzando il plug-in della cache (passaggio 8)
  • Rendi favicon piccolo e memorizzabile nella cache – usa una favicon 16x16px e memorizzala nella cache (passaggio 9)

Ottimizzazioni delle immagini in GTmetrix

Inizia fissando le immagini che appaiono su più pagine: logo, immagini della barra laterale / piè di pagina, ecc. Inizia anche con le immagini ridimensionate in quanto potresti dover ridimensionarle / ricaricarle con nuove dimensioni.

2. Servi immagini in scala

Se tu vedi servire immagini ridimensionate errori in GTmetrix, significa che hai immagini sovradimensionate e devi ridimensionarle alle dimensioni corrette (che GTmetrix ti fornisce). Finché segui il cheat sheet delle dimensioni dell’immagine (vedi sotto), non dovresti vedere questi errori. Ma se hai già caricato immagini di grandi dimensioni, dovrai ridimensionarle manualmente o utilizzare un plug-in.

Serve-Scaled-Images

Ridimensionare in blocco le immagini utilizzando un plug-in – il problema è che immagini diverse richiedono dimensioni diverse (widget, cursori, immagini a larghezza intera). Mentre la maggior parte dei plugin di ottimizzazione delle immagini ha un’opzione per ridimensionare le immagini a una singolo set di dimensioni specifico, è necessario ritagliarle / ridimensionarle prima di caricare. Se ridimensioni le immagini utilizzando un plug-in, conserva i backup delle immagini originali (e ne verifica solo alcune) nel caso in cui non sei soddisfatto dei risultati.

Ridimensiona immagini di grandi dimensioni

Ridimensiona manualmente le immagini – ottenere le dimensioni corrette da GTmetrix e ridimensionarle / ricaricarle. Ricorda, GTmetrix mostra solo immagini non ottimizzate per la singola pagina testata.

Crea un cheat sheet delle dimensioni dell’immagine del tuo sito web
I dispositivi di scorrimento, la barra laterale del blog, le immagini in primo piano e il corpo del contenuto del blog richiedono tutti dimensioni specifiche a cui le immagini devono essere ridimensionate. Crea un cheat sheet in modo da poterli ridimensionare prima di caricarli su WordPress. Ciò è particolarmente utile se hai molte aree del tuo sito web che richiedono dimensioni di immagini diverse e se hai più designer / editori.

Esempio:

  • Immagini del dispositivo di scorrimento: 1900 (w) x 400 (h)
  • Immagini carosello: 115 (h)
  • Immagini widget: 414 (w)
  • Immagini dei post del blog Fullwidth: 680 (w)
  • Immagini in primo piano: 250 (w) x 250 (h)
  • Yoast Facebook OG image: 1200 (w) x 628 (h) – step 11
  • Yoast Twitter OG immagine 1024 (w) x 512 (h) – passaggio 11

Rettangolo larghezza pixel 680

3. Specifica le dimensioni dell’immagine

Ciò significa aggiungere una larghezza / altezza all’HTML o CSS dell’immagine. Visual Editor lo fa per te (ma widget, alcuni compilatori di pagine e HTML personalizzato non). Prova alcune pagine in GTmetrix.

GTmetrix ti dice le dimensioni dell’immagine …

Speciy Image Dimensions GTmetrix

Aggiungi la larghezza / altezza all’HTML dell’immagine …

Specifica le dimensioni dell'immagine

4. Comprimi senza perdita di immagini

Questi sono elementi di “ottimizzazione delle immagini” in GTmetrix. Molti programmi (ad es. Photoshop e Gimp) hanno la possibilità di comprimersi durante l’esportazione. Anche se questo è un ottimo inizio, i plugin di compressione delle immagini di solito ottengono risultati ancora migliori. preferisco Imagify, Kraken, ShortPixel, o Smush. Altri plugin sono noti per ridurre visivamente la qualità dell’immagine e possono causare errori con le immagini.

Compressione delle immagini con Imagify

  1. Iscriversi per Imagify
  2. Installa il Imagify Plugin
  3. Ti verranno richieste le seguenti istruzioni:
  4. Inserisci la tua chiave API dal tuo account Imagify
  5. Imposta il tuo livello di compressione (normale, aggressivo, ultra)
  6. Immagina tutto (foto sotto) in blocco ottimizza tutte le immagini sul tuo sito
  7. Una volta raggiunto il limite, paga $ 4,99 o attendi il mese prossimo per ripristinare il limite

imagify

Prova l’aspetto delle immagini con diversi livelli di compressione …

Imagify Compression Comparison

Una volta registrato, ottimizza in blocco tutte le immagini sul tuo sito …

imagify-wordpress-image-ottimizzazione

Imposta l’opzione per ottimizzare le immagini al caricamento …

Imagify Ottimizza le immagini al caricamento

5. Combina immagini in sprite CSS

Sulla mia home page, potresti pensare di vedere 21 icone, ma in realtà sono 1 singola immagine. Questo è un CSS sprite, dove combini più immagini in una singola immagine. Ciò riduce il numero di immagini (e richieste), motivo per cui la mia homepage ha solo 10 richieste. Invece di caricare 21 immagini, carica 1. Avrai bisogno delle conoscenze CSS per fare questo, o usare a Generatore di sprite CSS.

Sprite CSS

GTmetrix CSS Sprites

Usa solo sprite CSS per immagini decorative – perdi molti tag alt immagine quando combini 21 immagini in 1. NON combinare immagini importanti in sprite CSS se descrivono il tuo contenuto. Per quanto mi riguarda, la velocità della mia homepage è più importante del SEO … Uso il rapporto GTmetrix della mia homepage in molti punti (quindi devo tenerlo pulito) e la mia homepage, che ci crediate o no, non ha come target un parola chiave. Lo scopo è quello di delineare i miei tutorial … e caricare velocemente.

6. Evita reindirizzamenti URL immagine

Se sei passato a HTTPS, versioni www o hai iniziato a pubblicare immagini da una rete CDN, dovresti aggiornare in blocco tutte le tue immagini (e link) usando Ricerca migliore Sostituisci quindi stanno servendo la versione corretta. Altrimenti potresti vedere minimizzare i reindirizzamenti o utilizzare domini senza cookie errori.

Riduci al minimo i reindirizzamenti

Domini senza cookie

Utilizza il plug-in Better Search Sostituisci per aggiornare in blocco gli URL delle immagini …

Migliore ricerca Sostituisci le versioni del WWW

Migliore ricerca Sostituisci HTTP vs. HTTPS

7. Servire immagini da un CDN

Ciò richiede la modifica degli URL delle immagini per includere il tuo URL CDN

  • URL immagine precedente (senza CDN): https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • Nuovo URL immagine (con CDN): https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare vs. StackPath – Uso entrambi Cloudflare e StackPath poiché più data center = consegna dei contenuti più rapida. Cloudflare ha Oltre 200 data center, StackPath ha 34+ data center che si trovano pesantemente negli Stati Uniti (che è la maggior parte dei miei visitatori). Cloudflare non ti assegna un URL CDN quindi useremo il CDN di StackPath per pubblicare immagini.

StackPath-Data-Center

Passo 1: Scegli un CDN. Io uso StackPath (hanno una prova di 30 giorni).

Passo 2: Nella dashboard, fai clic sulla scheda CDN, quindi creare un sito CDN StackPath

StackPath-CDN-Tab

StackPath-CDN-Domain

CDN-URL-StackPath

Passaggio 3: Copia il tuo URL CDN e incollalo nel plug-in della cache (di seguito è per WP Rocket) …

WP-Rocket-CDN

Passaggio 4: Sostituisci gli URL delle immagini per includere il tuo URL CDN (usando Ricerca migliore Sostituisci).

Ricerca migliore Sostituisci URL CDN

Passaggio 5: Verifica la presenza di vecchi URL di immagini utilizzando Chrome DevTools. A volte, il plug-in della cache o Enabler CDN se ne occupa, tranne i collegamenti in CSS e JavaScript che sono codificati. Per i collegamenti lasciati indietro, sono normalmente presenti File (come CSS o Javascript) che necessitano di controllo e sostituzione manuali. Chrome DevTools mostra tutti i domini attualmente in uso.

Passaggio 6: Avvia il tuo sito GTmetrix e “rete di distribuzione dei contenuti” dovrebbe essere verde in YSlow. Non dovresti avere alcun errore nel “minimizzare i reindirizzamenti” o “utilizzare domini senza cookie”.

CDN GTmetrix YSlow

8. Immagini cache

La maggior parte dei plugin di cache ha un’opzione per memorizzazione nella cache del browser, che memorizza nella cache le immagini. Uso WP Rocket che è stato classificato come plug-in di cache n. 1 in più sondaggi di Facebook e ho un tutorial per questo. Prestazioni rapide viene generalmente classificato il plug-in di cache gratuito n. 1 (ho anche un tutorial per quello).

Memorizzazione nella cache del browser

9. Rendi Favicon piccolo e memorizzabile nella cache

Assicurati che la tua favicon sia 16x16px, sia in formato favicon.ico e sia memorizzata nella cache usando il plug-in della cache.

10. Rimuovere i dati EXIF

Dati Exif contiene informazioni quali apertura, velocità dell’otturatore, ISO, lunghezza focale, modello della fotocamera, data di scatto della foto e altro. Non è necessario per le immagini sul tuo sito Web. Il VA Rimozione del plug-in Exif rimuove automaticamente i dati Exif una volta caricate le immagini.

La maggior parte dei plugin di ottimizzazione delle immagini (inclusi Imagify, ShortPixel, Kraken, EWWW e Smush) hanno un’opzione per rimuovere automaticamente i dati EXIF. Ecco le impostazioni per Imagify …

Imagify Remove EXIF ​​Data

11. Ottimizzazione dell’immagine Cloudflare

Cloudflare ha anche alcuni modi per ottimizzare le immagini. Mirage e Polish si trovano nel tuo Impostazioni della velocità di Cloudflare mentre la protezione Hotlink si trova nel tuo Scrape Shield settings.

Cloudflare Mirage (Funzionalità Pro): riduce le richieste di immagini, carica le immagini in modo pigro e migliora i tempi di caricamento delle immagini sui dispositivi mobili con connessioni di rete lente. Ecco altri dettagli …

  • Ridimensiona le immagini in base al dispositivo / alla connessione di un visitatore. Un visitatore con una connessione scadente otterrà una versione più piccola (risoluzione inferiore) fino a quando non tornerà su una larghezza di banda maggiore.
  • Riduce la quantità di richieste – invece di inviare più richieste per tutte le immagini sul sito Web, Mirage inserisce questa in una richiesta in modo che i visitatori possano vedere immediatamente le immagini.
  • Lazy carica le immagini (le carica solo quando gli utenti scorrono verso il basso e visualizzano effettivamente l’immagine).

Cloudflare Image Mirage

Cloudflare Polish (Funzione Pro): rimuove i dati EXIF ​​e comprime le immagini.

Cloudflare Image Polish

Protezione Cloudlink Hotlink – impedisce alle persone di copiare le tue immagini e incollarle sul proprio sito Web, il che (poiché stai ancora ospitando quell’immagine) risucchia la tua larghezza di banda.

Protezione Cloudlink Hotlink

12. Immagini di caricamento lento

Ciò ritarda il caricamento delle immagini fino a quando gli utenti non scorrono la pagina verso il basso e visualizzano visibilmente l’immagine. Mentre migliora i tempi di caricamento iniziale, il caricamento costante delle immagini durante lo scorrimento può essere molto fastidioso. Personalmente carico solo i video in modo pigro, dal momento che questi impiegano molto tempo a caricare delle immagini.

Puoi usare il Plug-in Lazy Load, Plug-in Caricamento lento per video, o usa WP Rocket …

WP-razzo-Lazy-Load

13. Salva come formato corretto

PNG vs. JPEG – PNG non è compresso (file di dimensioni maggiori) e deve essere utilizzato in immagini semplici senza molti colori. JPEG è un formato compresso (file di dimensioni inferiori) che riduce leggermente la qualità dell’immagine ma è di dimensioni inferiori e viene utilizzato nelle immagini con molti colori. GIMP e altri programmi di modifica delle immagini dovrebbero utilizzare automaticamente il formato corretto, ma questo è comunque utile.

jpg_vs_png

Illustrazione di Labnol

14. Nomi dei file di immagini

I motori di ricerca utilizzano sia nomi di file di testo alternativo che di immagini, quindi dai un nome ai tuoi file prima di caricarli su WordPress. Se stai utilizzando un plug-in che aggiunge automaticamente il testo alternativo in base al nome del file, nominare i tuoi file è tutto ciò che devi fare! Non riempire le parole chiave, basta descrivere l’immagine.

Etichetta nomi file immagine

15. Alt Text

Dovrebbero corrispondere al nome del file immagine. Puoi usare il Plug-in Attributi immagine alternativa automatici per utilizzare automaticamente il nome del file come testo alternativo. Finché stai usando immagini pertinenti, alcune di esse dovrebbero naturalmente includere (bit) della tua parola chiave … non c’è assolutamente alcun motivo per inserire parole chiave nelle immagini, il che rischia di penalità di riempimento delle parole chiave.

Aggiungi testo alternativo alle immagini automaticamente – Usa il Plug-in Attributi immagine alternativa automatici. Ora ogni volta che aggiungi un’immagine, il plugin aggiungerà un testo alternativo che è lo stesso del nome del file …

alt ="WP-veloce-Cache-Plugin" larghezza ="577" altezza ="247" />

Trova testo alternativo mancante – Screaming Frog è uno strumento gratuito che ti mostra tutte le immagini mancanti del testo alternativo.

  • Scarica Screaming Frog SEO Spider
  • Inserisci il tuo sito Web e fai clic su “Start” per eseguire la scansione del sito Web
  • Fai clic sulla scheda immagini
  • Vai a Panoramica → Testo alternativo mancante (vedi sotto)
  • Individua quelle immagini sul tuo sito e aggiungi testo alternativo

Testo alternativo immagine mancante - Screaming Frog

16. Apri grafico (Facebook + Twitter)

Questo rende il tuo formato di contenuto correttamente se condiviso su Facebook / Twitter, in particolare la tua immagine poiché entrambe le reti usano dimensioni personalizzate per visualizzarlo, altrimenti sembrerà divertente.

facebook-share

Se usi Yoast, vai alle impostazioni “Social” e abilita Open Graph sia per Facebook / Twitter …

Yoast-sociale-Meta-dati

Ora modifica una pagina / post, quindi fai clic sul link “condividi” in Yoast e vedrai le opzioni per caricare immagini personalizzate per Facebook (larghezza 1200 x altezza 628) e Twitter (larghezza 1024 x altezza 512).

Yoast-social-media-ottimizzazione

17. Immagini in frammenti in primo piano

Snippet in primo piano è quando Google mostra parti dei tuoi contenuti nella parte superiore dei risultati di ricerca e può (ma non è garantito) includere un’immagine. Google li estrarrà da qualsiasi risultato della prima pagina, tuttavia dipende da loro se visualizzeranno anche uno snippet o un’immagine in primo piano. Anche questi fanno apparire il tuo frammento due volte e sono un modo incredibile per ottenere molto traffico.

3 tipi di snippet in primo piano

  • risposte
  • tabelle
  • elenchi

In primo piano-image-Frammenti

Come ottenere frammenti in primo piano in Google

  • Targeting di una parola chiave in cui le persone vogliono a conciso risposta
  • Uso Moz Keyword Explorer per identificare le parole chiave delle domande
  • Usa Rispondi al pubblico per trovare ancora più parole chiave per le domande
  • Scegli se la risposta deve essere un paragrafo, un elenco o una tabella
  • Progetta una bella grafica (o scatta una foto) che descriva la parola chiave
  • Usa la lunghezza ottimale dei caratteri (vedi foto sotto presa da Moz)
  • Creare contenuti basati sui fatti con riferimenti di qualità (collegamenti, grafica, ecc.)
  • Targeting di parole chiave che hanno già uno snippet in primo piano ma svolgono un lavoro scadente
  • Se stai mirando alla casella di risposta, scegli come target la tua parola chiave utilizzando una corrispondenza esatta
  • Assicurati di essere sulla prima pagina per la parola chiave, in caso contrario, migliora il contenuto

Lunghezza ottimale degli snippet in primo piano

18. Dati strutturati

Le immagini possono essere utilizzate in dati strutturati (e badge) per i seguenti tipi di contenuto:

Snippet video ricco

Ricetta-Rich-Snippets

Snippet ricco di prodotti

Che plug-in Rich Snippet dovrei usare?
Io uso WP Review Pro di MyThemeShop (ecco una pagina in cui lo uso) che supporta 14 tipi di dati tra cui ricette e recensioni di prodotti. Usavo i rich snippet di WP, ma lo sviluppatore ha abbandonato il plug-in e non è stato aggiornato per oltre 2 anni e il Plugin All In One Schema è solo noioso (ha una mancanza di opzioni e stile). WP Review Pro è molto facile da usare.

19. Immagini di stile

Non dimenticare di dare uno stile alle tue immagini! Uso i bordi su gran parte dei miei.

  • Titoli immagine
  • Link immagine
  • Confini dell’immagine
  • Didascalie delle immagini

20. Ridimensiona le GIF

Proprio come si ridimensionano le immagini alle dimensioni corrette, anche le GIF devono essere ridimensionate (usare GIF GIF).

Ridimensiona la GIF …

Ridimensionamento di GIF

Quindi comprimilo …

Comprimi GIF

Il risultato :-)

Ottimizza GIF cane

21. Gravator cache

Se hai post con molti commenti, Gravatars può rovinare completamente il tuo rapporto. Puoi disabilitarli, interrompere commenti per mostrare solo un certo numero di commenti o provare un plug-in della cache Gravatar. Potrebbe essere necessario eseguire alcuni test poiché alcuni plug-in non funzionano su alcuni siti Web.

  • Cache Gravatars (Ottimale, Harry, o FV Gravatar Cache)
  • Disabilita Gravatars completamente
  • Imposta il Gravatar predefinito su vuoto
  • Elimina i commenti che non aggiungono valore
  • Imposta Gravatar predefinito su un’immagine personalizzata sul tuo server
  • Limita le immagini Gravatar a dimensioni inferiori (ad es. 32px)
  • Impagina commenti in WP Disabilita per mostrare solo 20 commenti alla volta
  • Se nessuno di questi funziona, controlla Tutorial Gravatari con memorizzazione nella cache di WP Rocket

Cache-Gravatar-Images

22. Evita di incorporare immagini da siti Web esterni

Carica sempre le immagini sul tuo sito Web, non copiarle mai / incollarle. Altrimenti si ottengono richieste extra poiché l’immagine non è ospitata sul server, quindi deve estrarla da qualche altra parte.

23. Strumenti di ottimizzazione delle immagini

Evitare l’uso di plugin con funzionalità duplicata – Imagify, ShortPixel, Kraken, EWWW e Smush sostanzialmente fanno la stessa cosa (compressione senza perdita, rimozione dei dati EXIF, ridimensionamento delle immagini). WP Rocket ha opzioni per caricamento lento, memorizzazione nella cache e CDN (e pulizia del database + hosting di Google Analytics in locale) che la maggior parte dei plug-in di cache non ha, salvandoti dall’uso di plug-in extra.

  • Screenshot fantastico – Estensione di Chrome per scattare schermate.
  • Attributi Alt immagine automatica – inserisce automaticamente il testo alternativo usando il nome del file immagine.
  • Ricerca migliore Sostituisci – utilizzalo per aggiornare in blocco le immagini.
  • Cloudflare – CDN gratuito con oltre 200 data center, protezione hotlink, miraggio, lucidatura.
  • Chrome DevTools – mostra i domini utilizzati se si hanno errori di reindirizzamento GTmetrix.
  • Generatore di Sprite CSS – strumento gratuito per combinare più immagini in 1 sprite CSS.
  • EWWW Image Optimizer – compressione senza perdita, rimozione di EXIF, ridimensionamento.
  • GifGifs – ridimensiona le GIF.
  • GIMP – software gratuito per l’editing delle immagini che uso.
  • GTmetrix – mostra quali immagini devono essere ottimizzate.
  • Imagify – compressione senza perdita, rimozione di EXIF, ridimensionamento.
  • Imsanity – ridimensiona l’immagine di grandi dimensioni per correggere “servire immagini ridimensionate” in GTmetrix.
  • Kraken – compressione senza perdita, rimozione di EXIF, ridimensionamento.
  • Carico pigro – plugin che ritarda il caricamento delle immagini fino a renderle visibili.
  • Carico pigro per i video – plugin che ritarda il caricamento dei video fino a quando non diventano visibili.
  • Cache Gravatar ottimale – cache Gravatars (o provare Harry’s Gravatar Cache).
  • Screaming Frog SEO Spider – trova testo alternativo mancante, meta descrizioni, ecc.
  • ShortPixel – compressione senza perdita, rimozione di EXIF, ridimensionamento.
  • Smush – compressione senza perdita, rimozione di EXIF, ridimensionamento.
  • StackPath – $ 10 / mese CDN con 31 data center.
  • Swift Performance Lite – N. 1 plug-in cache gratuito nella maggior parte dei sondaggi di Facebook.
  • Recensione WP – plug-in rich snippet (aiuta a visualizzare le immagini nei risultati di ricerca).
  • WP Rocket – # 1 plug-in cache nella maggior parte dei sondaggi di Facebook.
  • VA Rimozione di Exif – Elimina i dati non necessari dalle immagini.
  • Ingrandisci  -Estensione di Chrome per ottenere lo zoom perfetto durante lo scatto di schermate.
  • Yoast – abilita i metadati di Facebook / Twitter in modo che le immagini vengano formattate correttamente quando condivise.

Domande frequenti

&# X2705; Come si correggono gli errori di ottimizzazione delle immagini in GTmetrix?

Comprimendoli senza perdita di dati utilizzando un plug-in come ShortPixel, Imagify o Smush. Uso ShortPixel perché corregge sempre questo errore in GTmetrix.

&# X2705; Come si correggono gli errori di visualizzazione delle immagini in scala in GTmetrix?

Ciò significa che è necessario ritagliare / ridimensionare le immagini secondo le dimensioni corrette. Se le immagini sono troppo grandi, GTmetrix mostrerà errori di immagine in scala di servizio e ti dirà le dimensioni corrette in cui dovrebbero essere ridimensionate.

&# X2705; Come si correggono gli errori Specify Image Dimension in GTmetrix?

Visualizza l’HTML dell’immagine e verifica che abbia una larghezza e un’altezza specificate, come mostrato in questa esercitazione.

&# X2705; Altri modi per velocizzare il caricamento delle immagini?

La rimozione dei dati EXIF ​​e l’utilizzo di un CDN per servire le tue immagini faranno la differenza al di fuori dei consigli di GTmetrix.

&# X2705; Quale ottimizzazione dell’immagine è la migliore?

Uso ShortPixel perché la qualità è praticamente zero e corregge l’elemento Ottimizza immagini in GTmetrix.

Cosa pensi?
Il tuo rapporto GTmetrix ha un aspetto leggermente migliore? Fatemi sapere nei commenti! E se vuoi altri suggerimenti che ti permetteranno di ottenere punteggi / tempi di caricamento ancora migliori, consulta la mia guida completa sulla velocità di WordPress.

Saluti,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map