Hogyan optimalizálhatja képeit webhelye számára, és működésbe hozza őket minden eszközön (Responsive Images for Mobile, Desktop, Tablet)

Hogyan optimalizálhatja képeit webhelye számára, és működésbe hozza őket minden eszközön (Responsive Images for Mobile, Desktop, Tablet)

Hogyan optimalizálhatja képeit webhelye számára, és működésbe hozza őket minden eszközön (Responsive Images for Mobile, Desktop, Tablet)
СОДЕРЖАНИЕ
02 июня 2020

Miért érdekli a képek optimalizálása? Hadd kérjem ezt tőled; amikor utoljára láttál egy weboldalt, amelyen nem volt kép? "Soha" lenne a helyes válasz. ��‍♂️ A képek túl nélkülözhetetlenek. És ez még csak az a rohadékra méltó stock fotóról sem szól, amely mentén jár "10 online marketing tipp" post. A képek több célra is felhasználhatók. Gondoljon az elrendezésekre, a tervezési elemre, a logókra, a profilképekre és igen, a blogképekre is.


Őszintén szólva: 2020-ban nem lehet webhelye, ha legalább maroknyi képet nem használ fel rajta. Ennek ellenére a képek nem olyan egyértelműek, hogy kitalálják a webhelytulajdonosokat. Még ha el is hagyjuk a kihívásokat, hogy mely képeket kell használni, és hol, még vannak olyan kérdések, hogy ezeket a képeket tisztán technikai szempontból kell megjeleníteni:

  • Hogyan készítsünk érzékeny képeket több eszközön keresztül?
  • Hogyan tehetjük meg őket kiválóan az összes eszközön?
  • És ami a legfontosabb, hogyan lehet biztosítani, hogy megfelelő időben töltsék be őket?

Ezekre a kérdésekre válaszolunk ma. Itt található a végső útmutató hogyan optimalizálhatja képeit webhelye számára, és hogy azok minden eszközön jól néznek ki:

Hogyan lehet optimalizálni a képeket webhelyéhez, és hogyan lehet őket működtetni az összes eszközön

�� Miért figyeljen ránk??

A képek a közelmúltban kritikus téma voltak számunkra, és ezt a családunk egyik legújabb eszközének – Optimole.

Az Optimole egy kép-optimalizálási szolgáltatás, amelyet egy-egy-és-felejtsen el & eszköz. Úgy gondoljuk, hogy ez a legjobb ilyen megoldás az interneten, és be tudjuk bizonyítani! De ez egy másik alkalom beszéde. Akárhogy is, az évek során sokat tanultunk a képek megfelelő optimalizálásáról. A tudás egy részét ma meg akarjuk osztani veled.

Miért kellene optimalizálnia a webhely képeit?

A képek mellett a nagyszerű megjelenés jelentős mennyiségű lemezterületet és sávszélességet is igényel. Pontosabban: a képek a standard weboldal méretének 30–85% -át teszik ki.

sebesség mérés

Ez óriási – és nem olyan, mintha a képek eltávolítása opcionális lenne – tehát a legjobb dolog, amit ehelyett megtehetünk, ha megtanuljuk, hogyan lehet optimalizálni a képeket oly módon, hogy egyszerűen kevesebb helyet foglaljon el.

A haszon hatalmas lehet, és különösen akkor, ha ismételt képekkel foglalkozunk – képekkel, amelyeket minden egyes weboldalra be kell tölteni. Ilyenek például a háttér, a tervezési elemek, a logók, az ikonok stb. Néha csak egy háttérkép optimalizálása az oldalméret 70% -kal történő csökkentését eredményezheti.+.

Lásd ezt a példát:

oldalméret-összehasonlítás a képek optimalizálása előtt és után

De tartsd, még rosszabb lesz! Ha az általános képteljesítmény küzdelmei nem voltak elegendőek, ott is van a mobil birodalom ��, és ez egy teljesen új kihívást jelent:

Először is, valószínűleg nem jelenítheti meg ugyanazt a képet az asztali látogatók és a mobil látogatók számára. A kontextus csak nagyon eltérő – ide tartozik a képernyő mérete, tájolása (általában álló helyzetben) és még az olvasó gondolkodásmódja is.

Ráadásul, adatok szerint hogy a kevesebb képpel rendelkező mobil tervek jobban teljesítenek a konverziók szempontjából.

