Képeket szeretne feltölteni WordPress-webhelyére, de nem tudja, milyen méretűek vagy fájltípusúak legyenek a képek? Nem ismeri a képek webes átméretezésének és tömörítésének folyamatát? Ebben a cikkben elmagyarázom, miért fontos a megfelelő képméretezés a webhelye számára, valamint bemutatom, hogyan méretezheti át és tömörítheti a képeket az ingyenes GIMP fotószerkesztővel.
Miért fontos a webhely képeinek átméretezése?
Kezdjük azzal, hogy miért olyan fontos a webhely képeinek átméretezése.
Szerint WordPress.org, a kép általános „fizikai mérete” óriási szerepet játszik a webhely oldalának teljesítményében. „A [egy kép] fájlmérete határozza meg az oldal betöltéséhez szükséges időt; minél nagyobb a fájlméret… annál tovább tart [egy oldal] betöltése.” Más szóval, ha nagy fájlméretet tölt fel a webhelyére, az lelassítja annak az oldalnak a teljesítményét, amelyhez hozzáadja a tartalmat, ami általában lassabb oldalbetöltési sebességként jelenik meg a webhely elemzési adataiban.
„A [egy kép] fájlmérete határozza meg az oldal betöltéséhez szükséges időt; minél nagyobb a fájlméret… annál tovább tart [egy oldal] betöltése.”
-WordPress.org
Az oldal betöltési sebessége, más néven „Page Speed”, az, hogy „milyen gyorsan töltődik be az oldalon lévő tartalom”, a SEO webhely Moz. A lassabb oldalak magasabbvisszafordulási arány”, amely egy divatos mérőszám, amely azokat a munkameneteket mutatja, amelyek során a webhely látogatója egyetlen oldal megtekintése után elhagyja a webhelyet. A lassabb oldalak csökkenthetik azt az időt is, amit a látogatók a webhely oldalain töltenek, mivel az emberek türelmetlenül várják, hogy az oldal tartalma betöltődik, és gyorsabban elhagyják a webhelyet.
Ezek a mutatók azért fontosak, mert általában azt szeretné, hogy a felhasználók több időt töltsenek a webhelyen, és több oldalt nézzenek meg a webhelyén.
Azért is fontosak, mert szerepet játszanak abban, hogy webhelye milyen helyen szerepel a keresőmotorok eredményoldalain, vagyis a „SERP-eken”. SERPs Egyszerűen azok a találati oldalak, amelyek akkor jelennek meg, amikor beír egy szót vagy kifejezést a Google-ba, és megnyomja az Enter billentyűt. Mivel a nagyobb képek rossz webtervezési gyakorlatot jeleznek, és negatívan befolyásolják a webhelyen töltött felhasználói élményt, az olyan keresőmotorok, mint a Google büntetni webhelyére, hogy ezek a nagyobb képek és helyezze webhelyét a jobban teljesítő webhelyek elé.
Minél alacsonyabb helyet foglal el webhelye például a Google-on, annál kisebb a forgalom, és annál nagyobb a forgalom a versenytársakhoz, akik a keresési eredményekben Ön előtt állnak.
A webhelyén lévő képek fájlméretének csökkentésével javíthatja a Page Speed és ezáltal javítani más mutatókat, mint pl visszafordulási arány és a idő oldale, hogy végső soron javítsa helyezéseit a keresőmotorokon.
Vegye figyelembe, hogy sok más fontos változó is befolyásolja a keresési rangsorolást, így a képek javítása csak egy része SEO (Search Engine Optimization) stratégia. Azonban minden bizonnyal nagyon fontos, hogy webhelye magasabb helyezést érjen el az olyan helyeken, mint a Google, és ezzel növelje webhelye forgalmát.
Hogyan lehet átméretezni a képeket a WordPresshez a GIMP-ben
Tehát hogyan lehet megfelelően átméretezni a képeket a WordPress számára?
Csökkentheti a kép fájlméretét egyszerűen a kép teljes méretének csökkentésével skálázás és a növénytermesztés mielőtt feltölti a webhelyére. Ráadásul alkalmazhatja az ún.összenyomás” a képére, hogy tovább csökkentse a méretét.
A GIMP, az ingyenes és nyílt forráskódú fotószerkesztő mindezen feladatokat el tudja végezni, miközben az ajánlott „next-gen” fájlformátumokba exportál, hogy tovább csökkentse a képek fájlméretét és javítsa webhelye teljesítményét.
Méretezze át képét
A folyamat megkezdéséhez nyissa meg a webhelyére feltölteni kívánt képet a GIMP-ben. Ezt megteheti úgy, hogy áthúzza a képet a számítógépéről a GIMP képablakába, vagy egyszerűen lépjen a Fájl>Megnyitás lehetőségre, ha a GIMP-ben van.
Ha a Fájl>Megnyitás módszert használja, a megjelenő „Kép megnyitása” párbeszédpanelen belül keresse meg a kép helyét a számítógépen, majd kattintson duplán a képfájlra, miután megtalálta, hogy megnyissa a GIMP-ben (vagy kattintson a „Megnyitás” gomb a párbeszédablak jobb alsó sarkában).
A GIMP ablakának legtetején található a „Címsor” nevű szolgáltatás (piros nyíl a fenti képen). Itt láthatja a kép jelenlegi méreteit (a képen a nagyított zöld mező). A képem 1920×1280 – az első szám, 1920, a kép szélességét (pixelben), a második szám pedig 1280 a képem magasságát. A képhez használni kívánt végső képméret attól függ, hogy a WordPress-ben hol kívánja használni a képet, valamint attól, hogy milyen témát használ.
Ebben az oktatóanyagban átméretezem a képemet a szabványos 1200 × 630 pixeles méretre, amely a blogbejegyzés képeihez ajánlott.
Ezt szem előtt tartva az első dolgom az, hogy levágom a képet úgy, hogy az eredeti kép képaránya megegyezzen az ajánlott méretű képaránnyal. Ehhez megragadom a vágóeszközt a Shift+c megnyomásával vagy a GIMP Eszköztárban a Vágóeszköz ikonjára kattintva (piros nyíl a fenti képen).
Ezután az eszköz beállításai között bejelölöm a „Rögzített” (zöld nyíl) melletti jelölőnégyzetet, és a legördülő menüre kattintva kiválasztom a „Képarány” lehetőséget (kék nyíl).
A képarány beállításához beírom az „1200:630” szöveget a legördülő menü alatti szövegmezőbe (sárga nyíl). Ez megfelel annak a képaránynak, amelyet az általam javasolt képméretnek szeretném, hogy a végső képem legyen.
A Kivágás eszközzel most rákattintok a képre, és húzom az egeret a vágási terület megrajzolásához. Amikor elengedem az egeret, a vágási területen kívül minden elhalványul (piros nyíl a fenti képen – feltételezve, hogy a „Kiemelés” be van jelölve az Eszközbeállítások között, ami általában alapértelmezés szerint be van jelölve).
Alapértelmezés szerint a vágási területen a segédvonalak „Középvonalak”-ként vannak beállítva (sárga nyíl a fenti képen). Ezt a beállítást az Eszközbeállítások alján található útmutatók legördülő menüjével módosíthatom. Például megváltoztatom az útmutatóimat „Harmadszabályra” (zöld nyíl). A különféle útmutató opciók itt a fényképezési elveken alapulnak, ami megkönnyíti a kompozíció keretezését ezen elvek alapján.
Vigye az egeret a vágási terület (vagyis a fenti képen a piros nyíllal jelölt kiemelt terület) bármelyik oldala vagy sarka fölé, majd kattintson és húzza a vágási terület határának átméretezéséhez. Vegye figyelembe, hogy mindig láthatja a vágási terület méretét az Eszközbeállítások „Méret” mezőiben (a fenti képen zölddel jelölve). A vágási terület teljes mérete nagyobb legyen, mint a kép 1200 × 630-as végső mérete.
A kivágási terület (piros nyíl) közepére kattintva és az egeret húzva is áthelyezheti a kivágást a képen.
Ha készen áll a kép kivágására, kattintson egyszer a vágási területen belülre, és a kép le lesz vágva.
Vegye figyelembe, hogy ha az Eszközbeállítások „Kivágott képpontok törlése” opciója nincs bejelölve (zöld nyíl a fenti képen), az eredeti képhatár továbbra is megjelenik a kép körül egy sárga szaggatott vonallal (piros nyíl). Visszaállíthatja az eredeti képet, így visszavonhatja a kivágást a Kép>Vászon illesztése a rétegekhez menüpontban. A képnek csak a vászonhatáron belüli területe lesz exportálva.
Képünk most a kívánt képarányra van levágva, de ha még egyszer megnézi a képméreteinket a „Címsorban”, látni fogja, hogy a kép 1532×804 (a fenti képen zöld körvonalú és kinagyítva – méretei valószínűleg kissé eltérnek attól függően, hogy mekkora vágási területet rajzolt a képre). Most át kell méreteznünk a képünket, hogy megfeleljen a kívánt méreteknek.
Ehhez lépjen a Kép>Kép méretezése menüpontra (piros nyíl).
A megjelenő „Képméretezés” mezőben a „Képméret” alatt győződjön meg arról, hogy a „szélesség” és „magasság” mezők melletti láncszem ikon össze van kapcsolva (piros nyíl a fenti képen). Ezután módosítsa a kép „szélességét” 1200-ra (zöld nyíl). Nyomja meg a tabulátor billentyűt. A kép magassága automatikusan „630”-ra frissül. A „Minőség” alatt győződjön meg arról, hogy az „Interpoláció” legördülő menü (kék nyíl) „NoHalo” vagy „LoHalo” értékre van állítva a legjobb képminőség érdekében a skálázás után. (Az interpolációval kapcsolatos további információkért, nézd meg oktatóanyagomat a témában).
Nyomja meg a „Scale” gombot a kép méretezéséhez (sárga nyíl).
A méretezés befejezése után ellenőrizze a kép méreteit a címsorban. Most 1200×630 képméretet kell látnia – pontosan azt a méretet, amelyet szeretnénk! Szóval mit csinálunk most?
Tömörítse képét WebP-be exportálással
A kép kivágása és méretezése csökkentette a fájlméretet azáltal, hogy a kép magasságát 1920-ról 1200 pixelre, a szélességét 1280-ról 630-ra csökkentette, de a kép méretét még tovább csökkenthetjük tömörítéssel a kép exportálásakor.
Tehát most olyan fájlformátumba kell exportálnunk a képet, amely tömörítést alkalmaz a képen anélkül, hogy észrevehetően csökkentené a kép minőségét. Bár a JPEG-fájlok mindig jó választási lehetőségek, most egy még jobb lehetőség is elérhető: WebP.
A WebP formátum nagyobb tömörítést alkalmaz, mint a JPEG, miközben kevésbé befolyásolja a kép minőségét, mint a JPEG. Más szóval, jobb megjelenésű képet kaphat kisebb fájlmérettel. Ráadásul a WebP formátumokat mind az 5 legnépszerűbb webböngésző támogatja.
A WebP-be való exportáláshoz lépjen a Fájl>Exportálás másként menüpontra (piros nyíl).
Kattintson bármelyik mappára a „Helyek” részben (zöld körvonallal), és válassza ki azt a képet a számítógépén, ahová menteni szeretné a képet. Egyszerűen kattintson duplán egy mappára a belépéshez, és nézze meg, hogy melyik mappában van a „Mentés mappába” cím mellett (piros nyíl). Ezután nevezze át a képet tetszőlegesre – csak győződjön meg róla, hogy a kép nevét a „.webp” kiterjesztéssel (kék nyíl) fejezi be, hogy a képet WebP formátumba exportálja. Ha készen áll, kattintson az „Exportálás” gombra az ablak jobb alsó sarkában (sárga nyíl).
Ezután megjelenik a „Kép exportálása WebP-ként” párbeszédpanel. Győződjön meg arról, hogy a „Veszteségmentes” jelölőnégyzet nincs bejelölve (piros nyíl). A „Képminőséget” általában 80-ra állítom (kék nyíl – ez egy százalék, tehát minél alacsonyabb a százalék, annál gyengébb lesz a kép minősége, de annál kisebb a képfájl mérete). Ha a kép nem tartalmaz átlátszóságot (azaz háttér nélküli logót), akkor nem kell aggódnia az „Alfa-minőség” csúszka miatt (sőt, egy általam elvégzett kísérletben az alfa-minőséget 100-ról 90-re csökkentettem egy kicsit. az átlátszó hátterű kép fájlméretét 8.50 kb-ról 8.52 kb-ra növelte). A „Forrás típusa” legördülő menüt az „Alapértelmezett” értékre állíthatja.
Ön dönti el, hogy be szeretné-e jelölni valamelyik metaadat-beállítást, beleértve az Exif-adatokat, az ITPC-adatokat és az XMP-adatokat, vagy sem. Az Exif- és XMP-adatok általában a fényképezőgép által hozzárendelt metaadatok, amelyek leírják a fényképével kapcsolatos információkat, például azt, hogy milyen típusú fényképezőgépet vagy milyen típusú objektívet használtak. Az ITPC-t viszont a sajtó képviselői használják, és olyan információkat rendelnek hozzá a képhez, mint a tulajdonjog, a jogok és a licenc. Ha nem tudja, mit tegyen, hagyja bejelölve ezeket a lehetőségeket.
Hasonlóképpen, nyugodtan hagyhatja a „Színprofil mentése” opciót, mivel a legtöbb böngésző automatikusan az sRGB színteret használja a kép megjelenítéséhez, amit a GIMP is használ. Ha más színprofilt használ, hagyja bejelölve. Továbbá, ha attól tart, hogy a kép bizonyos böngészőkben nem jelenik meg megfelelően, a bejelöléssel csak néhány kb-t növeli a kép teljes méretéhez.
Végül a „Miniatűr mentése” opció bejelöletlen maradhat, ami további kilobyte-ot takarít meg.
Kattintson az „Exportálás” gombra (sárga nyíl a fenti képen) a kép WebP formátumba exportálásához. Ha az exportált WebP-fájlt olyan JPEG-fájllal hasonlítjuk össze, amely azonos méretű, és a minősége is „80”-ra van állítva, a WebP-kép körülbelül 30 kb-al, azaz körülbelül 25%-kal kisebb, mint a JPEG.
Mostantól bejelentkezhet a WordPress webhelyére, és navigálhat arra az oldalra vagy bejegyzésre, ahová fel szeretné tölteni a képét, vagy egyszerűen navigálhat a „Média” szakaszhoz a fő navigáció segítségével, és húzza át a képet a Médiatárba. Az én esetemben a fő navigációs vezérlővel (piros nyíl a fenti képen) navigálok a „Bejegyzés” elemre, és a „Blogbejegyzés 1” elemre (kék nyíl) kattintok a blogbejegyzés szerkesztéséhez.
Ezután megnyitom a Bejegyzésbeállítások oldalsávot (piros nyíl), lefelé görgetem a „Kiemelt kép” részhez, és kibontom ezt a részt (kék nyíl). Ezután a képre kattintva lecserélem az új képemre.
A „Fájlok feltöltése” fülre lépek (piros nyíl), és áthúzhatom a képemet a számítógépemről a WordPressbe (kék nyilak).
Végül a „Kiemelt kép beállítása” gombra kattintok a módosítás alkalmazásához (piros nyíl).
Kattintson a „Frissítés” gombra (piros nyíl), hogy frissítse oldalát az új kiemelt képpel.
Ha rákattintok a „Bejegyzés megtekintése” gombra (kék nyíl)…
…most az új kiemelt kép megjelenik a blogom tetején.
Ennyi az oktatóanyag! Ha többet szeretne megtudni egy WordPress webhely tervezéséről, azt javaslom, hogy tekintse meg az oldalamat WordPress 6.0 nem kódolóknak tanfolyam! Vagy ha többet szeretne megtudni a GIMP-ről, nézze meg az én GIMP 2.10 mesterkurzus az Udemy-n!
