Com optimitzar les imatges per al vostre lloc web i fer-les funcionar a tots els dispositius (imatges sensibles per a mòbils, escriptoris i tauletes)

Per què molestar-se en optimitzar les imatges? Permeteu-me que us ho pregunti; quan va ser la darrera vegada que vas veure un lloc web sense imatges? "Mai" seria la resposta correcta. ��‍♂️ Les imatges són massa essencials. I tampoc no es tracta de la fotografia d’estoc que mereix un gran valor per anar al vostre costat "10 consells de màrqueting en línia" publicar Les imatges són útils per a múltiples propòsits. Penseu en dissenys, elements de disseny, logotips, imatges de perfil i, sí, imatges del bloc.


Francament, no podreu tenir un lloc web el 2020 sense haver-hi utilitzat almenys un bon grapat d’imatges. Dit això, les imatges no són tan senzilles per descobrir el propietari d’un lloc web. Fins i tot deixant de banda els reptes de quines imatges hem d’utilitzar i on, també hi ha problemes per mostrar aquestes imatges des d’un punt de vista purament tècnic:

  • Com es poden enviar imatges de resposta a diversos dispositius?
  • Com aconseguir que es vegin excel·lents en tots aquests dispositius?
  • I, el més important, com assegurar-se que es carreguen en un temps digne?

Aquestes són les preguntes que responem avui. Aquí teniu la vostra guia definitiva com optimitzar les imatges del vostre lloc web i fer-les veure excel·lents en tots els dispositius:

Com optimitzar les imatges per al vostre lloc web i fer que funcionin a tots els dispositius

�� Per què ens escolten?

Les imatges han estat un tema crític per a nosaltres darrerament i és a causa d’una de les eines més noves de la nostra família: Optimol.

Optimole és un servei d’optimització d’imatges fixat i oblidat & eina. Considerem que és la millor solució d’aquest tipus al web i ho podem demostrar. Però es tracta d’una altra vegada. De qualsevol manera, al llarg dels anys, hem après molt sobre com optimitzar les imatges correctament. Avui volem compartir alguns d’aquests coneixements amb vosaltres.

�� Per què haureu d’optimitzar les imatges del vostre lloc

Les imatges, a part de tenir una aparença excel·lent, també consumeixen una quantitat important d’espai de disc i d’ample de banda. Més concretament, les imatges representen des del 30% -85% de la mida d’una pàgina web estàndard.

prova de velocitat

És enorme, i no és com que sigui una opció la supressió d’imatges, de manera que el millor que podem fer és aprendre a optimitzar les imatges d’una manera que simplement ocupi menys espai en disc..

Els avantatges poden ser enormes i sobretot quan es tracta d’imatges repetides: imatges que s’han de carregar a cada pàgina web individual. Són coses com fons, elements de disseny, logotips, icones, etc. De vegades, l’optimització d’una sola imatge de fons pot reduir el 70% de la mida de la pàgina.+.

Vegeu aquest exemple:

comparació de mida de pàgina abans i després d’optimitzar les imatges

Però aguanta, empitjora! Si el rendiment general de les imatges no lluita, no hi ha prou, també hi ha el terreny mòbil ��, i presenta un conjunt de reptes completament nou:

En primer lloc, probablement no haureu de mostrar el mateix conjunt d’imatges als visitants d’escriptori i als mòbils. Els contextos són molt diferents: això inclou les mides de pantalla, l’orientació (generalment en retrat) i fins i tot la mentalitat de la persona que llegeix.

A més, les dades suggereixen que els dissenys de mòbils amb menys imatges solen funcionar millor quant a conversions.

En el cas de tenir-lo conjunt, hi ha un parell de coses que hem de tenir cura a l’hora d’entregar imatges de resposta a diversos dispositius:

  • primer, optimitzeu les imatges per a un dispositiu específic
  • assegureu-vos que les imatges es comprimeixin al nivell màxim acceptable per garantir els temps de càrrega més ràpids
  • mostra el nombre òptim d’imatges tenint en compte el dispositiu i la pantalla