Ha összeállítottuk, akkor van néhány dolog, amellyel ügyelnünk kell az érzékeny képek több eszközön történő továbbítására:

  • először optimalizálja a képeket az adott eszközhöz
  • győződjön meg arról, hogy a képeket a lehető legmagasabbra tömöríti-e a leggyorsabb betöltési idő garantálása érdekében
  • jelenítse meg az optimális képszámot a készüléket és a képernyőt tekintve

��‍♂️ Hogyan lehet optimalizálni a képeket, és azokat minden eszköztípusra eljuttatni

A képeinek optimális feldolgozása, majd a lehető leggyorsabb kiszállítás a látogatóhoz több szempontból is fontos. Ebben az útmutatóban mindet áttekintjük:

Válassza ki a megfelelő formátumot

Kezdjük az éves kérdéssel: PNG vagy JPG?

A legtöbb ember azt mondja "JPG egész idő alatt!" De ez nem igazán helyes:

PNG vs JPG

Igen, a JPG-k általában vagy legalábbis a leggyakoribb forgatókönyvekben, amelyekre szükségünk lehet a képekre, kevesebb helyet foglalnak el és ezért kevesebb sávszélességet is.

De a kulcsszó itt van "a leggyakoribb forgatókönyvek." Valójában, ha van egy összetett kép, sok színnel és színátmenetekkel (más néven: sok "színinformáció"), akkor a JPG-k valóban jobbak lesznek. Gondoljon a standard fotókra. Ezek jobban működnek, mint JPG-k.

Ha azonban van egy kissé egyszerűbb képet, akkor a PNG mindig nyer.

Vegyük figyelembe a következő példát. Itt található négy kép:

image-1-a1-a kép: JPG

image-1-b1-b kép: PNG

image-2-akép 2-a: JPG

image-2-bkép 2-b: PNG

  • az 1-a kép mérete 312 KB
  • A 2-a kép mérete 196 KB

Próbáld kitalálni a másik két kép méretét …

Az Ön válasza:

Rossz!

  • az 1-b kép 1,3 MB (ezt valószínűleg kitalálta)
  • 2-b kép 106 KB (várj, mit ?!)

Mint láthatja, a PNG nyer egyszerű, alacsony színű információkért.

Gondoljon olyan kérdésekre, mint az interfész képernyőképei, egyszerű illusztrációk stb.

�� 1. lecke:

Ne mindig keresse meg a JPG-t. Jósolja meg, hogy mekkora lesz a kép a tartalma alapján, majd használja a megfelelő képtípust.

Most egy kicsit időszerűbb kérdéshez: SVG? WebP?

SVG és WebP

Az SVG és a WebP egy kicsit kevésbé általános képtípus az interneten, de mindkettő remek, mindaddig, amíg nem használja őket, ahogy használniuk kellene. Hadd tisztázjam:

  • Az SVG egy XML-alapú vektorkép-formátum. A kép tartalma meghatározható egy egyszerű XML fájlban – ugyanaz az XML fájl, amelyet más alapvető adatfeldolgozási célokra használ. Ez teszi az SVG-t jó formátumúvá, feltéve, hogy egy egyszerű vektorképtel foglalkozik.
  • A WebP egy új formátum a Google által. Azt állítják, hogy a WebP mérete 25-34% -kal kisebb, mint a hasonló JPEG-ekkel, és 26% -kal kisebb, mint az összehasonlítható PNG-kkel.

Szóval mi a fogás? Optimalizálhatja a képeket azáltal, hogy mindegyik SVG-k és WebP-k lesz?

Első, SVG. Alapvetően csak akkor használja az SVG-t, ha (A) – a képet hatékonyan lehet SVG – ként menteni, és – (B) ha nem bánja, ha az emberek ezt az SVG-t veszik át és módosítják.

Mint mondtam, az SVG XML-alapú, ami azt jelenti, hogy az SVG grafika módosítása nagyon könnyű. Ez nem mindig valami olyan, amit szeretne – különösen akkor, ha a márkájának logójával vagy más fontos grafikával foglalkozik.

A legtöbb esetben az SVG-k nem olyan formátum, amelyet nagyon gyakran használnak.

Most, rá WebP. A formátum nagyszerű, és a legtöbb esetben valóban sok lemezterületet takarít meg, ahogy ígérte. Nézze meg a következő két képet:

