Útmutató a fényképek online tömörítéséhez, kivágásához és kicsinyítéséhez
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:
É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:
- 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.
- Vigye az egérmutatót a kép fölé, amelynek méretét ellenőrizni szeretné, és kattintson a jobb gombbal.
- Kattintson a Kép megnyitása új lapon.
- Ismételje meg az új fület az 1. lépéssel.