Com servir imatges a escala a WordPress (ítem a GTmetrix)

Necessiteu servir imatges escalades a WordPress?


Això només vol dir que heu de canviar la mida de les imatges grans perquè siguin més petites.

GTmetrix us indica quines imatges han de ser escalades i les dimensions correctes que han de ser retallades o redimensionades. A continuació, redimineu (escala) la imatge i substituïu les imatges antigues per les noves.

Servir imatges a escala

Com que GTmetrix només mostra imatges no optimitzades per a la pàgina que estàs provant, comenceu per escalar a tot el lloc imatges que es mostren en diverses pàgines (el vostre logotip, la barra lateral i les imatges del peu de pàgina). A continuació, executa les altres pàgines mitjançant GTmetrix i escala les imatges individuals.

Puc utilitzar un complement per escalar automàticament imatges?
No és probable. Podeu definir una amplada màxima + alçada en la majoria dels complements d’optimització d’imatges. Però les diferents àrees del vostre lloc web requereixen dimensions específiques (les imatges han de ser escalades en conseqüència).

Creeu un full de trampes de dimensió d’imatge.
La millor manera d’evitar els errors d’imatge de mida que es publiquen és aprendre les dimensions de cada àrea del vostre lloc web (control lliscant, ginys, logotip, imatges de bloc d’amplada completa, etc.). A continuació, creeu un full de trampes de dimensió d’imatge que mostri les dimensions de cada àrea. Si seguiu les fitxes de trampes de les vostres dimensions de la imatge i redimensioneu les imatges abans de penjar-les, mai no haureu de tornar a publicar errors d’imatge a escala.

1. Cerqueu imatges grans a GTmetrix

Executeu una pàgina mitjançant GTmetrix i visualitzeu els errors d’imatge de la mida del servei a la pestanya PageSpeed. Amplieu les seves recomanacions i veuràs les dimensions correctes a les quals s’hauran de redimensionar cada imatge. Tingueu en compte que GTmetrix només mostrarà errors a la pàgina que està provant.

Servir imatges a escala GTmetrix

Tu pots també comproveu manualment si les imatges estan escalades. Primer, feu clic amb el botó dret i copieu l’adreça de la imatge.

Copieu una adreça d’imatge

A continuació, enganxeu l’URL de la imatge en una pestanya nova del navegador. Si compareu la imatge que es mostra al vostre lloc web amb l’URL de la vostra imatge, veureu que hi ha una mida diferent perceptible. Això significa que cal reduir la imatge. Si compareu les dues variacions de la vostra imatge al costat de la vostra imatge, podeu veure la mida que té realment la imatge (i per què la pàgina a la qual es pot carregar és molt lenta).

Imatge escalada i sense escala

2. Redimensiona les imatges per corregir-ne les dimensions

Baixeu la imatge antiga i obriu-la a l’eina d’edició d’imatges que trieu (faig servir GIMP). Redimensiona i / o retalla la imatge a les dimensions recomanades per GTmetrix. Moltes eines d’edició d’imatges us permeten comprimir i eliminar Dades EXIF cosa que farà que la imatge es carregui encara més ràpid.

Escala d'imatge GIMP

També podeu retallar i redimensionar imatges directament a WordPress:

Escala d'imatges a l'editor de suports de WordPress

3. Substituïu la imatge antiga per la nova

Carregueu la nova imatge a WordPress i, a continuació, substituïu la imatge antiga per la nova.

Imatge de widget sense escala

Imatge de widget a escala

4. Torneu a provar la pàgina a GTmetrix

Torneu a provar la pàgina a GTmetrix i ja no hauríeu de publicar errors d’imatge a escala.

Servei 100% d’imatges a escala

5. Serviu imatges a escala mòbil

La publicació de imatges a escala és diferent al mòbil.

Si us registreu a un compte GTmetrix gratuït, podeu provar-lo velocitat del lloc web mòbil a Android. És probable que veureu més errors d’imatge a escala modificats si el vostre lloc no el fa servir imatges adaptatives, el que significa redimensionar automàticament les imatges per a dispositius mòbils (normalment es fa amb un complement).

Pas 1: Executeu el vostre lloc mitjançant la prova d’Android de GTmetrix:

Prova mòbil GTmetrix

Servir imatges a escala mòbil

Pas 2: Cerqueu les dimensions del fons per a mòbils proporcionades per GTmetrix:

Amplada màxima de fons

Pas 3: Instal·leu un complement amb Imatges adaptatives ShortPixel o Imatges adaptatives.

Imatges adaptatives de ShortPixel

Pas 4: Estableix les dimensions proporcionades per GTmetrix com a amplada màxima de fons.

Amplada màxima de fons

Pas 5: Executeu el vostre lloc mitjançant la prova mòbil de GTmetrix per assegurar-vos que no hi hagi errors.

Prova mòbil GTmetrix

Pas 5: Configureu altres paràmetres del vostre complement d’imatges adaptatives (ShortPixel inclou suport webP, imatges de càrrega mandroses, retallada intel·ligent i eliminació de dades EXIF). Aquests també poden ajudar.

6. Redimensiona les imatges a diverses pàgines

Si utilitzeu la mateixa imatge en diverses pàgines i cal reduir-la, podeu canviar la mida de la imatge, copiar-la en HTML i, a continuació, fer servir el connector Millor reemplaçar la cerca per arreglar-lo en diverses pàgines..

Pas 1: Instal·leu el Millor complement de substitució de cerques.

Pas 2: Copieu l’HTML de la imatge antiga i enganxeu-lo al camp “Buscar” al connector Millor substitució de cerca. Podeu utilitzar el botó Editor de text de WordPress per veure l’HTML de la imatge. Nota: Millor cerca de substitució només substituirà una imatge si conté el codi HTML que introduïu al connector.

Pas 3: Copieu l’HTML de la nova imatge i enganxeu-lo al camp “Reemplaça per”.

Servir una imatge a escala HTML

Pas 4: Seleccioneu les taules (per exemple, publicacions) que voleu escanejar i desmarqueu l’exploració en sec.

Pas 5: Feu clic a “Cerca / substitueix” i el complement substituirà la imatge antiga per una de nova.

7. Crear un full de trampes de les dimensions de la imatge

Com he esmentat anteriorment, haureu de mesurar les dimensions de totes les àrees del vostre lloc web per tal de canviar la mida de les imatges abans de penjar-les. Podeu trobar aquestes dimensions a GTmetrix (només si heu publicat errors d’imatge a escala) o també podeu trobar-les al full d’estils CSS del vostre tema..

Exemple:

  • Imatges lliscants: 1900 (p) x 400 (h)
  • Imatges del carrusel: 115 (w)
  • Imatges de widget: 414 (w)
  • Imatges de la publicació del bloc complet: 680 (w)
  • Imatges destacades: 250 (p) x 250 (h)
  • Imatge de Yoast Facebook OG: 1200 (p) x 628 (h) – pas 11
  • Imatge 10G de Twitter de Yoast 1024 (w) x 512 (h) – pas 11

Rectangle d'amplada de 680 píxels

L’amplada del meu bloc és de 680px, de manera que cada imatge en aquesta publicació s’ha redimensionat a 680px.

8. Complements de WordPress per servir imatges a escala

La majoria dels complements d’optimització d’imatges tenen l’opció de redimensionar les imatges, tot i que això no és molt efectiu quan s’intenta solucionar errors a GTmetrix, ja que diferents àrees del vostre lloc web demanaven dimensions diferents. Es tracta d’assegurar-se que les imatges no són absolutament enormes. Com diu el connector Imagify, l’amplada màxima no ha de ser inferior a la miniatura més gran.

Smush

Canviar la mida de les imatges Smush

Imaginar

Redimensiona les imatges Imagina

EWW Image Optimizer

Redimensiona les imatges EWWW

Altres optimitzacions d’imatges

Vaig escriure un tutorial complet sobre optimització d’imatges a WordPress que inclou:

  • Impressions compressives
  • Presentació d’imatges mitjançant un CDN
  • Redimensionant els GIFS
  • Eliminació de dades EXIF
  • Llastos carregant imatges + vídeos
  • Cloudflare Mirage, polonès, protecció d’enllaç directe

Optimitzacions d’imatge a GTmetrix

Cerqueu més tutorials de velocitat de WordPress?
Aquí teniu altres tutorials que vaig escriure:

  • Com configurar WP Rocket (el connector de caché que us recomano)
  • Cloudways vs. SiteGround (els dos millors amfitrions que recomano)
  • Com tinc puntuacions 100% GTmetrix (Guia de velocitat de WordPress)

També tinc un vídeo fantàstic sobre l’optimització de velocitat de WordPress:

Preguntes freqüents

&# x2705; Puc utilitzar un complement per servir imatges a escala?

No, diferents seccions del vostre lloc web truquen per obtenir diferents dimensions de la imatge. Heu de dimensionar les imatges perquè s’adaptin a aquestes dimensions úniques.

&# x2705; Quina és la manera més senzilla d’escalar una imatge?

Descarregueu la imatge, retallau-la o redimensiona-la en un programa com Photoshop o Gimp, i després substituïu la imatge antiga per una de nova.

&# x2705; Quines imatges hauria de començar a escalar primer?

Comença per escalar imatges que apareixen a diverses pàgines com el logotip, la barra lateral, les imatges, les imatges del peu de pàgina i altres.

&# x2705; On puc trobar les dimensions correctes d’una imatge?

GTmetrix us indica les dimensions correctes de cada imatge quan s’expandeix l’element a la pestanya PageSpeed.

&# x2705; Com optimitzo plenament una imatge?

Escala-la a les dimensions correctes, comprimeix-la i elimina les dades EXIF ​​mitjançant un programa d’imatges o un complement, i assegureu-vos que especifiqueu les dimensions de la imatge (definiu l’amplada i l’alçada de la imatge) a l’HTML.

Espero que trobeu útil aquest tutorial! Si encara heu publicat errors d’imatge a escala al vostre lloc de WordPress, deixeu-me un comentari amb la vostra pregunta i us ajudaré de totes maneres.

Salutacions,
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