jpg képpélda

példa webp képre

  • az eredeti JPG verzió 204 KB
  • a WebP mérete 58 KB

A trükk az, hogy nem minden böngésző támogatja a WebP-t. Valójában előfordulhat, hogy nem is látja a WebP képet, amelyet fent használtam. Az írás idején a WebP a Google Chrome, a Firefox, az Edge és az Opera alkalmazásban működik. A régebbi verziók természetesen nem támogatják a formátumot.

A gyakorlatban ez azt jelenti, hogy a WebP-kép hozzáadása nem olyan egyszerű, mint JPG vagy PNG hozzáadása.

Úgy értem, technikailag használhatsz egy ilyen kódrészt:

… De ha a felhasználó böngészője nem támogatja a formátumot, ehelyett a megszokott törött kép ikont fogják látni.

A WebP hatékony használatához tartalék képeket kell nyújtania. Például:

Ez sokkal több munkát jelent. Képzelje el, hogy ilyen címkét kell készítenie minden alkalommal, amikor WebP-képet szeretne hozzáadni egy blogbejegyzéshez vagy oldalhoz. És hadd állítsam meg ott, nem, a WordPress nem támogatja a WebP-t natív módon, tehát ezt valóban kézzel kell tennie..

Ennek ellenére azt javaslom, hogy folytassam ezt a bonyolult manuális WebP útvonalat, amikor a webhely több oldalán megjelenő képekkel vagy hatalmas méretű képekkel foglalkozunk, és minden eszközre szükségünk van, amelyet valamilyen módon csökkenteni kell..

A képeket WebP-ként mentheti a Photoshop alkalmazásban, vagy használhat olyan eszközöket, mint a XnConvert (ingyenes).

�� 2. lecke:

Egyáltalán ne zavarja az SVG-k használatát, ha gyorsan szeretné optimalizálni a képeket. Az az idő, amelybe pazarolja őket, nem fog kifizetni (bár nem szabad egyetértenek; ez jó alternatív take). A PNG-k használata sokkal gyorsabb lesz, és nem sokkal rosszabb a lemezterület-felhasználás szempontjából.

Használja a WebP-t, amikor több oldalon megjelenő képekkel vagy elég nagy képekkel foglalkozik. Azaz, ha nem tudja automatikusan kezelni a WebP-feldolgozást, amit néhány további eszközzel meg lehet tenni. Ebben az esetben mindenhol használja a WebP-t. Erről másodpercen belül beszélünk.

Com️ Képek tömörítése

A képek tömörítése olyan, mint a varázslat. Hadd mutassam meg:

Ez ugyanaz a JPG kép, csak eltérő tömörítési szinten (gyakran minőségi szintnek nevezik) mentve:

Coon-100%100% minőségű

Coon-95%95% -os minőség

Coon-85%85% -os minőség

Coon-50%50% -os minőség

Ha olyan vagy, mint a legtöbb ember, akkor az első három ugyanaz néz ki neked. A negyedik kezd keresni "egy kicsit rosszabb." (Jobb kattintás és "Nyissa meg a képet az Új lapon")

Itt található, hogy mennyi lemezterületet igényel az alábbi képek:

  • 100% minőség: 969 KB
  • 95%: 439 KB
  • 85%: 186 KB
  • 50%: 102 KB

Hatalmas, ugye ?! ~ 1 MB-tól ~ 500 KB-ig növelheti a minőség észrevehető veszteségét, ha a tömörítést 100% -ról 95% -ra változtatja.

Ez a JPG-tömörítés különféle eszközökkel meglehetősen automatikusan kezelhető, ami nagyszerű hír. Nem minden képet készít ugyanakkor, ezért néha rendben nézhet a rossz megjelenésű képekhez, még akkor is, ha ugyanazon tömörítési folyamaton estek át.

Összességében megteheti, hogy itt ugrik, és lecsökkentheti JPG-jeinek minőségét. A helyzet az, hogy a webhely látogatói nem törődnek az éles képekkel mindenhol.

Oké, tisztáznom kellene; igen, ha meg akar mutatni nekik valamit – például egy képet, amely kulcsfontosságú egy tartalomhoz, például termékkép, szállodai szoba fénykép -, akkor biztos, hogy ezeknek élesnek kell lenniük.

