Come dimensionare correttamente le immagini in WordPress (PageSpeed Insights + GTmetrix Item)

Se hai eseguito il tuo sito tramite PageSpeed Insights o GTmetrix, potresti vedere una raccomandazione per dimensionare correttamente le immagini.

Per dimensionare correttamente le immagini in WordPress, espandere l’elemento in PageSpeed Insights e visualizzare quali immagini sono troppo grandi. Ridimensionarli alle dimensioni corrette (trovate nel report legacy GTmetrix). Infine, sostituire la vecchia immagine con quella nuova. Riprova il tuo sito e dovrebbe essere al 100%.

Ridimensiona correttamente le immagini

Poiché PageSpeed Insights mostra solo immagini non ottimizzate per la singola pagina che stai testando, inizia ridimensionando le immagini in tutto il sito che appaiono sul tuo sito Web (logo, barra laterale e immagini a piè di pagina). Quindi, esegui altre pagine tramite PageSpeed Insights e ridimensiona le tue immagini su quelle.

Posso usare un plugin per ridimensionare automaticamente le immagini?
Non probabile. È possibile impostare una larghezza massima + altezza nella maggior parte dei plugin di ottimizzazione delle immagini. Ma diverse aree del tuo sito richiedono dimensioni specifiche (le immagini devono essere ridimensionate di conseguenza).

Crea un cheat sheet dimensione immagine.
Il modo migliore per evitare errori di immagine correttamente dimensionati è imparare le dimensioni delle diverse aree del tuo sito web (cursori, widget, logo, immagini del blog a larghezza intera, ecc.). Quindi, creare un cheat sheet dimensione immagine con le dimensioni di ogni area. Se si seguono le dimensioni delle immagini cheat sheet e ridimensionare le immagini prima di caricare, non si dovrebbe mai avere errori di immagine correttamente dimensioni.

Trova immagini sovradimensionate In GTmetrix Legacy Reports

GTmetrix legacy reports mostra le dimensioni corrette per le immagini di grandi dimensioni.

Crea un account GTmetrix gratuito e vai su Account > Predefinito per i rapporti legacy > abilita.

Eseguire una pagina tramite GTmetrix e visualizzare la sezione “servire immagini in scala”. Espandi i loro consigli e vedrai le dimensioni corrette a cui queste immagini dovrebbero essere ridimensionate.

Servire immagini in scala GTmetrix

È anche possibile controllare manualmente se le immagini sono troppo grandi. Fare clic destro su un’immagine > copia indirizzo immagine.

Copia indirizzo immagine

Quindi, incolla l’URL dell’immagine in una nuova scheda del browser. Se confronti l’immagine mostrata sul tuo sito Web con l’URL dell’immagine, vedrai che c’è una notevole differenza nelle loro dimensioni. Ciò significa che l’immagine deve essere ridimensionata. Confrontando le due varianti delle tue immagini fianco a fianco, puoi vedere quanto è grande l’immagine (e perché la pagina su cui si trova potrebbe caricarsi lentamente).

 Ridimensionata vs Immagine non ridimensionata

Ridimensiona le immagini per correggere le dimensioni

Scarica la vecchia immagine e aprila nel tuo strumento di modifica delle immagini preferito (io uso GIMP). Ridimensionare e / o ritagliare l’immagine alle dimensioni consigliate da GTmetrix. Alcuni strumenti di modifica delle immagini consentono di comprimere le immagini e rimuovere i dati EXIF che renderanno il carico dell’immagine ancora più veloce.

 Ridimensionamento immagine GIMP

Puoi anche ritagliare e ridimensionare le immagini direttamente in WordPress:

Ridimensionamento dell'immagine in WordPress Media Editor

Sostituisci la vecchia immagine con quella nuova

Carica la tua nuova immagine su WordPress, quindi sostituisci la vecchia immagine con quella nuova.

 Unscaled Widget Immagine

Scaled Widget Image

Ripetere il test della pagina in GTmetrix

Ripetere il test della pagina in GTmetrix (o PageSpeed Insights) e l’errore dovrebbe essere corretto.

 Servire le immagini in scala WordPress

Correttamente dimensioni immagini sul cellulare

Correttamente dimensionamento immagini è diverso sul cellulare.

Se ti iscrivi per un account GTmetrix premium, è possibile testare la velocità mobile su Android. È probabile che vedrai più errori di immagine in scala se il tuo sito non utilizza immagini adattive, il che significa ridimensionare automaticamente le immagini per i dispositivi mobili (questo di solito è fatto da un plugin).

Passo 1: Eseguire il vostro sito attraverso GTmetrix Android di Test:

GTmetrix Test Mobile

Servire in Scala le Immagini Sul Cellulare

Passo 2: Trova il tuo mobile sfondo le dimensioni fornite da GTmetrix:

Massimo Sfondo Larghezza

Step 3: Installare un sistema di Immagini plugin (mi raccomando ShortPixel o di adattamento delle Immagini).

ShortPixel Adaptive Images

