Com optimitzar les imatges a WordPress (tant per velocitat com per SEO)

Quan es tracta d’optimització d’imatges, probablement heu sentit prou coses sobre text alt.


De fet, hi ha 20 maneres diferents d’optimitzar imatges (si s’inclouen tant SEO com optimització de velocitat). Aquests us proporcionaran millors puntuacions a GTmetrix / Pingdom, podreu situar-vos en una cerca més alta i fer que el vostre contingut es carregui molt més ràpid. He aconseguit un informe 100% GTmetrix amb 0,5 vegades de càrrega … l’optimització de les meves imatges a WordPress era una gran part.

Optimitza les imatges ABANS de penjar-les – Utilitzar un programa com Photoshop per optimitzar les imatges abans de pujar-les pot estalviar molta feina. Podeu canviar la mida, comprimir, treure dades EXIF, desar en un format correcte (p. Ex. PNG / JPEG) i escriure un nom descriptiu del fitxer (que s’utilitzarà automàticament com a text alt si s’utilitza el Complement Atributs d’Imatges Automàtics). Són 6 optimitzacions!

Si necessiteu imatges d’alta resolució (per exemple, un lloc web de fotografia), és possible que no vulgueu redimensionar-les i comprimir-les (passos 3 i 8), ja que poden reduir la qualitat, fins i tot si es tracta d’una petita quantitat.

Eines principals que utilitzo – Jo utilitzo GIMP per canviar la mida / comprimir les imatges (l’editor d’imatges que heu escollit), Coet WP per al meu complement de memòria cau, Imaginar per obtenir més compressió sense pèrdues i eliminar dades EXIF, totes dues Flama de núvols i StackPath CDN, Complement Atributs d’imatge automàtica ALT per utilitzar automàticament el nom del fitxer imatge com a text alt i Memòria cau òptima de Gravatar emmagatzemar en memòria cau Gravatars. jo utilitzo WP Review Pro com el meu complement de rics fragments, Millor substituir la cerca a les imatges d’actualització massiva (molt útils) i GTmetrix com la meva eina de proves de velocitat. Consulteu la llista completa d’eines.

1. Cerqueu imatges no optimitzades

Executeu el vostre lloc GTmetrix i veureu aquests elements a les pestanyes Velocitat de pàgina / YSlow. Els primers cinc solen ser específics per a la pàgina, és a dir, GTmetrix només mostrarà les imatges no optimitzades per a la pàgina que prova. Els tres últims solen aparèixer a tot el vostre lloc. Per descomptat, només hi ha set maneres d’optimitzar les imatges, però algunes de les més importants, per la qual cosa ho farem primer.

  • Serviu imatges a escala: redimensiona les imatges grans a les dimensions correctes (pas 2)
  • Especifiqueu les dimensions de la imatge: especifiqueu una amplada / alçada en HTML o CSS de la imatge (pas 3)
  • Optimitzar les imatges – comprimir imatges sense pèrdues (pas 4)
  • Combinant imatges mitjançant sprites CSS – combinar diverses imatges en 1 imatge (pas 5)
  • Eviteu les redireccions d’URL – no publiqueu imatges de la versió www o http (s) incorrectes (pas 6)
  • Utilitzeu una xarxa d’entrega de contingut – servir imatges / fitxers d’un CDN (pas 7)
  • Aprofita la memòria cau del navegador – imatges / fitxers de memòria cau utilitzant el complement de memòria cau (pas 8)
  • Feu un favicon petit i caché – Utilitzeu un favicon 16x16px i introduïu-lo en memòria cau (pas 9)

Optimitzacions d’imatge a GTmetrix

Comença per arreglar imatges que apareixen en diverses pàgines: imatges, logotip, barra lateral / peu de pàgina, etc. Comenceu també amb imatges a escala inclosa, ja que potser heu de canviar la mida i tornar a carregar-les amb noves dimensions..

2. Serviu imatges a escala