De más területeken kicsit nyugodtabb is lehet. Például a háttérnek nem kell 100% -ának élesnek lennie. Általában véve minden olyan kép minősége alacsonyabb, amelyhez a látogató közvetlenül nem kapcsolódik.

Két kedvenc eszközem, amelyek itt segíthetnek:

ImageOptim asztali tömörítéshez Mac rendszeren. Csak megragadhat egy képet az asztalról, áthúzhatja az ImageOptim-re, majd az eszköz elvégzi a varázsait és felülírja a forrásképet.

Ezután megkaphatja ezt a képet, és általában feltöltheti webhelyére.

ImageOptim - nagyszerű eszköz az asztalon lévő képek optimalizálásához

A második eszköz Optimole. Ez az eszköz nagyjából újradefiniálja a képek kezelésének módját a weboldalakon. E beszélgetés céljából mondjuk csak, hogy ez tényleg akkor hatékony, ha optimalizálni kívánja a médiakönyvtárában található képeket.

optimole - nagyszerű eszköz a felhőben lévő képek optimalizálására

Most a PNG-ken. Csakúgy, mint a JPG-k, a PNG-k is tömöríthetők. De ezúttal nincs hátrány a minőségcsökkenés szempontjából. A PNG-k hatékonyan tömöríthetők veszteségmentes algoritmusok segítségével.

Más szavakkal, tömörítse mindig a PNG-ket!

Nézze meg ezt a három képet:

KWF-1
KWF-2

KWF-3

Ugyanaznak néznek ki, de valójában felveszik:

  • 346 KB
  • 215 KB
  • 100 KB

Próbáld kitalálni, melyik melyik.

Három eszköz a képek tömörítéséhez és apróbbá tételéhez:

  • ImageOptim újra. De ez sok időt vesz igénybe a PNG-kkel, tehát ha sokuk van feldolgozásra, érdemes lehet csésze kávét készíteni magának, amíg az eszköz működik.
  • ImageAlpha. Sokkal gyorsabb, mint az ImageOptim. Ez az én asztali megoldásom a PNG-khez.
  • Optimole. Nem meglepő, hogy az Optimole a PNG tömörítést is kezeli. Minden történik autopiloton.

�� 3. lecke:

Tömörítse a JPG-ket, hogy elérje az elfogadható minőségi szintet a lemezterülettel szemben.

A PNG-ket mindig tömörítse.

�� A megfelelő méretű képeket szolgáltassa

Ez talán a legfontosabb szempont az egészben "érzékeny képek" talány. Mint tudjuk, tíz, ha nem több száz különféle méretű képernyő van odakint, és valahogy meg kell győződnünk arról, hogy képeink mindegyikén nagyszerűen néznek ki..

Az egyszerű megoldás? Szolgáljon nagy képet … mindig lecsökkenthető, igaz? Nos, technikai szempontból ez helyes, de a gyakorlatban ez sok sávszélességet pazarol, és a legtöbb eszköz valóban lassan töltődik be a webhelyen.

Egy jobb megoldás az, ha az összes képet a megfelelő méretre méretezi, amelyet a leggyakoribb eszközök előnyben részesítenek, majd ennek megfelelően szolgálja ki.

Mint várható lenne, ennek eléréséhez ugyanannak a képnek különféle verzióira van szüksége.

Ennek egyik módja az, ha a terv alapszélességével és a felhasználható legnagyobb képmérettel kezdődik, majd onnan lecsökkenti néhány általános eszközre és töréspontra..

Például a legtöbb webhely nem haladja meg a tartalomblokk szélességének 1100 képpontos jelét, tehát feltételezheti, hogy az ebben az esetben megjeleníthető maximális kép szélessége 1100 képpont is.

Ezután létrehozhat törési pontokat 800 képpontos és 550 képpontos értékekhez (általános értékek) a táblagép és a mobil forgatókönyvek lefedéséhez. Bár ez nem fog 100% -ban tökéletes eredményt nyújtani minden eszközön, legalább ésszerű mértékben optimalizálja és képeit ellenőrzés alatt tartja.

Ha mögötte állsz, most már készítenie kell egy maroknyi különféle változatot minden egyes képről, amelyet használni szeretne a webhelyén.

Íme egy példa a tényleges megjelenítési kód kezelésére:

