Hogyan lehet a képeket gyorsabban betölteni a WordPress webhelyen

Tehát azt szeretné, ha a képei gyorsabban letöltenének?


Nos, nem fogok bántalmazni. Merüljünk bele a jó dolgokba!

Három módon lehet a képeket gyorsabban betölteni a WordPress-ben:

  • Átméretezés
  • Borogatás
  • Lusta terhelés

Ebben a bejegyzésben elmagyarázom, hogy ezek a technikák hogyan működnek, és miért gyorsítják fel webhelyének betöltését. Megmutatom továbbá, hogyan lehet az egyes taktikákat mind kézi megoldásokkal, mind plugin-ajánlásokkal egyidejűleg megvalósítani.

Ez az első technika rendkívül egyszerű, ám a WordPress kezdők gyakran figyelmen kívül hagyják.

Képek optimalizálása a WordPress programban

Átméretezheti képeit

A képek gyorsabb feltöltésének abszolút legegyszerűbb módja az átméretezés. Hadd magyarázzam.

Mi az átméretezés??

Amikor azt mondom, hogy „átméretezem”, a kép méretének megváltoztatására gondolok, és ebben az esetben a túlságosan nagy képek méretét akarom csökkenteni..

Például a blogger időnként fényképeket készít telefonján vagy digitális fényképezőgépén, és feltölti őket a blogjaikba. A képek nem szerkesztett példányai akár 5000 képpont is lehetnek. Most gondolj erre …

A webhely posztszakaszának szélessége valószínűleg nem haladja meg a 800 képpontot. A jelenleg olvasott szöveg csak kb. 700 képpontos oldalra terjed az oldalon, tehát elképzelheti, hogy itt hozzáad egy 5000 képpont széles képet. Lenne sokkal nagyobb, mint amilyennek lennie kell és bár az oldalra való méretcsökkenés nem lenne megfelelő, a betöltött képfájl továbbra is hatalmas és rendkívül pazarló. És ez azért van, mert …

A nagyobb méretű képek nagyobb fájlmérettel is rendelkeznek.

A teljesítmény és a képek gyorsabb betöltése érdekében a kép méretének csökkentése nagyszerű módja annak, hogy drasztikusan csökkentsük a fájl méretét, és ez gyorsabbá teszi a kép betöltését.

Térjünk vissza a példámhoz, és feltételezzük, hogy a kép 5000 képpont széles és magas. Ha 5000 képpontról 700-ra csökkentené, akkor a kép ténylegesen 99% -kal kevesebb pixelt fog felhasználni. Más szóval, a fájlméret kb. 99% -kal csökken. Ha a kép 5 MB lenne, akkor mindössze 50 kb lesz, és 99% -kal gyorsabban tölt be webhelyét.

A képek átméretezése

Ha nem érti a képek gondos átméretezését, akkor szinte biztos, hogy van néhány előnye.

Néhány módon átméretezheti képeit úgy, hogy tökéletesen illeszkedjenek a webhelyhez.

A képek kézi átméretezése

Mielőtt új képet tölt fel a webhelyére, méretezze át kézi átméretezésével a számítógép beépített képszerkesztő eszközeivel.

Ha rendkívül nagy a kép, mint például a példámban, ez azonnal nagy változást hoz. A kép átméretezése után feltöltheti azt a médiakönyvtárba.

Még akkor is, ha a képet világítódobozban vagy csúszkában használja, általában nincs ok arra, hogy 2000 képpontnál szélesebb legyen. Ha a kép egy üzenet vagy az oldal tartalmának része lesz, akkor valószínűleg jól tudod csinálni, ha a kép 800 képpont széles.

A képek átméretezésének ez a módja jól működik, de a webhelyére már feltöltött képekkel nem segít. A meglévő képek egyszerű technikája egy egyszerű méret kiválasztása.

Használjon kisebb méretet

Amikor képet tölt fel a médiakönyvtárba, a WordPress akár 3 további verziót hoz létre: Miniatűr, Közepes és Nagy.

Ha ellátogat a Médiabeállítások oldalra, látni fogja, hogy itt választhatja ki ezeket a méreteket:

WordPress Media beállítások

