Com fer que les imatges es carreguen més ràpid al vostre lloc de WordPress

04.06.2020
PARAULA 'Com fer que les imatges es carreguen més ràpid al vostre lloc de WordPress
0 11 мин.

Així doncs, voleu que les vostres imatges es carreguin més ràpidament?


Doncs no seré tonta. Anem a aprofundir en les coses bones!

Hi ha tres maneres de fer que les imatges es carreguin més ràpidament a WordPress:

  • Redimensionar
  • Comprimir
  • Càrrega pereç

En aquesta publicació explicaré com funciona cadascuna d’aquestes tècniques i per què faran que el vostre lloc es carregui més ràpidament. També us mostraré com implementar cada tàctica tant amb solucions manuals com amb recomanacions de complements.

Aquesta primera tècnica és extremadament senzilla, però sovint s’oblida dels novells de WordPress.

Com optimitzar les imatges a WordPress

Redimensiona les teves imatges

La manera més simple i absoluta de fer que les imatges es carreguin més ràpidament és redimensionar-les. Deixa’m explicar.

El que és redimensionar?

Quan dic “redimensionar” vull canviar les dimensions d’una imatge i, en aquest cas, voleu reduir les dimensions de les imatges massa grans.

Com a exemple, els bloggers a vegades fan fotografies als seus telèfons o càmeres digitals i les pengen als seus blocs. Les còpies no editades de les fotos podrien tenir una amplada de 5.000px. Penseu en això …

L’amplada de la secció de publicació al vostre lloc probablement no sigui superior a 800px. El text que esteu llegint ara mateix només abasta uns 700px a la pàgina, així que imagineu afegir una imatge de 5.000px d’ample aquí. Seria molt més gran del que necessita ser i, tot i que estaria reduït per ajustar-se a la pàgina, el fitxer d’imatges carregat continua sent massiu i extremadament malvat. I és perquè …

Les imatges que tenen dimensions més grans també tenen mides de fitxer més grans.

Quan es tracta de rendiment i de fer que les imatges es carreguin més ràpid, reduir les dimensions de la imatge és una manera excel·lent de reduir dràsticament la mida del fitxer i això fa que la imatge es carregui més ràpidament.

Tornem al meu exemple i suposem que la imatge té 5.000px d’amplada i alta. Si el reduïu des de 5.000px fins a només 700px, realment la imatge usaria un 99% menys de píxels. Dit d’una altra manera, la mida del fitxer disminuiria al voltant d’un 99%. Si la imatge fos 5mb, acabaria amb només 50kb i carregaria el 99% més ràpid al lloc.

Redimensiona les imatges

Si no vol dir que redimensioneu amb cura les vostres imatges, hi haurà una mica de guanys.

Hi ha algunes maneres de redimensionar les imatges per adaptar-se perfectament al lloc.

Redimensiona manualment les imatges

Abans de penjar una imatge nova al vostre lloc, redimensiona-la manualment mitjançant les eines d’edició d’imatges integrades al vostre ordinador.

Si teniu una imatge extremadament gran com en el meu exemple, immediatament farà una gran diferència. Després de redimensionar la imatge, podeu penjar-la a la vostra mediateca.

Encara que utilitzeu la imatge en una caixa de llum o un control lliscant, normalment, normalment no hi ha cap raó que sigui més gran de 2.000px. Si la imatge serà a una àrea de contingut d’una publicació o d’una pàgina, probablement us en vareu bé amb la imatge de 800px d’ample.

Aquest mètode de redimensionament d’imatges funciona bé, però no serveix per a les imatges ja penjades al vostre lloc. Una tècnica fàcil per a imatges existents és simplement triar una mida diferent.

Utilitzeu mides més petites

Quan pengeu una imatge a la vostra mediaoteca, WordPress crea fins a tres versions addicionals: Miniatura, Mitjana i Gran.

Si visiteu la pàgina de configuració de suports, veureu que podeu triar aquestes mides aquí:

Configuració de suports de WordPress