Az srcset attribútum varázslata az, hogy a böngésző megnézi, mi van benne, majd kiválasztja a legjobb képet a használt eszköz alapján.

Még egy testreszabás, amelyet fent láthat, a size attribútum. Ez megmondja a böngészőnek a kép viselkedését bizonyos képernyőkön. Ebben a forgatókönyvben a kép 1100 képpont lesz, ha 1100 képpontnál nagyobb nézetablakon tekintik meg, míg kisebb eszközökön a teljes nézetablakot fogja felvenni.

Ez a fajta megoldás biztosítja, hogy a kép ne vegye fel a teljes 3840 képpont széles 4K képernyőt. Mobileszközön történő megjelenés esetén azonban az egész képernyőt el fogja foglalni.

A méret attribútum hatékony felhasználása révén képei igazán reagálnak.

Tr Pro trükk: Válasszon olyan képeket, amelyek mérete 10% -kal kisebb, mint amire szüksége van, majd hagyja, hogy a böngésző méretezze őket. Ez további helyet és sávszélességet takarít meg. Például, ha 500 × 500 px képre van szüksége, akkor méretezheti a képet 450 × 450 képpontosra, majd hagyhatja, hogy a böngésző 500-ig méretezze. Ez a képtől függ, de a legtöbb esetben a felhasználótól nem veszi észre.

�� 4. lecke:

A formatervezéshez használja a megfelelő képméretet.

Hozzon létre törési pontokat.

Hozzon létre ugyanazon kép több verzióját a töréspontok lefedéséhez.

A képek megjelenítéséhez használja az srcset és a size attribútumokat.

Optimalizálja a képeket a Retina és a HiDPI képernyőkhöz

A képméret-spektrum másik vége a HiDPI-barát képekről szól.

A történet az, hogy az asztali képernyők egyre nagyobbra válnak, pixeleik pedig egyre sűrűbben csomagolódnak. Manapság nem ritka, hogy a 4K képernyő becsomagolva egy 15 hüvelykes laptopba. A 4K felbontás 3840 × 2160 px, tehát ezeknek a pixeleknek igazán aprónak kell lenniük.

Ez problémákat okoz a webhelyek számára. Alapvetően, ha webhelyét 1100 képpont szélességűnek definiálnák, akkor normál körülmények között ez csak egy 4K-os képernyő rendelkezésre álló képernyő-ingatlanának körülbelül 25% -át veszi igénybe. Ez nem optimális. Szerencsére a dolgok nem működnek így.

A probléma elkerülése érdekében ezek a nagy felbontású képernyők úgy viselkednek, mint a fele méretük (túl egyszerűsítem, de hallom, hogy figyelmeztessenek). Tehát a HiDPI képernyő kis részét elfoglaló 1100 képpontos webhely helyett kétszeresére növekszik, 2200 képpontot vesz fel és sokkal jobban kitölti a képernyőt.

Ez a folyamat lehetővé teszi, hogy a képernyők élesebbé és élesebbé váljanak anélkül, hogy a folyamat során minden aprónak tűnne.

Ez a gyakorlat azonban nem hiányosságai. Főként, a képeid hatalmas slágert vesznek fel. A szöveget könnyű méretezni anélkül, hogy elveszítené a minőségét. A betűtípusok immunizáltak a méretezés ellen. A képek nem. Ennek eredményeként minden olyan kép, amely még nem áll készen a HiDPI képernyőhöz, homályosnak tűnik!

Ennek javításához el kell küldenie a méretezött képeket az egyes nagyítási arányokhoz. Íme néhány egyszerű kód:

(Ha a böngésző nem támogatja az srcset-et, akkor a standard src-t fogjuk használni.)

Most, amikor mondom "méretezett képek," Valójában azt gondolom, hogy a másik végről kell kezdenie. Kezdje egy hatalmas képpel (címkézze meg háromszor), majd méretezze le és tegye kisebbre (2x-re), végül készítse el egyszeresre, és használja ezt az alapértelmezett képet.

�� 5. lecke:

Győződjön meg arról, hogy logói, márkás képei, valamint a hozzászólásokban és az oldalakon használt összes kép készen áll a HiDPI képernyőkre.

⌛ A kép betöltése késleltetve

