Méretezett képek kiszolgálása a WordPress-ben (elem a GTmetrix-ben)

Szolgáltatnia kell a méretezett képeket a WordPress-ben?


Ez azt jelenti, hogy át kell méreteznie a nagy képeket, hogy azok kisebbek legyenek.

GTmetrix megmondja, mely képeket kell méreteznie, és a megfelelő méreteket vágni vagy átméretezni. Ezután méretezze át (méretezze) a képet, és cserélje ki a régi képeket az újokra.

Méretezett képek megjelenítése

Mivel a GTmetrix csak a tesztelt egyetlen oldal nem optimalizált képeit jeleníti meg, kezdje el a méretezést teljes website több oldalon megjelenő képek (logó, oldalsáv és lábléc képek). Ezután futtassa a többi oldalt a GTmetrix segítségével, és méretezze az egyes képeket azokra.

Használhatok egy plugint a képek automatikus méretezéséhez?
Nem valószínű. A legtöbb képoptimalizáló beépülő modulban beállíthatja a maximális szélességet + magasságot. De a webhely különböző területein különleges dimenziókra van szükség (a képeket ennek megfelelően kell méretezni).

Hozzon létre egy kép méretű cheat lapot.
A kiszélesített képhibák elkerülésének legjobb módja a webhely egyes területeinek (csúszkák, kütyü, logó, teljes szélességű blogképek stb.) Méretének megismerése. Ezután hozzon létre egy képdimenziós csaló lapot, amely felsorolja az egyes területek méreteit. Ha feltöltése előtt követi a képméret-cheat lapot és átméretezi a képeket, akkor soha többé nem szabad megjeleníteni a méretezött képhibákat.

1. Keresse meg a túlméretezett képeket a GTmetrix-ben

Futtasson egy oldalt a GTmetrix-en, és tekintse meg a méretezett képhibákat a PageSpeed ​​lapon. Bontsa ki az ajánlásaikat, és látni fogja a megfelelő méreteket, amelyekhez minden egyes kép méretét át kell méretezni. Ne feledje, hogy a GTmetrix csak a tesztelt oldalon jeleníti meg a hibákat.

Szolgáljon méretezett képeket GTmetrix

Te is kézzel ellenőrizze, hogy a képek méretezve vannak-e. Először kattintson a jobb egérgombbal, és másolja a kép címét.

Kép cím másolása

Ezután illessze be a kép URL-jét egy új böngésző lapra. Ha összehasonlítja a webhelyén látható képet a kép URL-jével, láthatja, hogy van egy észrevehető méretű eltérő méret. Ez azt jelenti, hogy a képet méretezni kell. Ha összehasonlítja a kép két változatát egymás mellett, megtudhatja, milyen nagy a kép valójában (és miért töltheti fel nagyon lassan az oldalát, amelyen jelen van).

Méretezett vagy nem méretarányos kép

2. Átméretezze a képeket a méretezéshez

Töltse le a régi képet, és nyissa meg a választott képszerkesztő eszközben (a GIMP-t használom). Átméretezheti és / vagy vághatja le a képet a GTmetrix által ajánlott méretekre. Számos képszerkesztő eszköz lehetővé teszi a képek tömörítését és eltávolítását EXIF adatok ami még gyorsabbá teszi a kép betöltését.

Kép méretezése GIMP

Vághatja és átméretezheti a képeket is közvetlenül a WordPress-ben:

Kép méretezése a WordPress Media Editor alkalmazásban

3. Cserélje ki a régi képet az újra

Töltse fel az új képet a WordPress-be, majd cserélje le a régi képet az újra.

Nem méretarányos Widget-kép

Méretezett widget kép

4. Vizsgálja meg újra az oldalt a GTmetrix-ben

Vizsgálja meg újra az oldalt a GTmetrix alkalmazásban, és már nem kellett volna megjelenítenie a méretezött képhibákat.

100% -ban méretezhető képek

5. Méretezett képeket jeleníthet meg mobilon

A méretezett képek megjelenítése a mobiltelefonon eltérő.

Ha feliratkozik egy ingyenes GTmetrix fiókra, kipróbálhatja a mobil weboldal sebessége Androidon. Valószínű, hogy több kiszolgálón megjelenő képhiba jelenik meg, ha webhelye nem használja adaptív képek, ami azt jelenti, hogy automatikusan átméretezik a képeket a mobil eszközök számára (ezt általában egy plugin végzi).

1. lépés: Futtassa webhelyét a GTmetrix Android tesztjén:

GTmetrix mobil teszt

Szolgáltasson méretezett képeket mobilon

2. lépés: Keresse meg a GTmetrix által biztosított háttérképeket:

A háttér maximális szélessége

3. lépés: Telepítse az Adaptive Images plugin-t a ShortPixel vagy Adaptív képek.

ShortPixel adaptív képek

4. lépés: Állítsa be a GTmetrix által megadott méreteket mint háttér maximális szélessége.

Háttér maximális szélessége

5. lépés: Futtassa újra webhelyét a GTmetrix mobiltesztjével, hogy megbizonyosodjon arról, hogy nincsenek hibák.

GTmetrix mobil teszt

5. lépés: Egyéb beállítások konfigurálása az adaptív képek beépülő moduljában (a ShortPixel tartalmazza a WebP támogatást, a képek lusta betöltését, az intelligens levágást és az EXIF ​​adatok eltávolítását). Ezek is segíthetnek.

6. Átméretezheti a képek több oldalán

Ha ugyanazt a képet használja több oldalon, és méretezendő, átméretezheti a képet, másolhatja HTML-jét, majd a Better Search Replace plugin segítségével javíthatja több oldalon.

1. lépés: Telepítse a Jobb keresés Cserélje ki a bővítményt.

2. lépés: Másolja a régi kép HTML-jét, és illessze be a Jobb keresés cseréje beépülő modul „Keresés” mezőjébe. Használhatja a WordPress szövegszerkesztő a kép HTML-jének megtekintéséhez. Megjegyzés: A Jobb keresés cseréje csak akkor cserél egy képet, ha az tartalmazza a pluginbe beírt pontos HTML-t.

3. lépés: Másolja az új kép HTML-jét, és illessze be a „Csere” mezőbe.

Szolgálja a méretezett kép HTML-t

4. lépés: Válassza ki a beolvasni kívánt táblákat (pl. Hozzászólások), és törölje a jelet a száraz beolvasás jelölőnégyzetből.

5. lépés: Kattintson a „Keresés / Csere” gombra, és a plugin a régi képet cseréli az újra.

7. Készítsen egy képméretek-cheat lapot

Mint már korábban említettem, meg kell mérnie a webhely összes területének méretét, hogy a képek feltöltése előtt átméretezhesse a képeket. Megtalálhatja ezeket a méreteket a GTmetrix-ben (csak akkor, ha méretezött képhibákat szolgáltatott), vagy megtalálhatja azokat a téma CSS stíluslapján is..

Példa:

  • Csúsztatható képek: 1900 (h) x 400 (h)
  • Körhintaképek: 115 (w)
  • Widget-képek: 414 (w)
  • Teljes szélességű blogbejegyzés: 680 (w)
  • Kiemelt képek: 250 (w) x 250 (h)
  • Yoast Facebook OG kép: 1200 (w) x 628 (h) – 11. lépés
  • Yoast Twitter OG kép 1024 (w) x 512 (h) – 11. lépés

680 pixel szélességű téglalap

Blogom szélessége 680px, tehát a bejegyzés minden egyes képének mérete 680px lett.

8. WordPress beépülő modulok méretezett képek megjelenítéséhez

A legtöbb képoptimalizáló pluginnek lehetősége van a képek átméretezésére, ám ez nem túl hatékony, ha a GTmetrix hibáit megpróbálják kijavítani, mivel webhelyének különböző területei eltérő dimenziókat igényeltek. Sokkal inkább annak biztosítására törekszik, hogy képei ne legyenek teljesen óriási. Ahogy az Imagify plugin mondja, a maximális szélességnek nem szabad kisebbnek lennie, mint a legnagyobb miniatűrnek.

Smush

Átméretezni a képeket Smush

Imagify

Képek átméretezése Képzeld el

EWW Image Optimizer

Képek átméretezése EWWW

Egyéb képek optimalizálása

Írtam egy teljes bemutatót a képek optimalizálása a WordPress programban ami magában foglalja:

  • Képek tömörítése
  • Képek megjelenítése CDN-n keresztül
  • A GIF-ek átméretezése
  • Az EXIF ​​adatok eltávolítása
  • Lusta képek és videók betöltése
  • Cloudflare Mirage, lengyel, Hotlink védelem

Képoptimalizálás a GTmetrix-ben

További WordPress Speed ​​oktatóanyagokat keres?
Itt találhatók más oktatóanyagok, amelyeket írtam:

  • Hogyan állítsuk be a WP rakétát (a gyorsítótár-bővítményt ajánlom)
  • Cloudways vs. SiteGround (a két legnépszerűbb házigazda ajánlom)
  • Hogyan kaptam 100% -os GTmetrix pontszámot (WordPress Speed ​​Guide)

Van egy fantasztikus videóm a WordPress sebesség-optimalizálásáról:

Gyakran Ismételt Kérdések

&# X2705; Használhatom-e egy bővítményt méretezött képek megjelenítéséhez?

Nem, webhelyének különböző szakaszain eltérő képméretekre van szükség. A képeket méreteznie kell az egyedi méretekhez.

&# X2705; Mi a legegyszerűbb módja a kép méretezésére??

Töltse le a képet, kivágja / átméretezze egy olyan programban, mint a Photoshop vagy a Gimp, majd cserélje le a régi képet az újra.

&# X2705; Melyik képeket kell kezdenem méretezni??

Először méretezze a több oldalon megjelenő képeket, mint például a logó, az oldalsáv, a képek, a lábléc képek és a többi.

&# X2705; Hol találok egy kép helyes méreteit??

A GTmetrix megmutatja az egyes képek helyes méreteit, amikor kibontja az elemet a PageSpeed ​​lapon.

&# X2705; Hogyan lehet teljes mértékben optimalizálni a képet?

Skálázza a megfelelő méretekre, tömörítse és távolítsa el az EXIF-adatokat egy képprogram vagy egy plugin segítségével, majd ellenőrizze, hogy megadta-e a kép méretét (állítsa be a kép szélességét és magasságát) a HTML-ben.

Remélem, hasznosnak találta ezt az oktatóprogramot! Ha továbbra is megjelennek skálázott képhibák a WordPress-webhelyen, hagyj nekem egy megjegyzést a kérdéseddel, és mindenképpen segíteni fogok.

Egészségére,
Tomi

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