Mindenki tudja, hogy egy kép ezer szót ér, és hogy egy weboldal sokat keres azáltal, hogy vannak hozzá kísérő fotók, de igen, mindez igaz, ha az említett képeket jól optimalizálják. Az interneten vándorolva sok olyan weboldalt találunk, amelyek képe nincs optimalizálva. Ez az, hogy túl sok súlyúak, nagyobbak a fióknál, hogy a formátum nem megfelelő. Mindezek a problémák miatt az internet lassabban töltődik be, és mint már mondtam neked ebben a bejegyzésben, ez kihat a helyzetmeghatározásra, ami nagy probléma. Aki Córdobában vagy bárhol máshol a világon web-tervezésnek szenteli magát, annak ellenőriznie kell ezt a szempontot. Ebben a bejegyzésben megtanítalak arra, hogyan optimalizáld a weboldalad képeit, csökkentse a fényképek méretét és súlyát Y hogyan lehet átméretezni egy képet hogy pontosan olyan méretekkel rendelkezzen, amellyel később megjelenik a webhelyén. Ezzel az oktatóanyaggal elkezded megszeretni a Google-t, legalábbis ami a képoptimalizálást illeti. Csináljuk 😉

Miért kell tömörítenie az oldal képeit?

A Google több száz tényezőt vesz figyelembe, amikor a webhelyeket rangsorolja az eredményoldalain. Ezen tényezők között van egy alapvető: a betöltési idő. Minél gyorsabban töltődik be a webhelye, annál jobb. Ennek ellenére nyilvánvaló, hogy minél kevésbé optimalizált fotói vannak, azok súlya nagyobb lesz, ezért hosszabb ideig tart betölteni, ami a pozícionálást károsítja. Szerencsére nagyon könnyű átméretezni a képeket, és ennek következtében csökkenteni lehet a fotók és az egész webhely súlyát.

A weboldalakon található képek mérete: pixel

Mik a pixelek

A pixelek a digitális kép legkisebb egységei. Minden digitális kép egy téglalap, amely bizonyos számú pixelből áll, mindegyik egyszínű. Minél nagyobb a képpontok száma, annál nagyobb a kép. Ezzel szemben minél kevesebb pixel, annál kisebb a kép.

Hogyan lehet megismerni az ideális pixeleket egy webhelyhez

Oké, most, hogy te irányítod, hogy mi a képpont, elgondolkodhatsz azon, hogy hány képpontot kell elhelyezned a képeiden, hogy azok jól kinézzenek az oldaladon. Könnyű kideríteni. Ehhez használhatja a Google Chrome bővítményt. Oldal vonalzónak hívják, és lehetővé teszi, hogy téglalapot rajzoljon az oldalára, és láthassa annak méréseit. Ez segít az internetre már beillesztett terek vagy képek mérésében is. A következő képen megmérem az egyik fotót, amely az ingyenes képbankokban található bejegyzésünket díszíti.

Mint látható, a kép 800 pixel széles és 447 pixel magas. A többi mérés jelzi a kép helyét az oldalhoz képest, a bal felső sarok pedig a 0.0 pixel.

Mi a pixeláció?

Mutatok pár példát. A következő kép 300 × 300 képpont:

útmutató
300 × 300 pixeles fotó

És a következő 500 × 500 képpont:

500 × 500 pixeles fotó

Mint látható, jó minőségűnek tűnnek, de most végezzünk tesztet. Készítem a 300 × 300 képpontos képet, és arra kényszerítem, hogy 500 × 500 képpontra növelje:

Amint láthatja, elveszíti a minőségét, ami úgynevezett pixeláció történik. Ezért az ideális az, ha egy olyan képpel indul, amely legalább akkora méretű, mint amelyet használni szeretne. Ha nagyobb, akkor nem történik semmi, mert a kép méretét mindig minőségromlás nélkül módosíthatjuk. És ez lesz a mi első lépésünk kép optimalizálása.

Végül: ellenőrizze a fényképek valós méretét