Tot i que podeu modificar la configuració, la mida predeterminada de grans dimensions és de 1024px, que és prou gran com per utilitzar-la per a publicacions sense ser massa desaprofitada. Podeu utilitzar aquesta mida per a totes les imatges que inclogueu a les publicacions.

Per canviar la mida d’una imatge que heu afegit a una publicació, feu clic a l’editor i veureu el menú desplegable Mida de la imatge a la barra lateral dreta.

Redimensiona la imatge de WordPress

Seleccioneu la mida “Gran” i actualitzeu la publicació. Si teniu imatges sobredimensionades, aquesta tècnica us permetrà servir ràpidament una mida més adequada que es carregui més ràpidament sense necessitat de tornar a carregar i substituir l’original..

Dit això, això pot ser tremendament tediós si teniu desenes de publicacions amb desenes d’imatges. Hi ha un mètode encara més ràpid i eficaç disponible.

Redimensionament automatitzat amb complement

En lloc de canviar la mida de les imatges, podeu deixar que un complement us ho faci automàticament. Quan es tracta d’un canvi de mida automatitzat d’imatges, res supera Optimol connectar.

Optimizer Image Optimizer

No funciona de la manera que espereu.

En lloc d’editar les imatges de la vostra mediaoteca, Optimole conserva les seves pròpies còpies de les teves imatges i les serveix des d’un CDN d’alt rendiment. D’aquesta manera, els vostres originals mai es modifiquen de cap manera.

A més, no heu de donar a Optimole una mida única per utilitzar-lo per a les vostres imatges. Més aviat, obté la mida de la pantalla del visitant i genera una versió de mida òptima de cada imatge al vol. Això significa que algú en un dispositiu mòbil pot carregar una versió de 400px d’una imatge mentre que un altre visitant d’un ordinador portàtil obté una versió de 700px d’aquesta mateixa imatge.

Aquest mètode de redimensionament és molt més fàcil d’implementar i més eficaç per a dispositius mòbils, especialment important perquè els visitants mòbils solen estar en connexions més lentes..

Si voleu aprendre a utilitzar Optimole, podeu seguir el meu vídeo complet:

Primer he recomanat redimensionar-lo perquè, si ho fas manualment o automàticament amb un complement, és senzill i pot oferir grans avantatges.

Si les vostres imatges ja tenen una mida adequada per al vostre lloc, podeu millorar el rendiment del vostre lloc molt més amb compressió.

Comprimeix les teves imatges

La compressió és una manera de reduir la mida del fitxer d’una imatge sense canviar-ne les dimensions.

Hi ha dos tipus de compressió d’imatges disponibles.

El primer tipus de compressió d’imatges es denomina compressió “sense pèrdues”.

Compressió sense pèrdues

Amb una optimització sense pèrdues, la imatge en si no es modifica. Més aviat, aquesta tècnica elimina totes les metadades emmagatzemades al fitxer d’imatges. Per exemple, les imatges sovint emmagatzemen el nom del dispositiu que es fa servir per prendre la imatge, la data en què es va fer la foto i, de vegades, fins i tot les coordenades GPS de la captura..

Com que aquestes dades solen ser força limitades, l’optimització sense pèrdues només pot reduir la mida de la imatge en un 1-5%, però realment no hi ha cap motiu per a no utilitzar-la perquè no té cap impacte en la qualitat de la imatge..

Els beneficis reals provenen d’optimització de pèrdues.

Compressió amb pèrdues

Com és de suposar, una compressió amb pèrdues optimitza la imatge i produeix una degradació de la qualitat. Però aquí està la cosa …

Els algorismes de compressió són tan bons en aquests dies que sovint podeu reduir la mida del fitxer de la imatge entre un 50 i un 70% sense cap diferència. A menys que siguis un fotògraf professional i necessiti que les teves imatges siguin perfectament nítides en monitors de 4k, ni tan sols notaràs la pèrdua de qualitat..

Com comprimir les imatges

Podeu comprimir manualment les imatges amb una eina com TinyPNG abans de penjar-les o utilitzeu un plugin per automatitzar les coses.