��‍♂️ Com optimitzar les imatges i publicar-les a tot tipus de dispositiu

El fet d’aconseguir que les vostres imatges siguin processades de manera òptima i després lliurades al visitant al més ràpidament possible, n’hi ha diversos components. En aquesta guia, els passarem per tots:

�� Trieu el format correcte

Comencem per la pregunta antiga: PNG o JPG?

La majoria de la gent diu "JPG tot el temps!" Però realment no és correcte:

PNG vs JPG

Sí, la majoria de les vegades, o almenys en els escenaris més comuns per al que podríem necessitar imatges, els JPG ocupen menys espai de disc i, per tant, menys amplada de banda..

Però la paraula clau aquí és "els escenaris més habituals." De fet, si el que teniu és una imatge complexa amb molta coloració i transicions de colors (també, moltes "informació sobre color"), aleshores els JPG van a ser millors. Penseu en les fotos estàndard. Aquests funcionen millor com a JPG.

Tanmateix, si teniu una imatge una mica més senzilla, PNG guanyarà tot el temps.

Considereu l’exemple següent. Aquí hi ha quatre imatges:

imatge-1-aimatge 1-a: JPG

imatge-1-bimatge 1-b: PNG

imatge-2-aimatge 2-a: JPG

imatge-2-bimatge 2-b: PNG

  • La imatge 1-a és de 312 KB
  • la imatge 2-a és de 196 KB

Proveu d’endevinar les mides de les altres dues imatges …

La teva resposta:

Mal!

  • la imatge 1-b és de 1,3 MB (això probablement heu endevinat)
  • La imatge 2-b té 106 KB (espera, què ?!)

Com podeu veure, PNG guanya imatges senzilles de baix color.

Penseu en coses com a captures de pantalla de la interfície, il·lustracions senzilles, etc..

�� Lliçó # 1:

No sempre aneu a favor de JPG. Prediceu quina mida es basarà en la seva imatge i, a continuació, utilitzeu el tipus d’imatge correcte.

Ara per a una pregunta una mica més oportuna: SVG? WebP?

SVG i WebP

El SVG i el WebP són un tipus d’imatges una mica menys habituals al web, però són fantàstics sempre que els utilitzeu ja que s’han d’utilitzar. Permetin-me aclarir:

  • SVG és un format d’imatge vectorial basat en XML. El contingut de la imatge es pot definir en un fitxer XML senzill, el mateix fitxer XML que utilitzaríeu amb altres finalitats bàsiques de processament de dades. Això fa que SVG sigui un bon format, sempre que es tracti d’una imatge vectorial senzilla.
  • WebP és un format nou de Google. Es jura que el WebP és de 25-34% de mida menor que els JPEG comparables i un 26% més petit que els PNG comparables.

Quina és la captura? Podeu optimitzar les imatges convertint-les en SVG i webPs?

Primer, SVG. Bàsicament, utilitzeu SVG només si (a) es pot desar la imatge com a SVG de manera eficient i (b) si no us importa la gent que el prengui i el modifiqui.

Com he dit, SVG està basat en XML, el que significa que modificar gràfics SVG és realment fàcil de fer. Això no sempre és una cosa que vulgueu, especialment quan es tracta del logotip de la vostra marca o d’altres gràfics crucials.

En la majoria dels escenaris, els SVG no són un format que utilitzeu gaire sovint.

Ara, cap a WebP. El format és excel·lent i, en la majoria dels casos, efectivament s’estalvia una gran quantitat d’espai de disc tal i com es va prometre. Consulteu aquests dos exemples d’imatges:

Exemple d’imatge jpg

exemple d’imatge webp

  • la versió original de JPG és de 204 KB
  • el WebP és de 58 KB