A Page Ruler segítségével megismerheti a képek megjelenítési méretét egy weboldalon, de ez nem jelenti azt, hogy a kép valójában akkora lenne. A képek néha kisebbek, mint amilyenek, HTML vagy CSS használatával csökkenthetők. Ez okozza azt a problémát, amelyet az elején mondtam neked, a képek többet nyomnak, mint kellene. A kép méretének megtekintéséhez egy másik kiterjesztést fogok mondani, amely nemcsak ebben, hanem ezer másban is nagyon hasznos lesz. Egy igazi svájci kés Web Developer néven. Kattintson ide a telepítéshez. Miután megkapta, kövesse az alábbi lépéseket:

  1. Kattintson a címsáv mellett megjelenő fogaskerékre, majd a Képek fülre, majd a Megjelenített képméretek elemre. Minden kép felett egy kis méretű plakát jelenik meg.
  2. Vigye az egérmutatót a kép fölé, amelynek méretét ellenőrizni szeretné, és kattintson a jobb gombbal.
  3. Kattintson a Kép megnyitása új lapon.
  4. Ismételje meg az új fület az 1. lépéssel.

Ha a méretek megegyeznek, gratulálunk, akkor a kép megfelelő méretű. Ha nem, akkor van egy problémád, amelyet meg kell oldanod, de ne aggódj, erre szolgál ez a bejegyzés 🙂

A fotó az interneten és a fénykép egy új lapon. Méretek egyeznek.

Ok, már rendelkezik minden információval, amelyet tudnia kell a munka megkezdéséhez, szóval tegyük optimalizálja a képeket mintha nincs holnap.

A kép átméretezése

Az első dolog, amit meg kell tennie, hogy ellenőrizze, hogy a weboldalon lévő képek megfelelő méretűek-e vagy sem. Létfontosságú, hogy mindegyikük megfelelő méretekkel rendelkezzen. Mint már korábban említettem, nem kell semmit sem tennie a jó képekkel (ebben a lépésben), de meg kell változtatnia a fényképek méretét, amelyek nagyobbak, mint amellyel azokat megjeleníti. Ezt az ILoveIMG-lel teszi lehetővé, amely lehetővé teszi csökkentse egy kép méretét online ingyen.

Átméretezze a képeket az ILoveIMG-vel nagyon egyszerű. Csak kattintson a kék gombra "Képek kiválasztása", és válassza ki azokat, amelyeket át szeretne méretezni. A változtatásokat tételenként is elvégezheti, ha mindegyiknek azonos a szélessége vagy a magassága. A két mérés egyikének megadásával a másik arányosan igazodik minden feltöltött képhez. Például, ha azt akarom, hogy a blogbejegyzéseim összes képe 500 pixel széles legyen, feltölthetem az összeset, és kiválaszthatom ezt a szélességet. Automatikusan átméretezi 500 képpont széles és a megfelelő magasság a kép méretarányának megfelelően. Ha nem akarjuk, hogy az arányt tiszteletben tartsák, törölhetjük a "Méretarány fenntartása" négyzet bejelölését. Azt is megakadályozhatja, hogy a beírt méretnél kisebb képek ne legyenek kinagyítva, hogy ne romoljanak a minőségük. Ezt megteheti a "Ne növelje, ha az eredeti kisebb" négyzet bejelölésével.

Opciók átméretezése

Egy másik lehetőség az csökkentse a fényképek méretét százalékban. Ebben az esetben három lehetőséget kínál: 25% -kal, 50% -kal és 75% -kal. Mint láthatja, ebben az esetben nincs lehetősége a kép nagyítására, csak lehet csökkentse a méretet.

Átméretezés százalékkal

Ha kész átméretezni a fényképeket, léphet a következő lépésre kép optimalizálása: tömörítse őket.

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

Mert tömörítse a fényképeket online Két oldalt fogok ajánlani, amelyek lehetővé teszik mindkettőtök számára rosszabb a fénykép minősége. Az egyik ismét az ILoveIMG, a másik pedig a TinyPNG. Miért ajánlok kettőt? Nagyon egyszerű, az általam elvégzett tesztek során az ILoveIMG jobb teljesítményt nyújtott a PNG fájlok optimalizálásához. A TinyPNG azonban növekedett a JPG súlyának csökkentése terén. Ezért a tömörítse a PNG képeket Ajánlom az ILoveIMG-t és a JPG képek tömörítése A TinyPNG-t ajánlom. Ha GIF formátumú képet szeretne optimalizálni, akkor ezt az ILoveIMG-vel is meg kell tennie, mivel a TinyPNG nem támogatja ezt a formátumot.