Ez elvben egyszerű; az összes képet, amely a hajtás felett van, azonnal be kell tölteni (az oldal betöltése). Minden mást későbbre lehet halasztani, sőt "lusta betöltve."

A lusta betöltés a kép igény szerinti betöltése. Vagyis a képeket csak egy másodperc alatt töltik be, mielőtt a felhasználónak szüksége lenne rájuk – nem hamarabb, de később. És az "nem hamarabb, nem később" a rész itt kulcsfontosságú.

Ideális esetben a képet be kell tölteni közvetlenül a nézetablakba való görgetés előtt. Ez azt jelenti, hogy a felhasználónak nem kell látnia helyőrzőt, mielőtt a kép megjelenik. Ha ez megtörténik, akkor gördítheti át a képet anélkül, hogy sikerült volna időben betöltenie – ez nem nagyszerű lehetőség a képek optimalizálására.

Ennek ellenére a lusta betöltést valami könnyű megtenni a WordPress webhelyeken. Lazán töltheti fel a JavaScriptet / jQuery alkalmazást, és akár meg is írhatja ennek kódját, ha szeretné. Alternatív megoldásként beszerezhet olyan plugint, mint a a3 lusta terhelés, vagy használhatja Optimole, amely tartalmaz egy lusta betöltő modult.

�� 6. lecke:

Lusta töltse be a hajtás alatti képeket.

�� Készítsen képeket CDN-n keresztül

A Tartalomszolgáltatási Hálózat olyan, mint egy webhely sebességének csaló kódja. Csal azért, mert nem annyira gyorsítja webhelyét, mert azt mondja valakinek, hogy vállalja meg a terhelést, és adja el a webhely adatait a látogatónak az Ön számára.

Here Itt mélyebben beszéltünk a CDN-kel kapcsolatban, nézd meg.

A TL; DR az, hogy a CDN-k kihasználják a kiszolgálók hálózatának előnyeit, amelyek mindegyike tárolja az Ön webhelyének másolatát, majd azt a legközelebbi rendelkezésre álló helyről továbbítja a látogató számára. Ez mindig gyorsabb lesz, mint a fő szerverről történő kézbesítés.

A képi CDN-k nagyjából ugyanazok, de csak a képekre összpontosítanak.

Legtöbbször a művelet az Ön szempontjából zökkenőmentes. A webhelyén található összes képet CDN által üzemeltetett változat váltja fel (azaz a kép URL-je megváltozik).

  • Jetpack egy népszerûen beépített CDN képpel rendelkezik. Ingyenesen is felhasználhatja, ami nagyszerű. A fő korlátozás az, hogy csak a hozzászólások, oldalak és a kiemelt képek képeivel működik. Nem működik minden olyan képnél, amely alkotja az Ön tervét (a téma része, elrendezése stb.). Ezek azok a képek, amelyek valóban felhasználhatnák a CDN-fájlokat.
  • Optimole a fő képoptimalizálási funkció részeként beépített CDN-t tartalmaz. Ez nem korlátozódik csak a bejegyzésedre és az oldalakra.

�� 7. lecke:

Helyezze be webhelyét egy kép CDN (Jetpack vagy Optimole) vagy egy általános CDN (MaxCDN / StackPath).

Smaller Kisebb képeket jeleníthet meg a felhasználók számára lassú kapcsolatok mellett

Nem csak a képernyő mérete számít, amikor eldönti, hogy milyen képet kell a felhasználónak látnia. Valószínűleg még ennél is fontosabb, hogy ha lassú internetkapcsolaton vannak, akkor valóban nem akarnak 10 másodpercet várni, amíg a kép betöltődik.

Ezekben a forgatókönyvekben sokkal jobb ötlet, hogy a képek minőségét a betöltési időért cserébe csökkentsék. A lassabb kapcsolatokkal rendelkező felhasználók értékelni fogják, hogy egyáltalán képesek látni a képeket.

Ezt megteheti a Network Information API használatával. Ez egy jó bemutató hogyan működik ez az egész, ha kézzel szeretné végrehajtani.

Ha jobban szeretné, ha azt automatikusan kezelnék, még egyszer, Optimole!

�� 8. lecke:

Kisebb és tömörített képek megjelenítése a felhasználók számára lassabb internetkapcsolaton.

�� Szerszámok eszközök eszközök!