Míg módosíthatja a beállításokat, az alapértelmezett nagyméretű 1024 képpont, amely elég nagy ahhoz, hogy a postákhoz felhasználhassa, anélkül, hogy túl pazarló lenne. Ezt a méretet az összes olyan képhez felhasználhatja, amelyet a bejegyzésében szerepel.

A bejegyzéshez hozzáadott kép méretének megváltoztatásához kattintson rá a szerkesztőben, és a jobb oldali oldalsávban megjelenik a Képméret legördülő menü..

WordPress kép átméretezése

Válassza ki a „Nagy” méretet, és frissítse a bejegyzést. Ha vannak túlméretezett képei, ez a technika lehetővé teszi, hogy gyorsan kiszolgáljon egy megfelelőbb méretet, amely gyorsabban töltődik be anélkül, hogy újra kellene töltenie és kicserélnie az eredeti.

Ennek ellenére ez szörnyen unalmas lehet, ha tucatnyi üzenet van tucatnyi képpel. Van még gyorsabb és hatékonyabb módszer.

Automatizált átméretezés egy pluginnal

Ahelyett, hogy maga átméretezné a képeket, hagyhatja, hogy egy plugin automatikusan elvégzi az Ön számára. Automatikus képméretezés esetén semmi sem veri felül a képet Optimole csatlakoztat.

Optimole Image Optimizer

Nem úgy működik, ahogy elvárták.

A médiakönyvtárban szereplő képek szerkesztése helyett az Optimole megőrzi a képek saját példányait, és nagy teljesítményű CDN-ből szolgáltatja őket. Ily módon az eredeti dokumentumokat soha nem módosítják.

Ezenkívül nem kell az Optimole-nak egyetlen méretet adnia a képeihez. Inkább megkapja a látogatói képernyő méretét, és minden kép optimális méretű változatát hozza létre menet közben. Ez azt jelenti, hogy valaki a mobil eszközön betölti a kép 400 képpontos verzióját, míg egy laptop látogatója ugyanezen kép 700 képpontos verzióját kapja meg.

Ez az átméretezési módszer sokkal könnyebben megvalósítható és hatékonyabb a mobil eszközök számára, ami különösen fontos, mivel a mobil látogatók gyakran lassúbb kapcsolatokkal rendelkeznek..

Ha meg szeretné tanulni az Optimole használatát, akkor kövesse a teljes bemutató videóomat:

Először az átméretezést javasoltam, mert akár manuálisan, akár egy pluginnal automatizálja, az egyszerű és hatalmas haszonnal jár.

Ha a képei már megfelelő méretűek az Ön webhelyéhez, akkor még tömörítéssel még jobban javíthatja webhelye teljesítményét.

Tömörítse a képeket

A tömörítés a kép fájlméretének csökkentése egyik módja annak méretének megváltoztatása nélkül.

Kétféle tömörítés érhető el.

A képtömörítés első típusát veszteségmentes tömörítésnek nevezzük.

Veszteség nélküli tömörítés

A veszteségmentes optimalizálás révén maga a kép nem szerkeszthető. Inkább ez a technika eltávolítja a képfájlban tárolt összes metaadatot. Például a képek gyakran tárolják a kép elkészítéséhez használt eszköz nevét, a fénykép készítésének dátumát, és néha a felvétel GPS-koordinátáit is..

Mivel ezek az adatok általában elég korlátozottak, a veszteségmentes optimalizálás csak 1-5% -kal csökkentheti a kép méretét, de valójában nincs ok arra, hogy ne használja, mert nincs hatással a kép minőségére.

A valódi nyereség a veszteséges optimalizálásból származik.

Veszteséges tömörítés

Ahogy az várható lehet, a veszteséges tömörítés magát a képet optimalizálja, és a minőség romlását eredményezi. De itt van a dolog …

A tömörítési algoritmusok manapság annyira jók, hogy gyakran csökkentik a kép fájl méretét 50–70% -kal, észrevehető különbség nélkül. Hacsak nem profi fotós vagy, és nem akarja, hogy képei tökéletesen tiszta legyenek a 4k-os monitorokon, akkor még a minőség romlását sem veszi észre.

A képek tömörítése

A képeket kézzel tömörítheti egy olyan eszközzel, mint a TinyPNG mielőtt feltöltené őket, vagy plugin segítségével automatizálná a dolgokat.

A ShortPixel kiváló bővítmény a webhelyén található képek optimalizálásához. Ez azonnal optimalizálhatja őket, amikor feltölti őket, és tömegesen optimalizálja a médiakönyvtárban lévő összes képet.

shortpixel

A kép átméretezéséhez javasoltam az Optimole alkalmazást, amely nagyon hatékonyan tömöríti a képeket. Megint nem optimalizálja a médiakönyvtárban tárolt eredeti példányokat, hanem tömöríti azokat a példányokat, amelyeket a látogatók számára szolgál.

Itt található még néhány további képoptimalizáló plugin.

A képek átméretezésével és tömörítésével a webhely sokkal gyorsabban fog betölteni, de van egy utolsó optimalizálás a képekhez.

Végezzen lusta rakodást

A lusta betöltés egy igazán okos módszer a képek további optimalizálására.

Tegyük fel, hogy van egy blogbejegyzés, amelyben 12 kép található. Amikor valaki meglátogatja az Ön webhelyét, nem minden kép látható azonnal a képernyőn. A legtöbbjük megjelenítéséhez tovább kell görgetniük. Akkor miért töltse be azonnal mind a 12-et?

Lusta betöltéssel csak a képernyőn megjelenő képeket töltik be. 12 betöltött kép helyett talán csak 2-3 töltődik be. Akkor, amikor a látogató görgeti az oldalt, a fennmaradó képeket betöltik, amikor a képernyőre kerülnek. Ez azt jelenti, hogy a kezdeti betöltés sokkal gyorsabb, és mivel a legtöbb látogató nem görgeti végig az oldalt, sok képet soha nem tölt be, ami értékes szerver erőforrásokat takarít meg.

Ez a videó megjelenítéssel rendelkezik, amely jobban magyarázza, ha világosabb képet szeretne kapni a lusta betöltés működéséről:

Most, hogy eladták a koncepciót, a következőképpen állíthatja be a lusta betöltést webhelyén.

Hogyan kell használni a lusta töltést?

Ez a teljesítmény-optimalizálási technika ismét könnyedén hozzáadható a WordPress-hez egy pluginnal.

Ha ingyenes lehetőséget keres, akkor próbálja ki az Optimole vagy a lehetőséget a3 lusta terhelés.

Az Optimole esetén a lusta betöltés automatikusan bekapcsol, és az a3 plugin könnyen konfigurálható.

Ezen felül, ha nem bánja a fizetéssel, akkor nézd meg WP rakéta. Nagyteljesítményű gyorsítótárazással és számos más sebességű eszközzel rendelkezik.

A lusta rakodás bekapcsolásához a WP Rocket használatával mindössze annyit kell tennie, hogy megfordítja ezt a kapcsolót:

WP Rocket Media

Nem lehetne könnyebb!

Élvezze a gyorsabban betöltött képeket

Összefoglalva, amit éppen megtanultál …

A webhelyére feltöltött túlméretezett képek rendkívül lassúak. Ezeknek a képeknek az egyikének köszönhetően megáll a webhely.

A képek gyorsítása érdekében a legfontosabb dolog a túl nagy képek átméretezése, hogy azok a webhely megfelelő méretűek legyenek. Ezt manuálisan vagy automatizálhatja az Optimole segítségével.

Ezután a képtömörítési algoritmusok hosszú utat jelentettek meg, és manapság a kép fájlméretét 50-70% -kal csökkenthetik anélkül, hogy észrevehető módon befolyásolnák a képet. Ez nem bátorság. A ShortPixel vagy az Optimole használatával tömörítheti a webhely minden képét.

Végül, a lusta betöltés nagyszerű módja a képek szelektív betöltésének. Használhatja az Optimole, az a3 Lazy Load vagy a WP Rocket szoftvert a lusta betöltés azonnali végrehajtására a webhelyén..

Ha még nem használta ezen technikák egyikét, akkor a telepítése drámai módon meg fog tölteni, miután bevezette. El fog távolítani téged.

Van valami kérdése a bejegyzés fogalmaival és technikáival kapcsolatban? Van még egy tippedet megosztani? Hozzászólás az alábbi megjegyzés rovatban!

még szintén kedvelheted,

Hogyan javítsunk egy lassú WordPress webhelyet és az adminisztrátor panelt (állandóan)

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