Ez a panda megeszi a kilobájtokat, ami szép 😀

Mindkét platform nagyon könnyen használható. Csak annyit kell tennie, hogy kiválasztja azt a fotót vagy fényképeket, amelyek felbontását le szeretné tölteni, és a képtömörítő megteszi a többit. Látni fogja azt is, hogy mindkét esetben a fényképek mérete nagymértékben csökken a minőség romlása nélkül. Ebből a szempontból mindketten nagyszerű munkát végeznek.

Fotók kivágása online

Bár ez nem az optimalizálás velejárója, azt szeretném mondani, hogy az ILoveIMG-ben Önnek is lehetősége van vágja le fotóit online. A folyamat olyan egyszerű, mint bármelyik, amelyet már korábban elmagyaráztam nektek.

Csak kattintson a Képek kiválasztása gombra, és feltöltheti fényképeit, és intuitív módon kivághatja őket. Kék téglalap jelenik meg, amelynek sarkaiban és közepén manipulátorok találhatók, és kiválaszthatja a legjobban tetsző kivágást.

Fotó kivágása az ILoveIMG segítségével

Vágás közben jobb oldalon lesz egy panel, amely tartalmazza a kapott kép méréseit. Ez útmutatóként szolgál, ha azt szeretné, hogy a végső méret meghatározott méret legyen pixelben. Akár kézzel is elhelyezheti és átméretezheti a téglalapot, majd később megadhatja a pontos mérést. A téglalap automatikusan alkalmazkodik ehhez a méréshez.

ILoveIMG vágási lehetőségek

Képek tömörítése a beépülő modul használatával (WordPress)

Ha a WordPress alkalmazást használja oldalához vagy blogjához, és már sok képet töltött fel, akkor kissé unalmas lehet, hogy egyenként átnézi a méretet, átméretezi, tömöríti és feltölti ugyanazt az optimalizált fotót. Ezekben az esetekben használhatja a optimalizáló plugin aki gondoskodni fog róla tömörítse és méretezze át a fényképeket automatikusan.

A WPSmush barátunk arra vár, hogy dobjuk a képeit

ajánlom neked WP Smush. Csak telepítenie kell, és el kell kezdenie a képek optimalizálását. Ha az ingyenes verziót használja, akkor "kézzel" kell megtennie. El kell mennie a plugin panelre, és optimalizálnia kell 50x50-es kötegekkel, amíg nem optimalizálja mindazokat, amelyeket már feltöltött. Ezután ellenőrizheti a lehetőséget automatikusan optimalizálja a képeket felmész, így soha többé nem kell aggódnod emiatt.

Ezen opciók bejelölésével a képek feltöltéskor automatikusan optimalizálódnak.

Jobb eredményeket érhet el azonban, ha az előző lépésekben ismertetett eszközökkel csökkenti a fényképek súlyát, mielőtt feltöltené őket. A WP Smush a képek optimalizálásához a WordPress programban rendben van, ha már sokat feltöltöttél, és opcióként arra az esetre, ha valamikor eltévedsz és feltöltenél egy fényképet tömörítés nélkül, de a jó gyakorlat az, hogy a már optimalizált fotókat feltöltöd.

A bejegyzés képei az optimalizálás előtt és után

Ahogy látod, optimalizálja képeit az interneten Ez nem valami bonyolult és szakosodott emberek számára fenntartott, hanem valami, amit könnyedén megtehet. Csak feltétlenül tudnia kell, hogyan kell csinálni, türelem és kitartás ahhoz, hogy az összes fotóval lefolytassa a folyamatot, mielőtt feltöltené azokat az oldalára. Remélem, tetszett ez a bejegyzés, és hasznos volt számodra. Ha igen, értékelje 5 csillaggal, ossza meg, hogy minél több emberhez eljusson, és hagyjon nekem egy megjegyzést, nagyon szeretném tudni, hogy ez szolgált Önnek 🙂