El truc és que no tots els navegadors admeten WebP. De fet, és possible que ni tan sols vegeu la imatge webP que he utilitzat anteriorment. En el moment d’escriure, WebP funciona a Google Chrome, Firefox, Edge i Opera. Per descomptat, les versions anteriors no admeten el format.

El que això significa a la pràctica és que afegir una imatge WebP no és tan senzill com afegir un JPG o PNG.

Vull dir, tècnicament podeu utilitzar un tros de codi així:

… però si el navegador de l’usuari no admet el format, veurà la seva icona d’imatge trencada coneguda.

Per utilitzar el WebP eficaçment, haureu d’oferir imatges de retard. Per exemple:

Això significa molta més feina. Imagineu que heu de crear una etiqueta així cada vegada que vulgueu afegir una imatge WebP a una publicació o bloc de pàgines. Permet-me deixar-vos allà mateix, no, WordPress no admet WebP de forma nativa, per la qual cosa hauràs de fer-ho a mà.

Tot i així, us recomano fer aquesta complicada ruta de WebP manual sempre que es tracti d’imatges que apareixen en diverses pàgines del vostre lloc o imatges de mida enorme i necessiteu totes les eines per reduir aquesta mida d’alguna manera..

Podeu desar imatges com a WebP a Photoshop o utilitzar una eina com XnConvert (gratuït).

�� Lliçó 2:

No us molesteu en res utilitzar els SVG si voleu optimitzar ràpidament les imatges. El temps que perdreu creant-los no donarà els seus resultats (tot i que no dubteu en desaconseguir; aquí teniu un bon moment presa alternativa). Les PNG seran molt més ràpides d’utilitzar i no molt pitjor quant a consum d’espai de disc.

Utilitzeu WebP quan tracteu imatges que apareixen a diverses pàgines o imatges prou grans. Això és menys que es pugui gestionar el processament WebP automàticament, que es pot fer amb algunes eines addicionals. En aquest cas, utilitzeu WebP a tot arreu. Ja parlarem d’això en un segon.

��️ Comprimeix imatges

La compressió d’imatges és com la màgia. Deixa’m ensenyar-te:

Es tracta de la mateixa imatge JPG, només es guarda en un nivell diferent de compressió (sovint anomenat nivell de qualitat):

coon-100%100% de qualitat

coon-95%95% de qualitat

coon-85%85% de qualitat

coon-50%50% qualitat

Si us agrada la majoria de la gent, els tres primers us semblen. El quart comença a mirar "una mica pitjor." (Feu clic amb el botó dret i "Obre la imatge a la pestanya nova")

Aquí teniu la quantitat d’espai del disc que cadascuna d’aquestes imatges té:

  • 100% qualitat: 969 KB
  • 95%: 439 KB
  • 85%: 186 KB
  • 50%: 102 KB

Enorme, no ?! Podeu passar d’1 MB a ~ 500 KB sense pèrdues notables en la qualitat, només canviant la compressió del 100% al 95%.

Aquesta compressió JPG es pot manejar bastant automàticament mitjançant diverses eines, la qual cosa és una gran notícia. Tanmateix, no totes les imatges es creen igual, de manera que de vegades es poden obtenir imatges que semblin bé al costat d’imatges de mal aspecte, tot i que han estat experimentades pel mateix procés de compressió.

En general, podeu fer un salt aquí i reduir força la qualitat dels vostres JPG. La veritat és que els visitants del vostre lloc no es preocupen per totes les imatges nítides a tot arreu.

D’acord, hauria d’aclarir; sí, quan vulgueu mostrar-los alguna cosa, com ara una imatge clau per a un contingut, com ara imatges de productes, fotografies de les habitacions de l’hotel, aleshores no deixeu de ser nítides..

Però en altres zones, podeu estar una mica més relaxat. Per exemple, els fons no han de ser 100% nítids. En general, totes les imatges amb les quals el visitant no hi treballa directament poden tenir una qualitat inferior.