Passo 4: Impostare le dimensioni fornite da GTmetrix come larghezza massima dello sfondo.

Larghezza massima dello sfondo

Passo 5: Riesegui il tuo sito tramite il test mobile di GTmetrix per assicurarti che non ci siano errori.

GTmetrix Mobile Test

Passo 5: Configurare altre impostazioni nel plugin adaptive images (ShortPixel include il supporto WebP, il caricamento pigro delle immagini, il ritaglio intelligente e la rimozione dei dati EXIF). Anche questi possono aiutare.

Ridimensiona le immagini su più pagine

Se usi la stessa immagine su più pagine/post e deve essere riparata, puoi ridimensionare l’immagine, copiarla in HTML, quindi utilizzare il plugin Better Search Replace per risolverla su più pagine.

Passo 1: Installa il plugin Better Search Replace.

Passo 2: Copia l’HTML della vecchia immagine e incollalo nel campo “Cerca” nel plugin Better Search Replace. È possibile utilizzare l’editor di testo WordPress per vedere l’HTML dell’immagine. Nota: Better Search Replace sostituirà un’immagine solo se contiene l’HTML esatto inserito nel plugin.

Meglio cercare Sostituisci per immagini

Passo 3: Copia il codice HTML della nuova immagine e incollalo nel campo “Sostituisci con”.

 Servire immagine in scala HTML

Passo 4: Selezionare le tabelle (ad es. post) vuoi scansionare e deselezionare ” esegui come scansione a secco.”

Passo 5: Fai clic su “Cerca / sostituisci” e il plugin sostituirà la vecchia immagine con quella nuova.

Crea un Cheat Sheet delle dimensioni dell’immagine

Come ho già detto in precedenza, dovresti misurare le dimensioni di tutte le aree del tuo sito Web in modo da poter ridimensionare le immagini prima di caricarle. Puoi trovare queste dimensioni in GTmetrix (solo se hai correttamente errori di dimensione dell’immagine) o puoi anche trovarle nel foglio di stile CSS del tuo tema.

Esempio:

  • Slider immagini: 1900(w) x 400(h)
  • Carousel immagini: 115 (w)
  • Widget di immagini: 414 (w)
  • Full width blog post immagini: 680(w)
  • Immagini in primo piano: 250(l) x 250(h)
  • Yoast Facebook OG immagine: 1200(w) x 628(h) – passo 11
  • Yoast Twitter OG immagine 1024(w) x 512(h) – passo 11

680 Pixel di Larghezza Rettangolo

il Mio blog in larghezza 680px, così ogni singola immagine di questo post è stato ridimensionato per 680px.

Plugin WordPress per dimensionare correttamente le immagini

La maggior parte dei plugin di ottimizzazione delle immagini ha la possibilità di ridimensionare le immagini, tuttavia questo non è molto efficace quando si tenta di correggere gli errori in GTmetrix, poiché diverse aree del tuo sito Web richiedono dimensioni diverse. È più per assicurarsi che le tue immagini non siano assolutamente enormi. Come dice il plugin Imagify, la larghezza massima non dovrebbe essere inferiore alla miniatura più grande.

Smush

Ridimensiona le Immagini Smush

Imagify

Ridimensiona le Immagini Imagify

EWW Image Optimizer

Ridimensiona le Immagini BLEAH

Altri Modi Per Ottimizzare le Immagini

ho scritto un tutorial completo su come ottimizzare le immagini in WordPress, che comprende:

  • Compressione di immagini
  • Pubblicazione di immagini da una CDN
  • Ridimensionamento di GIF
  • Rimozione di dati EXIF
  • Caricamento lento di immagini + video
  • Cloudflare Mirage, Polish, Hotlink Protection

Ottimizzazioni delle immagini GTmetrix

Alla ricerca di ulteriori tutorial di velocità?
Ecco altri tutorial che ho scritto:

  • WordPress Speed Guide (questa guida ha preso per sempre)
  • Come impostare WP Rocket (il plugin cache vi consiglio)

Ho anche un video fantastico sull’ottimizzazione della velocità di WordPress:

Domande frequenti

Come posso correggere correttamente le dimensioni delle immagini?

Scarica l’immagine, ridimensionala per correggere le dimensioni fornite dai report legacy di GTmetrix, quindi sostituisci la vecchia immagine con quella nuova.

Posso usare un plugin per dimensionare correttamente le immagini?

No, diverse sezioni del tuo sito web richiedono diverse dimensioni dell’immagine. È necessario ridimensionare le immagini per adattarsi a quelle dimensioni uniche.

Quali immagini dovrei iniziare a ridimensionare prima?

Inizia ridimensionando le immagini che appaiono su più pagine come il tuo logo, la barra laterale e le immagini a piè di pagina.

Dove trovo le dimensioni corrette di un’immagine?

I rapporti legacy di GTmetrix indicano le dimensioni corrette di ogni immagine quando si espande l’elemento nella scheda Velocità di pagina.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.