Segíti a webhely teljesítményét.
Javítja a megjelenítést a felhasználó számára.
Jobb rakodási sebességet kap.
A Google jobban szeret.
Mint láthatja, mindez előnyös, ha a képeket a saját webhelyéhez optimalizálja. Nem veszít semmit, csak töltsön rá egy kis időt. Ugyanezt, ugyanazt a folyamatot kell tennie, valami szisztematikusat az összes képével.
Az én esetemben, miután összegyűjtöttem az összes fotót, amelyeket egy mappában fogok használni, megnyitom őket a photoshop eszközzel, és ekkor kezdem az első lépést az optimalizáláshoz.
Azok számára, akik nem használják a photoshopot, vagy nem rendelkeznek ezzel az eszközzel, más alternatívákról fogok beszélni.
Hát térjünk rá. Elkezdtük. 🚀
Képformátum az internethez
Bizonyára már tudod, néhány kiterjesztés, például jpeg, png, gif ... talán nem annyira, ha svg-ről vagy Wbmp-ről beszélünk.
Egyszerű magyarázatként az első három képformátum, amelyek pixelt használnak (ezek a színes négyzetek), mindegyik formátum több vagy kevesebb pixelt használ.
Az SVG esetében ez egy vektoros formátum, amely vonalakat használ. Szeretem ezt a formátumot ikonok, elválasztók és lineáris képek számára.
Megtekintéskor nagyon tiszta és tiszta formátum, bármit nagyíthat, amit csak akar, és nem veszíti el a minőségét, mint a képpontos képek esetében.
És mostanában nagyon divatos a Wbmp formátum, amely a photoshopban már lehetővé teszi a használatát, de amely véleményem és saját tapasztalatom szerint még mindig vannak olyan eszközök és böngészők, amelyek nem olvassák ezt a formátumot és nem mutatják a képet.
A képek optimalizálásának kérdése az, hogy "tiszta" módon dolgozzon, gyorsabbá váljon, és ha optimalizáljuk, az jó lesz a felhasználónknak, a SEO-nak és önmagunknak is. De igen, az egész folyamat, amelyet tisztességes keretek között tanítok meg neked.
Csökkentenie kell a képek méretét és helyét anélkül, hogy elveszítené a minőségét, vagy megnehezítené a böngészők számára.
Ahhoz, hogy jobban megértsd, megtanulunk valami szükségeset tenni, rajongok a fotózásért, és ami a webes tervezést illeti, láttam, hogy a munkámat nem lehet ilyen minőségben tanítani, miért?
Nos, mert a fényképezőgépem 5200 képpontos képeket készít, vagyis együtt látja azt a számítógép 5 képernyőjét, hogy megértsen.
Ezért, ha feltöltöm az internetre, megnyomom és egy olyan dobozba teszem, amelynek van korlátja, mivel a legtöbb esetben korlátozott a szerver szerződésünk, és hogy egy 1 MB kapacitású weboldal kb. 3 másodperc.
Jobban érted így?
Miért érdemes egy nagy fényképet feltölteni, ha azt egy olyan weboldalon nézik meg, amelynek maximális felbontása 1200 képpont, ha a borító képe lenne, ha egy másik szakaszra vonatkozik, akkor 500 képpont elég biztos.
És nem kell ezeket olyan professzionális fényképezőgéppel csinálni, mint az enyém, manapság a mobilok már akár 3000 képpontos képeket is készíthetnek, ezért feltöltésük előtt a mérethez és súlyhoz igazítjuk őket, amire szükségünk lesz.
És honnan tudhatom a szükséges méretet? Itt van egy magyarázó videó, amely bemutatja, hogyan lehet tudni a méretet.
Ha megfelelő méretet adunk meg, csökkentjük a képek súlyát.
Optimalizálja a képeket
Méret
Infographic a webes mérések px-ben
Amint itt láthatja, a képek szélessége és magassága van a képeken. Ha tudjuk, hogy mekkora helyet foglal el az interneten, amint azt az előző videóban kifejtettem, ötletet kaphat, ha más webhelyeket néz meg.
Vagy ha olyan vagy, mint én, aki a web vázlatát megtervezi a Photoshopban, mielőtt átviszi a WordPress-be, akkor már megvan az a mérés, amelyre szükségünk lesz.
Miután megtudtuk a méretet, és van egy dupla vagy hármas képünk. A Photoshop vagy a Gimp ingyenes programját fogjuk használni, amelyet letölthet a saját webhelyéről. Itt
Optimalizálja a képeket a Photoshop segítségével
Optimalizálja a képeket a Gimp segítségével
Ha Windows rendszert használ, van egy ingyenes festékeszköze is, amely lehetővé teszi a képek átméretezését az ablakokban, kiválasztva a képekre alkalmazandó méretet.
Képek súlya
Másrészt a képeknek súlyuk van, és az oldal optimalizálása és gyorsasága szempontjából nagyon fontos, hogy te irányítsd ezt a súlyt, amit a térben elfoglal. És ebben az esetben ez nagyban befolyásolja a betöltési sebességet, amelyben a kép befejezetlen marad.
És mindez arra készteti a Google-t, hogy ne értékelje az Ön weboldalát, és hogy a felhasználónak 30 másodpercig nem kell várnia, amíg betöltődik, és Ön elveszíti az ügyfeleket.
Ebben a szakaszban nincs pontos szabály a kép ideális méretére, minden ahhoz a helyhez kapcsolódik, amelyet az oldalon elfoglal. De ha elmondom, hogy a mega kép szerint vadság. Esetemben nem szoktam hagyni, hogy 150 kb-nál nagyobb súlyúak legyenek. De mint mondtam, vannak kivételek.
A képek tömörítéséhez sok eszközünk van. Mint mindig, most is megmutatom, akivel személyesen dolgozom, akit előzőleg ismerek.
TinyPNG vagy tinyJPEG. Mindkettő online és ingyenes. Korábban az ideális méretet tettem a photoshopba, amint azt az előző videókban láthattuk, mivel ez az eszköz nem teszi lehetővé nagyon nehéz képek feltöltését. A legrosszabb dolog ebben az online eszközben az, hogy korlátozza 20 kép betöltését.
Méret különböző eszközökhöz
Itt van ez a kép, ahol láthatja az eszközök által a weboldal megnyitásához használt szélességet.
Képméretek, amelyeket felhasználhatunk a weboldalon
Ebben az esetben hagyom Önnek azt a sablont, amelyet egy GeneratePress témához használok, amelyet 1140 px teljes képernyős szélességre állítottam be.
Ez az árnyalat nagyon fontos, mivel a kezdeti mérettől függ, amelyet használunk. Ha nem ezt használja, ötletet kaphat.
Plugin az optimalizáláshoz
Mint minden, sok plugin is segít csökkenteni a képek súlyát, még maga a tárhely is rendelkezik ilyennel, de el fogom mondani, hogy minek dolgozom, ami a WP Smush, ez ingyenes, a tárban van WordPress.
Ez a beépülő modul telepíti és elfelejti az optimalizálást, mivel csak a képeket érzékeli és tömöríti. Kényelmes, hogy később megnézi a weboldalt, de az én esetemben, különösen az éttermi weboldalakon, ahol egy tányér étel jobban bejut a szemen keresztül, és jó minőségűnek kell lennie.
Ebben az esetben nem a tynipng-lel optimalizálok, csak a méretét adaptálom a photoshop-ban, és ezzel a pluginnal elfelejtem, és minőségiek maradnak, és a betöltési sebesség nem romlik.
Remélem, megértette a képeihez jól optimalizált weboldal fontosságát, hogy egy kis időt szán az általa használni kívánt méret beállítására. Ez nem valami, amit minden nap meg kell tennie, egyszer elég lesz. Jól csináld a dolgokat, akik félnek a jutalmuktól.
Helyezze be weboldalát ütemterv szerint, optimalizálja képeit, és repüljön első osztályban. 😂😂😂