Dues de les meves eines preferides que us poden ajudar aquí són:

ImageOptim per a la compressió d’escriptori a Mac. Només podeu agafar una imatge des de l’escriptori, arrossegar-la i deixar-la anar a ImageOptim i, a continuació, l’eina fa la seva màgia i sobreescriu la imatge d’origen quan s’acabi.

Aleshores, podeu obtenir aquesta imatge i pujar-la al vostre lloc amb normalitat.

ImageOptim: una gran eina per optimitzar les imatges a l'escriptori

La segona eina és Optimol. Aquesta eina defineix pràcticament com es fa la manipulació d’imatges als llocs web. Amb aquesta finalitat, diguem-ne que és realment efectiu quan voleu optimitzar les imatges que es troben a la vostra mediateca.

optimole: una gran eina per optimitzar les imatges al núvol

Ara als PNG. Igual que els JPG, també es poden comprimir PNG. Però aquesta vegada, no hi ha cap desavantatge en termes de pèrdua de qualitat. Els PNG es poden comprimir eficaçment mitjançant algorismes sense pèrdues.

En altres paraules, sempre comprimiu els vostres PNG!

Consulteu aquestes tres imatges:

kwf-1
kwf-2

kwf-3

Semblen el mateix, però realment adopten:

  • 346 KB
  • 215 KB
  • 100 KB

Proveu d’endevinar quin és.

Tres eines per comprimir les imatges i fer-les més petites:

  • ImageOptim de nou. Però aquest porta molt de temps amb PNG, de manera que si teniu molts d’elaborar-los, potser voldreu fer-vos una tassa de cafè mentre l’eina funciona.
  • ImageAlpha. Molt més ràpid que ImageOptim. És la meva solució exclusiva per a ordinadors PNG.
  • Optimol. No és sorprenent, Optimole també gestiona la compressió PNG. Tot succeeix en un pilot automàtic.

�� Lliçó 3:

Comprimeu els vostres JPG per assolir un nivell acceptable de qualitat davant d’espai en disc.

Comprimeu sempre els vostres PNG.

�� Serviu imatges de les dimensions correctes

Aquest és potser l’aspecte més crucial del conjunt "imatges sensibles" enigma. Com sabem, hi ha desenes si no centenars de mides de pantalla diferents, i d’alguna manera hem d’assegurar-nos que les nostres imatges es veuran excel·lents en totes elles..

La solució fàcil? Serviu una imatge gran … sempre es pot reduir, oi? Bé, tècnicament és correcte, però a la pràctica, això malgastarà una gran amplada de banda i farà que el vostre lloc es carregui molt lentament a la majoria de dispositius.

Una millor solució és escalar totes les imatges a les mides correctes preferibles pels dispositius més habituals i servir-les en conseqüència.

Com és d’esperar, necessitareu diferents versions de la mateixa imatge per aconseguir-ho.

Una de les maneres de fer-ho és començar per l’amplada de la base del disseny i la mida d’imatge més gran que es pot fer servir i, a continuació, reduir-hi cap baix per a alguns dispositius i punts d’interrupció comuns..

Per exemple, la majoria de llocs web no superen la marca de 1100 px per l’amplada del bloc de contingut, de manera que podeu suposar que la imatge màxima que es pot mostrar en aquest cas també és de 1100 px d’amplada..

Aleshores, podeu crear punts d’interrupció de 800 px i 550 px (valors comuns) per a cobrir escenaris de tauletes i mòbils. Tot i que això no us donarà resultats 100% perfectes a tots els dispositius, almenys optimitzeu fins a un punt raonable i manteniu les vostres imatges sota control.

Amb això darrere, ara haureu de crear un bon grapat de versions diferents de cada imatge que voleu utilitzar al vostre lloc.

Aquí teniu un exemple de com gestionar el codi de visualització real:

La màgia de l’atribut srcset és que el navegador mira què hi ha i, a continuació, tria la millor imatge en funció del dispositiu que s’utilitza.