ShortPixel és un excel·lent complement per optimitzar les imatges del vostre lloc. Els podeu optimitzar de seguida quan els pengeu i optimitzar de forma massiva totes les imatges que ja hi ha a la vostra mediateca.

shortpixel

Vaig recomanar Optimole per redimensionar la imatge i també comprimeix les imatges de manera molt eficaç. Una vegada més, no optimitza els originals emmagatzemats a la vostra mediateca, sinó que comprimeix les còpies que serveix als vostres visitants..

Aquí podeu trobar alguns altres complements d’optimització d’imatges.

Amb les imatges redimensionades i comprimides, el lloc es carregarà molt més ràpidament, però hi ha una última optimització per a les imatges.

Implementa la càrrega mandrosa

La càrrega ràpida és una manera realment intel·ligent d’optimitzar encara més les vostres imatges.

Suposem que teniu una publicació al bloc amb 12 imatges. Quan algú visiti el vostre lloc, no totes les imatges seran visibles immediatament a la pantalla. Haureu de desplaçar-se cap avall perquè la majoria es mostrin. Llavors, per què carregueu els 12 immediatament?

Amb la càrrega mandrosa, només es carreguen les imatges que apareixen a la pantalla. En lloc de carregar-se 12 imatges, potser només es carreguen 2-3. A continuació, mentre el visitant es desplaça per la pàgina, les imatges restants es carreguen quan surten a la pantalla. Això vol dir que la càrrega inicial és molt més ràpida i, com que la majoria de visitants no es desplaçaran fins a la pàgina, no es carregaran moltes imatges, cosa que us estalvia recursos valuosos del servidor..

Aquest vídeo té una visualització que ho explica millor si voleu una imatge més clara de com funciona la càrrega mandrosa:

Ara que no heu venut el concepte, us mostrem com podeu implementar la càrrega pereçosa al vostre lloc.

Com utilitzar la càrrega mandrosa

Una vegada més, aquesta tècnica d’optimització de rendiment s’afegeix fàcilment a WordPress amb un complement.

Si cerqueu una opció gratuïta, proveu Optimole o a3 Càrrega pereçosa.

Amb Optimole, la càrrega mandrosa s’activa automàticament i el complement a3 és fàcil de configurar.

A més, si no us interessa pagar, feu una ullada Coet WP. Té caché d’alt rendiment i una varietat d’altres eines de velocitat.

Per activar la càrrega mandra amb WP Rocket, tot el que heu de fer és canviar aquest commutador:

WP Rocket Media

No podria ser més fàcil!

Gaudeix de la càrrega més ràpida d’imatges

Per resumir el que acabeu d’aprendre …

Les imatges de grans dimensions que es van penjar al vostre lloc són extremadament lentes. Una d’aquestes imatges només pot fer que el vostre lloc s’aturi.

El més important que podeu fer per accelerar les imatges és redimensionar les imatges massa grans perquè tinguin una mida adequada per al vostre lloc. Podeu fer-ho manualment o automatitzar-lo amb Optimole.

A continuació, els algorismes de compressió d’imatges han recorregut un llarg recorregut i, en aquests dies, podeu reduir el 50% al 70% de la mida del fitxer d’una imatge sense afectar la qualitat d’una manera notòria. Això no funciona. Utilitzeu ShortPixel o Optimole per comprimir totes les imatges del vostre lloc.

Finalment, la càrrega mandrosa és una manera fantàstica de carregar de manera selectiva les imatges. Podeu utilitzar Optimole, a3 Lazy Load o WP Rocket per implementar de forma instantània la càrrega mandrosa al vostre lloc.

Si no heu utilitzat cap d’aquestes tècniques, el vostre lloc es carregarà de manera espectacular més ràpidament un cop implementada. T’explotarà.

Tens alguna pregunta sobre els conceptes i tècniques d’aquest post? Tens un altre consell per compartir? Publicar a la secció de comentaris a continuació!

també et pot agradar,

Com arreglar un lloc de WordPress i un tauler d’administració lents (permanentment)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector