hogyan kell megfelelően méretezni a képeket a WordPress-ben (PageSpeed Insights + GTmetrix elem)

ha webhelyét a PageSpeed Insights vagy a GTmetrix segítségével futtatta, akkor megjelenhet egy ajánlás A képek megfelelő méretezésére.

a WordPress képek megfelelő méretezéséhez bontsa ki az elemet a PageSpeed Insights alkalmazásban, és tekintse meg, hogy mely képek túl nagyok. Átméretezni őket a megfelelő méreteket (megtalálható a GTmetrix legacy jelentés). Végül cserélje ki a régi képet az újra. Tesztelje újra webhelyét, és 100% – nak kell lennie.

megfelelő méretű képek

mivel a PageSpeed Insights csak a nem optimalizált képeket jeleníti meg a tesztelt oldalon, kezdje azzal, hogy átméretezi az egész webhelyen megjelenő képeket (logó, oldalsáv és lábléc képek). Ezután futtasson más oldalakat a PageSpeed Insights segítségével, és méretezze át a képeket azokon.

használhatok plugint a képek automatikus átméretezéséhez?
nem valószínű. A legtöbb képoptimalizálási bővítményben beállíthatja a maximális szélességet + magasságot. De a webhely különböző területei konkrét dimenziókat igényelnek (a képeket ennek megfelelően kell átméretezni).

hozzon létre egy kép dimenzió cheat sheet.
a megfelelő méretű képhibák elkerülésének legjobb módja az, ha megtanulja a webhely különböző területeinek méreteit (csúszkák, widgetek, logó, teljes szélességű blogképek stb.). Ezután hozzon létre egy képméret-csalólapot az egyes területek méreteivel. Ha követed a kép méreteit cheat sheet és átméretezni a képeket feltöltés előtt, akkor soha nem kell megfelelően méretű kép hibák.

keresse túlméretes képek GTmetrix Legacy Reports

GTmetrix legacy reports megmutatja a megfelelő méreteket a nagy képeket.

hozzon létre egy ingyenes gtmetrix fiókot, és lépjen a fiókok > alapértelmezés szerint a Legacy Reports > enable elemre.

futtasson egy oldalt a GTmetrix segítségével, és tekintse meg a “méretezett képek kiszolgálása” részt. Bővítse javaslataikat, és látni fogja a megfelelő méreteket, amelyekre ezeket a képeket át kell méretezni.

méretezett Képek megjelenítése GTmetrix

manuálisan is ellenőrizheti, hogy a képek túl nagyok-e. Kattintson a jobb gombbal egy képre > képcím másolása.

Képcím másolása

ezután illessze be a kép URL-jét egy új böngésző fülre. Ha összehasonlítja a webhelyén látható képet a kép URL-jével, látni fogja, hogy észrevehető különbség van a méretükben. Ez azt jelenti, hogy a képet méretezni kell. Ha összehasonlítja a képek két változatát egymás mellett,láthatja, hogy a kép valójában mekkora (és miért töltődik be lassan az oldal).

méretezett vs Nem méretezett kép

képek átméretezése a megfelelő méretekhez

töltse le a régi képet, majd nyissa meg a választott képszerkesztő eszközben (a GIMP-t használom). A kép átméretezése és/vagy kivágása a GTmetrix által ajánlott méretekre. Néhány képszerkesztő eszköz lehetővé teszi a képek tömörítését és az EXIF adatok eltávolítását, ami még gyorsabbá teszi a kép betöltését.

 kép méretezése GIMP

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

kép méretezése a WordPress Media Editorban

cserélje ki a régi képet az újra

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

Méretezetlen Widget kép

méretezett Widget Image

tesztelje újra az oldalt a GTmetrix-ben

tesztelje újra az oldalt a GTmetrix-ben (vagy a PageSpeed Insights-ban), és a hibát ki kell javítani.

Serve méretezett képek WordPress

megfelelő méretű képek mobilon

a képek megfelelő méretezése eltér a mobilon.

ha feliratkozik egy prémium GTmetrix fiókra, tesztelheti mobil sebességét Androidon. Valószínű, hogy több kiszolgálási skálázott képhibát fog látni, ha webhelye nem használ adaptív képeket, ami azt jelenti, hogy automatikusan átméretezi a képeket mobileszközökön (ezt általában egy plugin végzi).

1. lépés: futtassa webhelyét a GTmetrix Android tesztjén keresztül:

GTmetrix mobil teszt

Serve méretezett képek mobil

2. lépés: Keresse meg a mobil háttér méretek által biztosított GTmetrix:

maximális Háttérszélesség

3. lépés: telepítsen egy Adaptive Images plugint (ajánlom a ShortPixel vagy az Adaptive Images alkalmazást).