Una altra personalització que podeu veure més amunt és l’atribut de mides. Aquest explica al navegador com s’ha de comportar la imatge en determinades pantalles. En aquest cas, la imatge serà de 1100 px quan es visualitzi a les visualitzacions superiors a 1100 px, mentre que en dispositius més petits, es portarà tota la visualització.

Aquest tipus de solucions assegura que la imatge no agafi cap pantalla 4K sencera de 3840px. Tanmateix, encara ocuparà tota la pantalla quan es visualitzi al mòbil.

Aquest ús efectiu de l’atribut de mides és la manera de respondre a les imatges de veritat.

Trick Truc professional: cerqueu imatges que siguin un 10% més reduïdes de les que calgui i, a continuació, deixeu que el navegador les faci escala. D’aquesta manera, estalviareu una mica d’espai i amplada de banda. Per exemple, si necessiteu una imatge que sigui de 500 × 500 px, podeu escalar la vostra imatge a 450 × 450 px i, a continuació, deixar que el navegador la faci escala fins a 500. Això depèn de la imatge, però en la majoria dels casos, de l’usuari. no ho adonareu.

�� Lliçó # 4:

Utilitzeu les mides d’imatge correctes per al vostre disseny.

Creeu punts d’interrupció.

Creeu diverses versions d’una mateixa imatge per cobrir els punts d’interrupció.

Utilitzeu els atributs srcset i mides quan mostreu les imatges.

�� Optimitza les imatges per a les pantalles Retina i HiDPI

L’altre extrem de l’espectre de la dimensió de la imatge es tracta d’imatges compatibles amb HiDPI.

La història és que les pantalles d’escriptori són cada cop més grans i que els seus píxels es fan cada vegada més densos. En aquests dies no és estrany tenir una 4K pantalla inclosa en un ordinador portàtil de 15 polzades. La resolució 4K és de 3840 × 2160 px, de manera que cadascun d’aquests píxels ha de ser realment minúscul.

Això crea problemes per als llocs web. Bàsicament, si el vostre lloc es definís com a 1100 px d’ample, en condicions normals, només ocuparia aproximadament el 25% de la propietat immobiliària de pantalla 4K. Això no és òptim. Per sort, les coses no funcionen així.

Per evitar el problema, les pantalles d’alta resolució actuen com si fossin la meitat de la mida (em faig una simplificació, però escolta’m). De manera que, en lloc que el vostre lloc web de 1100 px d’ample ocupi una petita porció d’una pantalla HiDPI, s’amplia fins a doblar, ocupant 2200 px i omplint molt millor la pantalla..

Aquest procés permet que les pantalles siguin cada vegada més nítides i agudes sense fer que tot sembli minúscul en aquest procés.

Tanmateix, aquesta pràctica no està exempta de falles. Principalment, les teves imatges tenen un gran èxit. El text és fàcil per escalar-lo sense perdre la qualitat. Les fonts són immunes a escala. Les imatges no ho són. Com a resultat directe, totes les imatges que no estiguin preparades per a les pantalles HiDPI es veuran difuminades!

Per solucionar-ho, heu d’entregar imatges escalades per a cadascuna de les relacions de zoom. Aquí hi ha un codi senzill:

(Si el navegador no admet el srcset, s’utilitzarà el src estàndard.)

Ara, quan dic "imatges a escala," Realment vull dir que hauríeu de començar des de l’altre extrem. Comenceu amb una imatge enorme (etiqueta-la 3x), després escalau-la i reduïu-la (fins a 2x), i finalment feu-la 1x i feu-la servir com a imatge predeterminada.

�� Lliçó 5:

Assegureu-vos que els vostres logotips, les imatges de marca i totes les imatges que s’utilitzin a les vostres publicacions i pàgines estiguin preparades per a les pantalles HiDPI.

⌛ Diferir la càrrega d’imatges

Això és simple en principi; totes les imatges situades a sobre del plec haurien de carregar-se immediatament (a la càrrega de la pàgina). Tota la resta es pot diferir per més endavant, i fins i tot "carregat de mandrós."

La càrrega molt desitjada és la càrrega d’imatges sota demanda. És a dir, les imatges es carreguen només una fracció de segon abans que l’usuari les necessiti, no més aviat, ni més tard. I això "no més aviat, ni més tard" aquí és clau la part.

En un escenari ideal, la imatge s’hauria de carregar just abans que es desplaci a la finestra. Això vol dir que l’usuari no hauria de veure cap marcador de posició abans que aparegui la imatge. Si això succeeix, podrien desplaçar-se i passar la imatge sense que es pogués carregar a temps, no és una manera ideal d’optimitzar les imatges.

Dit això, la càrrega mandrosa és fàcil de fer als llocs de WordPress. Podeu carregar mandrosos amb JavaScript / jQuery i, fins i tot, podeu escriure el codi per si mateix. També podeu obtenir un complement com a3 Càrrega pereçosa, o podeu utilitzar Optimol, que inclou un mòdul de càrrega mandrós.

�� Lliçó 6:

Imatges de càrrega deixadesa que es troben a sota del plec.

Iver Entregueu imatges mitjançant un CDN

Una xarxa de lliurament de contingut és com un codi de trampes per a la velocitat del lloc. T’està enganyant perquè no fa que el vostre lloc sigui més ràpid, ja que estigueu dient a algú que porti la càrrega i que lliuri les dades del lloc al visitant..

�� Hem parlat de CDN més a fons aquí, comproveu-ho.

El TL; DR és que els CDN aprofiten una xarxa de servidors que tots contenen una còpia del seu lloc i després la lliuren al visitant des de la ubicació més propera. Això sempre serà més ràpid que entregar-lo des del vostre servidor principal.

Els CDN d’imatge funcionen gairebé igual, però només es dediquen a les imatges, ho heu imaginat.

La majoria de les vegades, l’operació és perfecta des del vostre punt de vista. Totes les imatges del vostre lloc es reemplacen per les seves versions allotjades per CDN (el que significa que els URL de la imatge canvien).

  • Jetpack té una imatge popular CDN integrada. Podeu utilitzar-la de forma gratuïta, la qual cosa és excel·lent. La limitació principal és que només funciona amb les imatges de les publicacions, de les pàgines i de les imatges destacades. No serveix per a cap imatge que formi el vostre disseny (parts del tema, maquetació, etc.). Aquestes són les imatges que realment podrien utilitzar algun CDN-ing.
  • Optimol té un CDN integrat com a part de la funció principal d’optimització d’imatges. Aquesta no es limita només a les vostres publicacions i pàgines.

�� Lliçó # 7:

Connecteu el lloc a un CDN d’imatge (Jetpack o Optimole) o a un CDN general (MaxCDN / StackPath).

�� Serviu imatges més petites als usuaris en connexions lentes

No només importa la mida de la pantalla a l’hora de decidir quin tipus d’imatge ha de veure l’usuari. Probablement, encara més important, si es troben en una connexió a Internet lenta, realment no voldrien esperar 10 segons perquè es carregui una imatge..

En aquests escenaris, és molt millor millorar la qualitat de les imatges a canvi de temps de càrrega. Els usuaris amb connexions més lentes apreciaran que poden veure les imatges.

Podeu fer-ho possible mitjançant l’API d’informació de xarxa. Aquí teniu un tutorial fantàstic sobre com funciona si voleu implementar-lo manualment.

Si preferiu gestionar-lo amb pilotes automàtiques, de nou, Optimol!

�� Lliçó 8:

Serviu imatges més petites i més comprimides als usuaris en connexions a internet més lentes.

�� Eines eines eines!

