Kā apmainīt attēlus WordPress (vienums GTmetrix)

Nepieciešams WordPress apkalpot samazinātus attēlus?


Tas nozīmē tikai to, ka jums ir jāmaina lielie attēli, lai tie būtu mazāki.

GTmetrix stāsta, kuri attēli ir jāpielāgo, un pareizie izmēri, kādos tie jāapgriež vai jāpielāgo. Pēc tam mainiet attēla izmēru (mainiet mērogu) un aizstājiet vecos attēlus ar jauniem.

Apkalpot mēroga attēlus

Tā kā GTmetrix rāda tikai nepopulizētus vienas testētās lapas attēlus, sāciet ar mērogošanu vietnes mērogā attēlu attēlus, kas parādās vairākās lapās (jūsu logotips, sānjoslas un kājenes attēli). Pēc tam palaidiet citas savas lapas caur GTmetrix un mainiet tajās atsevišķos attēlus.

Vai es varu izmantot spraudni, lai automātiski mērogtu attēlus?
Maz ticams. Lielākajā daļā attēlu optimizācijas spraudņu varat iestatīt maksimālo platumu + augstumu. Bet dažādām vietnes vietnēm ir vajadzīgas noteiktas dimensijas (attēli ir attiecīgi jākoriģē).

Izveidojiet attēla dimensijas apkrāptu lapu.
Labākais veids, kā izvairīties no mērogojamām attēlu kļūdām, ir iemācīties katra jūsu vietnes apgabala izmērus (slīdņus, logrīkus, logotipu, pilna platuma emuāru attēlus utt.). Pēc tam izveidojiet attēla dimensijas apkrāpšanas lapu, kurā uzskaitīti katra apgabala izmēri. Ja pirms augšupielādēšanas ievērojat savu attēlu izmēru apkrāpšanas lapu un maināt attēlu izmērus, jums nekad vairs nevajadzētu rādīt samazinātas attēla kļūdas.

1. Atrodiet lielgabarīta attēlus GTmetrix

Palaidiet lapu, izmantojot GTmetrix, un cilnē PageSpeed ​​skatiet rādītās mēroga attēlu kļūdas. Izvērsiet viņu ieteikumus, un redzēsit pareizās dimensijas, pēc kurām katram attēlam vajadzētu būt mainītam. Ņemiet vērā: GTmetrix parādīs kļūdas tikai vienā pārbaudītajā lapā.

Rādīt mērogojamus attēlus GTmetrix

Jūs varat arī manuāli pārbaudiet, vai attēli nav mērogojami. Vispirms noklikšķiniet ar peles labo pogu un nokopējiet attēla adresi.

Kopēt attēla adresi

Pēc tam ielīmējiet attēla URL jaunā pārlūka cilnē. Ja salīdzināsit savā vietnē parādīto attēlu ar sava attēla URL, redzēsit, ka ir pamanāms atšķirīgs izmērs. Tas nozīmē, ka attēls ir jāpielāgo. Salīdzinot divus attēla variantus viens otram blakus, jūs varat redzēt, cik liels attēls patiesībā ir (un kāpēc lapas, kurās tas tiek rādīts, iespējams, ielādē ļoti lēni).

Mērogots vai neierobežots attēls

2. Mainiet attēlu izmērus, lai koriģētu izmērus

Lejupielādējiet veco attēlu un atveriet to izvēlētajā attēlu rediģēšanas rīkā (es izmantoju GIMP). Mainiet attēla izmēru un / vai apgrieziet to līdz GTmetrix ieteiktajiem izmēriem. Daudzi attēlu rediģēšanas rīki ļauj saspiest attēlus un noņemt tos EXIF dati kas padarīs attēlu ielādi vēl ātrāku.

Attēla mērogošana GIMP

Attēlus var arī apgriezt un mainīt to izmērus tieši WordPress:

Attēla mērogošana WordPress multivides redaktorā

3. Aizvietojiet veco attēlu ar jauno

Augšupielādējiet jauno attēlu WordPress, pēc tam aizstājiet veco attēlu ar jauno.

Logrīka attēls bez mēroga

Mēroga logrīka attēls

4. Atkārtoti pārbaudiet lapu GTmetrix

Atkārtoti pārbaudiet lapu GTmetrix, un jums vairs nevajadzēja rādīt samazinātas attēla kļūdas.

100% rādītu izmēru attēlus

5. Apmērojiet attēlus mobilajā ierīcē

Mērogotu attēlu rādīšana mobilajās ierīcēs ir atšķirīga.

Ja reģistrējaties bezmaksas GTmetrix kontam, varat pārbaudīt savu mobilās vietnes ātrums operētājsistēmā Android. Ja jūsu vietne to neizmanto, iespējams, redzēsit vairāk attēla kļūdu attēlos adaptīvie attēli, kas nozīmē automātisku attēlu samazināšanu mobilajām ierīcēm (to parasti veic spraudnis).

1. solis: Palaist savu vietni, izmantojot GTmetrix Android testu:

GTmetrix mobilais tests

Apmērojiet attēlus mobilajā ierīcē

2. solis: Atrodiet sava mobilā fona izmērus, ko nodrošina GTmetrix:

Maksimālais fona platums

3. solis: Instalējiet spraudni Adaptive Images no ShortPixel vai Adaptīvie attēli.

ShortPixel adaptīvie attēli

4. solis: Iestatiet izmērus, ko GTmetrix nodrošina kā fona maksimālais platums.

Fona maksimālais platums

5. solis: Pārbaudiet savu vietni, izmantojot GTmetrix mobilo testu, lai pārliecinātos, ka nav kļūdu.

GTmetrix mobilais tests

5. solis: Konfigurējiet citus adaptīvā attēlu spraudņa iestatījumus (ShortPixel ietver WebP atbalstu, slinku attēlu ielādi, viedu apgriešanu un EXIF ​​datu noņemšanu). Arī tie var palīdzēt.

6. Mainiet attēlu izmēru uz vairākām lappusēm

Ja vienu un to pašu attēlu izmantojat vairākās lapās un tam ir jābūt mērogojamam, varat mainīt attēla izmērus, nokopēt tā HTML un pēc tam izmantot spraudni Labāka meklēšana aizstāt, lai to labotu vairākās lapās.

1. solis: Instalējiet Labāka meklēšana Aizstāt spraudni.

2. solis: Kopējiet vecā attēla HTML un ielīmējiet to spraudņa Labāka meklēšana aizstāt laukā “Meklēt”. Jūs varat izmantot WordPress teksta redaktors lai redzētu attēla HTML. Piezīme. Labāka meklēšana Aizstāt attēlu aizstās tikai tad, ja tajā būs precīzi ievadīts spraudnī ievadītais HTML.

3. solis: Kopējiet jaunā attēla HTML un ielīmējiet to laukā “Aizstāt ar”.

Apkalpot mēroga attēla HTML

4. solis: Atlasiet skenējamās tabulas (piem., Ziņas) un noņemiet atzīmi no izvēles rūtiņas sausajā skenēšanā.

5. solis: Noklikšķiniet uz “Meklēt / aizstāt”, un spraudnis aizstās veco attēlu ar jauno.

7. Izveidojiet attēla izmēru apkrāpšanas lapu

Kā jau minēju iepriekš, jums vajadzētu izmērīt visu savas vietnes apgabalu izmērus, lai pirms to augšupielādes varētu mainīt attēlu lielumu. Šīs dimensijas var atrast GTmetrix (tikai tad, ja ir parādītas samazinātas attēla kļūdas), vai arī tās var atrast motīva CSS stila lapā.

Piemērs:

  • Bīdāmie attēli: 1900 (w) x 400 (h)
  • Karuseļa attēli: 115 (w)
  • Logrīku attēli: 414 (w)
  • Pilna platuma emuāra ziņas attēli: 680 (w)
  • Piedāvātie attēli: 250 (w) x 250 (h)
  • Yoast Facebook OG attēls: 1200 (w) x 628 (h) – 11. darbība
  • Yoast Twitter OG attēls 1024 (w) x 512 (h) – 11. darbība

680 pikseļu platuma taisnstūris

Mana emuāra platums ir 680 pikseļi, tāpēc katra šī attēla attēls ir mainīts uz 680 pikseļu.

8. WordPress spraudņi, lai apkalpotu mērogotus attēlus

Lielākajai daļai attēlu optimizācijas spraudņu ir iespēja mainīt attēlus, tomēr tas nav pārāk efektīvs, mēģinot labot kļūdas GTmetrix, jo dažādiem jūsu vietnes apgabaliem bija vajadzīgas atšķirīgas dimensijas. Tas ir vairāk par to, lai pārliecinātos, ka jūsu attēli nav absolūti milzīgi. Kā saka spraudnis Imagify, maksimālais platums nedrīkst būt mazāks par jūsu lielāko sīktēlu.

Smush

Mainīt attēlu izmēru

Iedomājies

Attēlu mainīšana Iedomājieties

EWW Image Optimizer

Attēlu mainīšana EWWW

Citu attēlu optimizācija

Es uzrakstīju pilnu mācību materiālu par attēlu optimizēšana WordPress kas iekļauj:

  • Attēlu saspiešana
  • Attēlu apkalpošana, izmantojot CDN
  • GIF izmēru maiņa
  • EXIF datu noņemšana
  • Slinki ielādē attēlus + video
  • Cloudflare Mirage, poļu, karsto saišu aizsardzība

Attēla optimizācija GTmetrix

Meklējat vairāk WordPress ātruma apmācības?
Šeit ir citas apmācības, kuras es uzrakstīju:

  • Kā iestatīt WP Rocket (iesakām kešatmiņas spraudni)
  • Cloudways vs SiteGround (divi labākie saimnieki, kurus iesaku)
  • Kā es saņēmu 100% GTmetrix rādītājus (WordPress Speed ​​Guide)

Man ir arī lielisks video par WordPress ātruma optimizāciju:

bieži uzdotie jautājumi

&# x2705; Vai es varu izmantot spraudni, lai apkalpotu samazinātus attēlus?

Nē, dažādām jūsu vietnes sadaļām nepieciešama atšķirīga attēla dimensija. Attēli ir jāpielāgo, lai tie atbilstu šīm unikālajām dimensijām.

&# x2705; Kāds ir vienkāršākais attēla mērogošanas veids??

Lejupielādējiet attēlu, apgrieziet / mainiet tā lielumu programmā, piemēram, Photoshop vai Gimp, pēc tam aizstājiet veco attēlu ar jauno.

&# x2705; Kurus attēlus vispirms vajadzētu sākt mērogot?

Sāciet ar mērogošanu attēliem, kas parādās vairākās lapās, piemēram, jūsu logotipā, sānjoslā, attēlos, kājenes attēlos un citos.

&# x2705; Kur es varu atrast attēla pareizās dimensijas??

GTmetrix norāda pareizos katra attēla izmērus, kad izvērstat vienumu cilnē Lapas ātrums.

&# x2705; Kā es varu pilnībā optimizēt attēlu??

Pielāgojiet to pareizajiem izmēriem, saspiediet to un noņemiet EXIF ​​datus, izmantojot attēlu programmu vai spraudni, pēc tam pārliecinieties, ka HTML esat norādījis attēla izmērus (iestatiet attēla platumu un augstumu)..

Es ceru, ka šī apmācība jums bija noderīga! Ja jūsu WordPress vietnē joprojām tiek rādītas samazinātas attēla kļūdas, atstājiet man komentāru ar jūsu jautājumu un es jums palīdzēšu, ja vien iespējams.

Priekā,
Toms

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