Si veus serveix imatges a escala errors a GTmetrix, vol dir que teniu imatges sobredimensionades i que cal canviar-les a les dimensions correctes (que us proporciona GTmetrix). Mentre seguiu el full de trampes de les vostres dimensions de la imatge (vegeu més avall), no hauríeu de veure aquests errors. Però si ja heu carregat imatges sobredimensionades, haureu de redimensionar-les manualment o utilitzar un complement.

Imatges de mida a mida

Redimensiona les imatges a granel mitjançant un complement – el problema amb això és que les imatges diferents demanen diferents dimensions (widgets, lliscants, imatges d’amplada completa). Si bé la majoria dels complements d’optimització d’imatges tenen l’opció de canviar-ne les imatges a una solter un conjunt específic de dimensions, hauríeu de retallar-les / redimensionar-les abans de penjar-les. Si canvieu el format de mida de les imatges mitjançant un complement, conserveu les còpies de seguretat de les imatges originals (i en provau només algunes) si no esteu satisfets amb els resultats.

Redimensiona la mida de les imatges grans

Redimensiona les imatges manualment – obteniu les dimensions correctes de GTmetrix i redimensioneu-les o reutilitzeu-les. Recordeu-ho, GTmetrix només mostra imatges no optimitzades per a la pàgina que prova.

Creeu un full d’informació de les dimensions de la imatge del vostre lloc web
Els vostres botons lliscants, la barra lateral del bloc, les imatges destacades i el cos del contingut del bloc, demanen dimensions específiques a les imatges. Creeu un full de trampes perquè pugueu canviar-vos el format abans de penjar-los a WordPress. Això és especialment útil si teniu moltes àrees del vostre lloc web que requereixen mides d’imatges diferents i si teniu diversos dissenyadors / editors.

Exemple:

  • Imatges lliscants: 1900 (p) x 400 (h)
  • Imatges del carrusel: 115 (h)
  • 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

3. Especifiqueu Dimensions de la imatge

Això significa afegir una amplada / alçada a l’HTML o al CSS de la imatge. L’editor de Visual ho fa per vosaltres (però, per exemple, ginys, alguns constructors de pàgines i HTML personalitzat no). Prova unes quantes pàgines a GTmetrix.

GTmetrix us indica les dimensions de la imatge …

Dimensions de la imatge Especificació GTmetrix

Afegiu l’amplada / l’alçada al codi HTML de la imatge …

Especifiqueu les mides

4. Comprimir Imatges sense pèrdues

Es tracta d’elements d’optimització d’imatges de GTmetrix. Molts programes (per exemple, Photoshop i Gimp) tenen l’opció de comprimir-se quan s’exporten. Tot i que aquest és un bon començament, els plugins de compressió d’imatges solen obtenir resultats encara millors. prefereixo Imaginar, Cracòvia, ShortPixel, o Smush. Es coneix que altres plugins redueixen visualment la qualitat de la imatge i poden causar errors a les imatges.

Compressió d’imatges amb imaginació

  1. Inscriu-te Imaginar
  2. Instal·leu el Imagina el complement
  3. Se us demanarà les instruccions següents:
  4. Introduïu la vostra clau d’API des del vostre compte d’imagify
  5. Definiu el nivell de compressió (normal, agressiu, ultra)
  6. Totes les imatges (imatge a sota) optimitzen de forma massiva totes les imatges del vostre lloc
  7. Un cop hàgiu arribat al límit, pagueu 4,99 dòlars o espereu el mes que ve per restablir el límit

imagina

Prova com es veuen les imatges amb diferents nivells de compressió …

Imaginar la comparació de compressió

Un cop registrats, optimitzeu de manera massiva totes les imatges del vostre lloc …

imagify-wordpress-image-optimization

Definiu l’opció per optimitzar les imatges a la càrrega …

Imaginar Optimitzar les imatges a la càrrega

5. Combina imatges en CSS Sprites

A la pàgina principal, podeu pensar que veieu 21 icones, però en realitat són una sola imatge. Això és un Sprite CSS, on combines diverses imatges en 1 sola imatge. D’aquesta manera es redueix el nombre d’imatges (i peticions), és per això que la meva pàgina web només té 10 sol·licituds. En lloc de carregar 21 imatges, carrega 1. Necessitareu coneixements CSS per fer-ho, o bé utilitzeu una Generador de sprite CSS.