Al llarg del camí, he esmentat diverses eines que podeu utilitzar per fer més eficaç la publicació d’imatges del vostre lloc. Aquí teniu un resum d’aquests:

  • Optimol – us permet optimitzar automàticament les imatges, les comprimeix, tria la mida adequada de la imatge per a la visualització del visitant, serveix la imatge mitjançant un CDN, carrega imatges mandroses, funciona amb velocitats de connexió més lentes..
  • ImageOptim i ImageAlpha – manejar la compressió d’imatges d’escriptori a Mac. Pots fer servir TinyPNG a Win. Feu això abans de penjar imatges al vostre lloc.
  • XnConvert – us permet convertir imatges a WebP.
  • a3 Càrrega pereçosa plugin – carregat mandrós totes les imatges.
  • Jetpack plugin: arriba amb una imatge CDN gratuïta.
  • MaxCDN / StackPath – un CDN general que tindrà cura de tot el vostre lloc, no només d’imatges.

eines per optimitzar imatges

�� Per llegir més:

  • Imagify vs WP Smush vs ShortPixel vs Optimole: Quin és el millor per optimitzar les imatges de WordPress? Comparació cap a cap
  • Imatges gratuïtes per als blocs: com aconseguir-les & fer-los servir eficaçment (advertència! consells no obvis, respaldats per dades)
  • 11 maneres d’accelerar el rendiment de WordPress
  • Optimització de la velocitat del lloc web: com fer-ho el 2019
  • Allotjament de WordPress més ràpid: la guia per a principiants de trobar-ne un

��‍♂️ TL; DR:

Aquí teniu un resum de totes les lliçons que s’han compartit anteriorment:

Lliçó # 1:

No sempre aneu a favor de JPG. Prediceu quina mida es basarà en la seva imatge i, a continuació, utilitzeu el tipus d’imatge correcte.

Lliçó 2:

No us molesteu en res utilitzar els SVG si voleu optimitzar ràpidament les imatges. El temps que perdreu creant-los no pagarà resultats (tot i que no dubteu en desacord). Les PNG seran molt més ràpides d’utilitzar i no molt pitjor quant a consum d’espai de disc.

Utilitzeu WebP quan tracteu imatges que apareixen a diverses pàgines o imatges prou grans. Això és menys que es pugui gestionar el processament WebP automàticament, que es pot fer amb algunes eines addicionals. En aquest cas, utilitzeu WebP a tot arreu. Ja parlarem d’això en un segon.

Lliçó 3:

Comprimeu els vostres JPG per assolir un nivell acceptable de qualitat davant d’espai en disc.

Comprimeu sempre els vostres PNG.

Lliçó # 4:

Utilitzeu les mides d’imatge correctes per al vostre disseny.

Creeu punts d’interrupció.

Creeu diverses versions d’una mateixa imatge per cobrir els punts d’interrupció.

Utilitzeu els atributs srcset i mides quan mostreu les imatges.

Lliçó 5:

Assegureu-vos que els vostres logotips, les imatges de marca i totes les imatges que s’utilitzin a les vostres publicacions i pàgines estiguin preparades per a les pantalles HiDPI.

Lliçó 6:

Imatges de càrrega deixadesa que es troben a sota del plec.

Lliçó # 7:

Connecteu el lloc a un CDN d’imatge (Jetpack o Optimole) o a un CDN general (MaxCDN / StackPath).

Lliçó 8:

Serviu imatges més petites i més comprimides als usuaris en connexions a internet més lentes.

Feu-me saber què en penseu de tot el repte d’optimitzar les imatges per a la web al màxim possible. A més, què feu amb les vostres imatges per fer-les carregar més ràpidament? Compartiu els comentaris.

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Maquetació, presentació i edició de Karol K.

* Aquesta publicació conté enllaços d’afiliació, cosa que significa que si feu clic a un dels enllaços del producte i que adquireix el producte, rebríem una petita quota. Tanmateix, no hi ha cap problema, encara pagareu l’import normal, de manera que no hi ha cap cost per part vostra.

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