Rövidpixel adaptív képek

4.lépés: Állítsa be a gtmetrix által biztosított méreteket a háttér maximális szélességeként.

háttér maximális szélesség

5.lépés: futtassa újra webhelyét a GTmetrix mobil tesztjén keresztül, hogy megbizonyosodjon arról, hogy nincsenek hibák.

GTmetrix Mobile Test

5.lépés: konfigurálja az adaptive images plugin egyéb beállításait (a ShortPixel tartalmazza a WebP támogatást, a lusta képek betöltését, az intelligens vágást és az EXIF adatok eltávolítását). Ezek is segíthetnek.

képek átméretezése több oldalon

Ha ugyanazt a képet több oldalon/bejegyzésben használja, és javítani kell, átméretezheti a képet, átmá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 Better Search Replace plugint.

2.lépés: másolja a régi kép HTML-jét, majd illessze be a “Keresés” mezőbe a Better Search Replace bővítményben. A WordPress szövegszerkesztővel megtekintheti a kép HTML-jét. Megjegyzés: A Better Search Replace csak akkor helyettesíti a képet, ha az tartalmazza a pluginbe beírt pontos HTML-t.

jobb keresés cserélje ki a képeket

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

Serve skálázott kép HTML

4.lépés: Válassza ki a táblázatokat (pl. posts) szeretné beolvasott és törölje a ” Futtatás száraz szkennelés.”

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

kép létrehozása méretek Cheat Sheet

mint korábban említettem, meg kell mérnie a webhely minden területének méretét, hogy a képeket átméretezhesse, mielőtt feltöltené őket. Ezeket a dimenziókat megtalálhatja a GTmetrix – ben (csak akkor, ha megfelelő méretű képhibái vannak), vagy megtalálhatja őket a téma CSS stíluslapjában is.

példa:

  • Slider képek: 1900 (w) x 400 (h)
  • körhinta képek: 115 (w)
  • Widget képek: 414 (w)
  • Teljes szélesség blogbejegyzés képek: 680 (w)
  • kiemelt képek: 250 (SZ) x 250(h)
  • Yoast Facebook OG kép: 1200(SZ) x 628 (h) – 11. lépés
  • Yoast Twitter OG kép 1024(SZ) x 512 (h) – Lépés 11

680 Pixel Szélesség téglalap

a blogom szélessége 680px, tehát ezen a poszton minden egyes képet átméreteztek 680px-re.

WordPress Bővítmények a képek megfelelő méretezéséhez

a legtöbb Képoptimalizáló bővítménynek lehetősége van a képek átméretezésére, azonban ez nem túl hatékony, ha megpróbálja kijavítani a hibákat a GTmetrix-ben, mivel webhelyének különböző területei különböző méreteket igényelnek. Ez inkább annak biztosítására szolgál, hogy a képei ne legyenek teljesen hatalmasak. Ahogy az Imagify plugin mondja, a maximális szélesség nem lehet kisebb, mint a legnagyobb indexkép.

Smush

képek átméretezése Smush

képek átméretezése Imagify

EWW Image Optimizer

képek átméretezése EWWW

a képek optimalizálásának egyéb módjai

írtam egy teljes oktatóanyagot a képek optimalizálásáról a WordPress-ben, amely magában foglalja:

  • képek tömörítése
  • képek kiszolgálása CDN-ről
  • GIF-ek átméretezése
  • EXIF-adatok eltávolítása
  • lusta képek + videók betöltése
  • Cloudflare Mirage, lengyel, Hotlink védelem

GTmetrix képoptimalizálás

több sebesség oktatóanyagot keres?
itt vannak más oktatóanyagok, amelyeket írtam:

  • WordPress Speed Guide (Ez az útmutató örökké tartott)
  • a WP Rocket beállítása (a gyorsítótár bővítményt ajánlom)

van egy fantasztikus videóm a WordPress sebességoptimalizálásáról is:

Gyakran Ismételt Kérdések

Hogyan javíthatom meg a megfelelő méretű képeket?

töltse le a képet, méretezze át a gtmetrix legacy reports által biztosított megfelelő méretekre, majd cserélje ki a régi képet az újra.

használhatok plugint a képek megfelelő méretezéséhez?

nem, a webhely különböző részei különböző képméreteket igényelnek. Méreteznie kell a képeket, hogy illeszkedjenek ezekhez az egyedi méretekhez.

mely képeket kezdjem el először átméretezni?

Kezdje a több oldalon, például a logó, az oldalsáv és a lábléc képein megjelenő képek méretezésével.

hol találom meg a kép helyes méreteit?

a GTmetrix örökölt jelentései megadják az egyes képek megfelelő méreteit, amikor kibontja az elemet a PageSpeed lapon.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.