CSS Sprites

GTmetrix CSS Sprites

Utilitzeu només sprits CSS per a imatges decoratives – perdeu moltes etiquetes alt d’imatges quan combines 21 imatges en 1. NO combini imatges importants amb sprites CSS si descriuen el contingut. Pel que fa a mi, la velocitat de la pàgina principal és més important que la del SEO … Jo faig servir l’informe GTmetrix de la meva pàgina web en molts llocs (així que he de mantenir-lo net) i la meva pàgina principal, creieu-la o no, no té per objectiu paraula clau. El meu propòsit és descriure els meus tutorials … i carregar-se ràpidament.

6. Eviteu les redireccions a URL d’imatge

Si heu canviat a versions HTTPS, www o heu començat a publicar imatges des d’un CDN, heu d’actualitzar a granel totes les imatges (i els enllaços) mitjançant Millor substituir la cerca així estan servint la versió correcta. En cas contrari, podreu veure minimitzar les redireccions o utilitzar dominis sense galetes errors.

Minimitzar les redireccions

Dominis lliures de galetes

Utilitzeu el connector Better Search Replace per actualitzar a granel les URL de la imatge …

Millor cerca Substitueix les versions WWW

Millor cerca Substitueix HTTP vs HTTPS

7. Serviu imatges d’un CDN

Això requereix canviar els URL de la imatge per incloure-hi el vostre URL del CDN

  • URL de la imatge antiga (sense CDN): Https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • URL de la imatge nova (amb CDN): Https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare vs. StackPath – Jo faig servir tots dos Flama de núvols i StackPath ja que més centres de dades = lliurament de contingut més ràpid. Cloudflare té 200 + centres de dades, StackPath té 34 + centres de dades que es troben als Estats Units (és a on provenen la majoria dels meus visitants). Cloudflare no t’assigna un URL de CDN de manera que utilitzarem el CDN de StackPath per servir imatges.

StackPath-Data-Centers

Pas 1: Trieu un CDN. jo utilitzo StackPath (tenen una prova de 30 dies).

Pas 2: Al tauler, feu clic a la pestanya CDN i, a continuació, crear un lloc CDN StackPath

StackPath-CDN-Tab

StackPath-CDN-Domain

CDN-URL-StackPath

Pas 3: Copieu l’URL de CDN i enganxeu-lo al connector de la memòria cau (a continuació es troba per a WP Rocket) …

WP-Rocket-CDN

Pas 4: Substituïu els URL de la imatge per incloure-hi l’URL CDN (mitjançant Millor substituir la cerca).

Millor cerca Substitueix l'URL de CDN

Pas 5: Comproveu si hi ha URL d’imatges antigues mitjançant DevTools Chrome. De vegades, el vostre complement de memòria cau o Activador CDN s’ocuparà d’això, tret dels enllaços de CSS i JavaScript, que tenen un codi dur. Els enllaços que queden enrere, normalment són Fitxers (com ara CSS o Javascript) que necessiten revisar i substituir manualment. Chrome DevTools us mostra tots els dominis que s’utilitzen actualment.

Pas 6: Executeu el vostre lloc GTmetrix i la “xarxa de lliurament de contingut” hauria de ser verda a YSlow. Tampoc hauria de tenir cap error en “minimitzar les redireccions” ni en “utilitzar dominis sense galetes”.

CDN GTmetrix YSlow

8. Imatges del cau

La majoria dels plugins de memòria cau tenen una opció per a Memòria cau del navegador, que emmagatzema imatges. Faig servir WP Rocket que es va classificar amb el complement de memòria cau número 1 a diverses enquestes de Facebook i tinc un tutorial per això. Rendiment ràpid Generalment es classifica amb el complement de memòria cau número 1 (també tinc un tutorial per a això).

Memòria cau del navegador

9. Feu Favicon petit i emmagatzemable

Assegureu-vos que el favicon sigui 16x16px, sigui el format favicon.ico i que quedi en memòria cau mitjançant el vostre complement de memòria cau.

10. Elimineu les dades EXIF

Dades Exif conté informació com ara l’obertura, la velocitat de l’obturador, la ISO, la distància focal, el model de càmera, la data en què es va fer la foto i molt més. No necessiteu això per a imatges del vostre lloc web. El VA extreure el complement Exif elimina les dades Exif automàticament un cop les imatges es pengen.

La majoria dels complements d’optimització d’imatges (inclosos Imagify, ShortPixel, Kraken, EWWW i Smush) tenen l’opció d’eliminar les dades EXIF ​​automàticament. Aquí està la configuració per a Imagify …

Imagina Eliminar dades EXIF

11. Optimització d’imatges de núvols incloents

Cloudflare també ofereix algunes maneres d’optimitzar les imatges. Mirage i polonès es troben a la seva Configuració de la velocitat dels flocs de núvol mentre que la protecció d’enllaç directe es troba a la vostra Rastreja la configuració del blindatge.

Mirage Cloudflare (Funció Pro): redueix les sol·licituds d’imatges, carrega imatges mandroses i millora els temps de càrrega d’imatges en dispositius mòbils amb connexions de xarxa lentes. Aquí hi ha més detalls …

  • Redimensiona les imatges en funció del dispositiu / connexió d’un visitant. Un visitant amb una connexió deficient obtindrà una versió més petita (resolució inferior) fins que torni a tenir un ample de banda més gran.
  • Redueix la quantitat de sol·licituds. En lloc d’enviar diverses sol·licituds per a totes les imatges del lloc web, Mirage incorpora aquesta sol·licitud per tal que els visitants puguin veure les imatges immediatament.
  • Còrdiques imatges (només es carreguen un cop els usuaris es desplacen cap avall i realment veuen la imatge).

Mirage d'imatge Cloudflare

Flama de núvols (Funció Pro): tira dades EXIF ​​i comprimeix imatges.

Image Cloudflare Polonès

Protecció d’enllaç directe de núvols incloents – impedeix que les persones puguin copiar les imatges i enganxar-les al seu propi lloc web, que (ja que encara allotgeu aquesta imatge) aspiraran l’amplada de banda.

Protecció d’enllaç directe de núvols incloents

12. Imatges de càrrega deixadesa

Això retarda la càrrega d’imatges fins que els usuaris es desplacin cap avall per la pàgina i vegin visiblement la imatge. Tot i que millora els temps de càrrega inicials, carregar constantment imatges mentre es desplaça pot ser molt molest. Personalment, només carreguen vídeos ganduls, ja que es triguen molt a carregar-se que a imatges.

Podeu utilitzar el botó Complement de càrrega rendible, Plugin de càrrega per a vídeos, o utilitzeu WP Rocket …

WP-Coet-Lazy-Load

13. Desa el format correcte

PNG vs. JPEG – PNG no està comprimit (mida de fitxer més gran) i s’ha d’utilitzar en imatges senzilles sense molts colors. JPEG és un format comprimit (de mida més petita del fitxer) que redueix lleugerament la qualitat de la imatge, però és de mida més reduïda i s’utilitza en imatges amb molts colors. GIMP i altres programes d’edició d’imatges haurien d’utilitzar el format correcte automàticament, però encara és bo saber-ho.

jpg_vs_png

Il·lustració de Labnol

14. Noms del fitxer d’imatges

Els motors de cerca utilitzen noms de fitxers de text alt i imatge, de manera que poseu el nom dels fitxers abans de penjar-los a WordPress. Si utilitzeu un complement això afegeix automàticament text alt en funció del nom del fitxer, anomenar els fitxers és tot el que heu de fer. No ompliu paraules clau, només descriviu la imatge.

Etiqueta Noms del fitxer d’imatge

15. Alt Text

Han de ser els mateixos que el nom del fitxer d’imatge. Podeu utilitzar el botó Complement Atributs d’Imatges Automàtics per utilitzar automàticament el nom del fitxer com a text alt. Mentre utilitzeu imatges rellevants, algunes d’elles haurien d’incloure (bits) de la vostra paraula clau … no hi ha cap motiu per afegir paraules clau a les imatges, cosa que suposa un risc pena de farciment de paraules clau.

Afegeix automàticament text alt a les imatges – utilitzar el Complement Atributs d’Imatges Automàtics. Ara, quan afegiu una imatge, el complement afegirà un text alt que és el mateix que el nom del fitxer …

alt ="WP-Fastest-Cache-Plugin" amplada ="577" alçada ="247" />

Trobeu un text Alt Alt – Screaming Frog és una eina gratuïta que us mostra totes les imatges que falten text alt.

  • descarregar Screaming Frog SEO Spider
  • Accediu al vostre lloc web i feu clic a “Inici” per rastrejar-lo
  • Feu clic a la pestanya Imatges
  • Vés a Visió general → Falta el text Alt (mirar abaix)
  • Localitzeu aquestes imatges al vostre lloc i afegiu un text diferent

Falta la imatge Alt Text: la granota cridant

16. Obrir gràfic (Facebook + Twitter)

Això fa que el format de contingut sigui correcte quan es comparteix a Facebook / Twitter, concretament la vostra imatge ja que ambdues xarxes utilitzen dimensions personalitzades per mostrar-lo, en cas contrari, quedarà divertit.

facebook-compartir

Si feu servir Yoast, aneu a la configuració “Social” i activeu Open Graph per a Facebook / Twitter …

Yoast-Social-Meta-Data

Ara editeu una pàgina / publicació i, a continuació, feu clic a l’enllaç “compartir” de Yoast i podreu veure les opcions per penjar imatges personalitzades per a Facebook (1200 amplada x 628 d’alçada) i Twitter (1024 d’amplada x 512 d’alçada)..

optimització yoast-social-media

17. Imatges dels fragments destacats

Fragments destacats es quan Google mostra fragments del contingut a la part superior dels resultats de la cerca i pot (però no està garantit) incloure una imatge. Google els traurà de qualsevol resultat de la primera pàgina, Tanmateix, depèn d’ells si fins i tot mostraran un fragment o una imatge destacats. Això també fa que el seu fragment es mostri dues vegades i són una manera increïble d’obtenir molt trànsit.

3 Tipus de fragments destacats

  • Respostes
  • Taules
  • Llistes

Fragments d'imatge destacats

Com obtenir fragments destacats a Google

  • Dirigiu-vos a una paraula clau on vulgueu la gent concisa contesta
  • Utilitzeu Explorador de paraules clau de Moz per identificar les paraules clau de la pregunta
  • Utilitzeu Respon al públic per trobar encara més paraules clau de preguntes
  • Trieu si la resposta ha de ser un paràgraf, una llista o una taula
  • Dissenyeu un bon gràfic (o feu una foto) descrivint la paraula clau
  • Utilitzeu una longitud de caràcters òptima Moz)
  • Creeu contingut basat en fets amb referències de qualitat (enllaços, gràfics, etc.)
  • Orientar les paraules clau que ja tenen un fragment destacat però que fan un treball deficient
  • Si teniu l’objectiu del quadre de resposta, orienteu la vostra paraula clau mitjançant la concordança exacta
  • Assegureu-vos que a la primera pàgina de la paraula clau, si no, milloreu el contingut

Longitud optimitzada dels fragments

18. Dades estructurades

Podeu utilitzar imatges dades estructurades (i insígnies) per als tipus de contingut següents:

Fragment de vídeo enriquit

Fragments rics en receptes

Fragment de producte ric

Quin complement de fragments rics he d’utilitzar?
jo utilitzo WP Review Pro de MyThemeShop (aquí teniu una pàgina on la faig servir) que admet 14 tipus de dades, incloent receptes i ressenyes de productes. Jo solia utilitzar WP Rich Snippets, però el desenvolupador va abandonar el connector i no s’ha actualitzat durant 2 o més anys, i Complement de l’esquema All In One simplement és avorrit (no té opcions i no té estil). WP Review Pro és molt fàcil d’utilitzar.

19. Imatges d’estil

No us oblideu d’estilar les vostres imatges! Jo faig fronteres amb la majoria de les meves.

  • Títols d’imatge
  • Enllaços d’imatge
  • Vores de la imatge
  • Subtítols d’imatge

20. Redimensiona els GIF

Igual que redimensioneu les imatges a les dimensions correctes, també cal redimensionar els GIF (ús GIF GIF).

Canviar la mida del GIF …

Redimensionar els GIF

A continuació, comprimiu-lo …

Comprimeix els GIF

El resultat :-)

Optimitza el GIF del gos

21. Gravatars de caché

Si teniu publicacions amb molts comentaris, Gravatars pot arruïnar completament el vostre informe. Podeu desactivar-los, interrompre comentaris per mostrar només un nombre determinat de comentaris o provar un complement de memòria cau de Gravatar. És possible que hàgiu de fer una mica de prova ja que alguns complements no funcionen en alguns llocs web.

  • Gravatars de memòria cau (Ptim, El de Harry, o Memòria cau de FV Gravatar)
  • Desactiva els gravataires completament
  • Definiu el Gravatar per defecte en blanc
  • Suprimeix els comentaris que no tinguin valor afegit
  • Configureu el Gravatar per defecte a una imatge personalitzada del vostre servidor
  • Restringiu les imatges de Gravatar a dimensions més petites (per exemple, 32px)
  • Paginar comentaris a WP Desactivar per mostrar només 20 comentaris alhora
  • Si cap d’aquests funcionen, fes un cop d’ull Tutorial de Gravatars de la memòria cau de WP Rocket

Memòria cau-Gravatar-Imatges

22. Eviteu incrustar imatges de llocs web externs

Carregueu sempre imatges al vostre lloc web, no copieu-les ni enganxeu-les mai. En cas contrari, acabaràs amb sol·licituds addicionals, ja que la imatge no està allotjada al vostre servidor, de manera que ha de tirar-la des d’un altre lloc.

23. Eines d’optimització d’imatges

Eviteu l’ús de plugins amb una funcionalitat duplicada – Imagify, ShortPixel, Kraken, EWWW i Smush, bàsicament fan el mateix (compressió sense pèrdues, eliminació de dades EXIF, redimensionament de les imatges). WP Rocket té opcions per a la càrrega, la memòria cau i el CDN (la neteja de bases de dades + allotjament de Google Analytics localment), la qual cosa no tenen la majoria de plugins de caché, estalviant-vos d’utilitzar plugins addicionals.

Preguntes freqüents

&# x2705; Com solucioneu els resultats d’optimització d’errors d’imatge a GTmetrix?

En comprimir-les sense pèrdues mitjançant un complement com ShortPixel, Imagify o Smush. Utilitzo ShortPixel perquè sempre soluciona aquest error a GTmetrix.

&# x2705; Com es poden solucionar els errors d’imatge a escala de servei a GTmetrix?

Això significa que cal retallar / canviar la mida de les imatges a les dimensions correctes. Si les imatges són massa grans, GTmetrix mostrarà errors d’imatge a mida i us dirà les dimensions correctes a les quals s’hauran de redimensionar.

&# x2705; Com solucioneu Especifiqueu els errors de dimensió de la imatge a GTmetrix?

Consulteu l’HTML de la imatge i comproveu que tingueu una amplada i una altura especificades, tal com es mostra en aquest tutorial.

&# x2705; Qualsevol altra manera de fer que les imatges es carreguin més ràpidament?

Eliminació de dades EXIF ​​i l’ús d’un CDN per mostrar les vostres imatges farà la diferència més que fora de les recomanacions de GTmetrix.

&# x2705; Quina optimització d’imatge és la millor?

Utilitzo ShortPixel perquè hi ha una pèrdua de qualitat pràcticament nul·la i soluciona l’element Optimitzar les imatges de GTmetrix.

Què penses?
El vostre informe GTmetrix sembla una mica millor? Avisa’m als comentaris! I si voleu més consells que us obtinguin puntuacions / temps de càrrega encara millors, consulteu la meva guia completa de velocitat de WordPress.

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