Mindeközben számos eszközt megemlítettem, amelyek segítségével hatékonyabbá teheti webhelye képmegjelenítését. Itt van egy összefoglaló ezekről:

  • Optimole – lehetővé teszi a képek automatikus optimalizálását, tömörítését, a megfelelő képméret kiválasztását a látogató nézetablakához, CDN-n keresztüli kiszolgálást, lusta betölti a képeket, lassabb csatlakozási sebességgel dolgozik.
  • ImageOptim és ImageAlpha – kezelje az asztali képek tömörítését Mac rendszeren. Te tudod használni TinyPNG Win-en. Tegye ezt, mielőtt feltöltene képeit a webhelyére.
  • XnConvert – lehetővé teszi a képek konvertálását WebP-re.
  • a3 lusta terhelés plugin – lusta az összes kép betöltése.
  • Jetpack plugin – jön egy ingyenes kép CDN.
  • MaxCDN / StackPath – egy általános CDN, amely az egész webhelyet, nem csak képeket viseli.

eszközök a képek optimalizálásához

�� További irodalom:

  • Képzelje el a WP Smush és a ShortPixel vs. Optimole ellen: melyik a legjobb a WordPress képeinek optimalizálásához? Összehasonlítás
  • Ingyenes képek blogokhoz – hogyan lehet őket beszerezni & hatékonyan használja őket (figyelmeztetés! nem nyilvánvaló tanácsok, adatokkal alátámasztva)
  • 11 módszer a WordPress teljesítményének felgyorsítására
  • A weboldal sebességének optimalizálása: hogyan lehet ezt 2019-ben elvégezni
  • A leggyorsabb WordPress tárhely – a kezdő útmutató az egyik megtalálásához

TL️ TL; DR:

Itt található az összes, a fent megosztott leckének összefoglalása:

1. lecke:

Ne mindig keresse meg a JPG-t. Jósolja meg, hogy mekkora lesz a kép a tartalma alapján, majd használja a megfelelő képtípust.

2. lecke:

Egyáltalán ne zavarja az SVG-k használatát, ha gyorsan szeretné optimalizálni a képeket. Az az idő, amely a hulladék létrehozásával vesztegeti, nem fog kifizetni (bár nem szabad egyetérteni). A PNG-k használata sokkal gyorsabb lesz, és nem sokkal rosszabb a lemezterület-felhasználás szempontjából.

Használja a WebP-t, amikor több oldalon megjelenő képekkel vagy elég nagy képekkel foglalkozik. Azaz, ha nem tudja automatikusan kezelni a WebP-feldolgozást, amit néhány további eszközzel meg lehet tenni. Ebben az esetben mindenhol használja a WebP-t. Erről másodpercen belül beszélünk.

3. lecke:

Tömörítse a JPG-ket, hogy elérje az elfogadható minőségi szintet a lemezterülettel szemben.

A PNG-ket mindig tömörítse.

4. lecke:

A formatervezéshez használja a megfelelő képméretet.

Hozzon létre törési pontokat.

Hozzon létre ugyanazon kép több verzióját a töréspontok lefedéséhez.

A képek megjelenítéséhez használja az srcset és a size attribútumokat.

5. lecke:

Győződjön meg arról, hogy logói, márkás képei, valamint a hozzászólásokban és az oldalakon használt összes kép készen áll a HiDPI képernyőkre.

6. lecke:

Lusta töltse be a hajtás alatti képeket.

7. lecke:

Helyezze be webhelyét egy kép CDN (Jetpack vagy Optimole) vagy egy általános CDN (MaxCDN / StackPath).

8. lecke:

Kisebb és tömörített képek megjelenítése a felhasználók számára lassabb internetkapcsolaton.

Tudassa velem, mit gondol az egész kihívásról, amellyel a képeket a lehető legnagyobb mértékben optimalizálja az interneten. Továbbá, mit csinál a képeivel, hogy gyorsabban töltsék be őket? Oszd meg a megjegyzésekben.

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

Elrendezés, bemutató és szerkesztés: K Karol.

* Ez a bejegyzés kapcsolt linkeket tartalmaz, ami azt jelenti, hogy ha rákattint az egyik termék linkre, majd megvásárolja a terméket, akkor kis díjat kapunk. De ne aggódjon, továbbra is fizeti a szokásos összeget, így az Ön költsége nem terheli.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector