Hatékony képtömörítés a HW Plus CMS rendszerben

A keresőoptimalizálás egyik alapja a sebesség!

Több cikkünkben is elemeztük már, milyen módszerekkel lehet növelni a weboldalak sebességét és ez milyen hatással van a rangsorolásra. Az egyik ilyen cikkünk külön a képekre tért ki. Bejegyzéseinkben alkalmazásokat is javasoltunk, amelyekkel el lehet végezni a képoptimalizálást, de rá kellett jönnünk, hogy a felhasználók nagy többsége nem tudja elvégezni ezekkel az eszközökkel sem a képméretezéseket és tömörítéseket.

Hiába rettentően fontos elem a képoptimalizálás, a nagy többség kihagyta ezt a lépést a weboldal szerkesztési folyamatából. Vagy azért, mert sok időt vett el, vagy azért, mert nem tudta megtanulni a képszerkesztőkkel való munkát, vagy kihagyott pár lépést, ami egy teljes képoptimalizáláshoz fontos.

Levontuk a tanulságot és úgy döntöttünk ezt a problémát le kell küzdenünk, mégpedig a HW Plus CMS rendszer segítségével.

Ezért két fronton is támadtunk a nagy képek ellen, az egyik a fotógaléria képi elemei, a másik pedig a tartalmi képek.
A fotógalériát a cégek tömeges referenciabemutatásra használják. Minél több kép jelenik meg egy galériában, annál nagyobb lesz a fájl mérete (az adott link megabájtos mérete). Hiába alkalmazzuk azt a technikát, hogy elölnézeti képnek vágott képeket jelenítünk meg, ez a méret akkor is nagy lesz, mert a nyers feldolgozatlan képek fájlmérete is nagy.
Ezért egy ilyen galéria akár több 10MB is lehet.

A Google viszont a nagy méreteket nem tolerálja. Mivel már nem az asztali számítógépek, hanem a mobil eszközök vannak nagyobb többségben, a Google is a mobil eszközökön történő megjelenítésre fektet nagyobb hangsúlyt. Ezért a képek méretének csökkentése rendkívül fontos feladat. Weboldal készítésnél a képoptimalizálásra nem fektetnek hangsúlyt a programozó cégek. Így a HW Plus CMS rendszerrel előnybe kerül más cégekkel szemben!

A HW Plus CMS legújabb verziójában, már lehetőség van a képek méretének csökkentésére.

 

Tartalmi képek méretezése és méret csökkentése

Minden tartalom szerkesztésénél egy új fület talál, képek szerkesztése.

Képtömörítés lépései hw plus cms rendszerében


Erre a fülre kattintva egy felugró ablak, úgynevezett modál jelenik meg, amely négy lépésben segít a kép optimalizálásában.
 

Képtömörítés lépései hw plus cms rendszerében. kép tallózása


ELSŐ LÉPÉS: Tallózzuk ki a képet számítógépünkről vagy mobil eszközünkről. Tallózás után látunk egy elölnézeti képet. Nyomjon a tovább gombra.


MÁSODIK LÉPÉS: Méretezés. Itt tudjuk megadni a kép méretét.

  • A weboldal teljes tartalmi szélessége 1000px. Ha a képet teljes szélességben szeretné megadni akkor 1000px szélességnél ne legyen nagyobb a kép.
  • Ha szöveg mellé igazított fekvő képet alkalmaz akkor javasolt az 500px vagy a 300px szélesség
  • Álló kép esetén elég a kb. 350px magasság a szövegigazításhoz.

A rendszer javasol egy kisebb képméretet, de ez tetszés szerint átírható. Ha az egyik értéket változtatjuk automatikusan változik méretarányosan a másik képméret is (szélesség, magasság).
 

Képméretezés


Ha a méretezéssel megvan nyomjon ismét egy tovább gombot.


HARMADIK LÉPÉS: Átnevezés. Sok cikkünkben foglalkoztunk már a képek megnevezésével. Mindig általános probléma, hogy a képek

  • nem keresőoptimalizált elnevezésűek, pl. DSC113.jpg ahelyett, hogy az lenne a kép elnevezése amit a kép ábrázol, vagy a témához illik.
  • nem karakterhelyes. Weboldalakon a fájlok vagy a képek, nem tartalmazhatnak különleges karaktereket, ékezeteket, szünetjelet. Még ha oda is figyelnek a weboldal tulajdonosai a keresőoptimalizált névre, sokszor nem úgy írják le, ahogy azt helyesen kell. Erre példa:   a DSC113.jpg-t átírják keresőoptimalizált képmegnevezés.jpg-re.


A HW Plus CMS képoptimalizáló modul ebben is segít.


A harmadik lépésben bármilyen tetszés szerinti nevet beírhatunk, a rendszer azonnal átalakítja a megnevezést úgy, hogy az helyes legyen. A rendszer minden esetben kér egy kép nevet. Ezzel kényszeríti a felhasználót, hogy új megnevezést adjon a képnek. Figyeljenek oda, hogy a képnek legyen egy rövid tömör megnevezése, amely a képre jellemző! Ha ugyanazt a nevet szeretné adni két képnek erre is lehetősége van. Ha ugyanazt a nevet adja meg a képnek ami már létezik a szerveren, akkor a rendszer vizsgálatot végez és egy sorszámmal kiegészíti a kép megnevezését.
FIGYELJEN, HOGY A KÉPNÉV KERESŐOPTIMALIZÁT ELNEVEZÉSŰ LEGYEN!
 

Keresőoptimalizált kép megnevezés

Ha végzett, kattintson a tovább gombra!

NEGYEDIK LÉPÉS: Összefoglaló. A művelet befejezésével a kicsinyített kép elérhető lesz a szövegszerkesztő képek menüpontjában, amit onnan már ki is tud tallózni. A művelet befejezése gombra kattintva zárhatja le a képszerkesztési folyamatot!
A művelet végén, a jobb sarokban kap egy összesített információt, ha a sikeresen lezajlott. 
 

Képtömörítés információ


A tesztként feltöltött kép esetén az alábbiakat látjuk.
A kép megnevezése keresooptimalizalt-nev.jpg lett!

Eredeti méret: 5 933.35KB
Szerkesztés után: 12.45KB

99.8%-ára sikerült kicsinyíteni az eredeti fájlt.

A kicsinyített képből 476 db-ot kellene feltölteni ahhoz, hogy az eredeti 1 db kép méretét elérjük! Ez hatalmas csökkenés!

 

Fotógaléria kicsinyítése

A fotógalériák hatalmas méretre tudnak hízni, ugyanis a tartalommal ellentétben nem néhány képet alkalmazunk hanem 10-20-30, vagy akár 100 képet is. Fotógaléria esetén - SEO szempontból -ellentétben a tartalommal a kép megnevezésre nem kell figyelni, ugyanis a HW Plus CMS rendszer a képek megnevezését átírja a galéria megnevezésére. Amire SEO szempontból figyelmet kell szentelni, az a képek ALT és TITLE tagjának kitöltése.

Mi is a képek ALT és TITLE tagja? A weboldalak sebességnövelése és a képoptimalizálás cikkünkben erre részletesebben kitértünk.

Csak egy rövid kitérőt tennénk ezen adatok szerkeszthetőségére.
Ha az adminisztrációs felületen kiválasztotta a fotógalériák menüpontot, azon belül az adott fotógalériát, itt szerkeszthető az ALT és a TITLE tag. Alapértelmezetten ezek az elemek felveszik a fotógaléria nevét, de minden esetben érdemes átírni arra, amiről a kép szól.

Fotógaléria keresőoptimalizálása
 
A szerkesztése roppant egyszerű, csak kattintson a szövegre és azonnal szerkeszthetővé válik!
A fotógalériák optimalizálását a fotógalériák menüpontban találja.

Fotógaléria keresőoptimalizálása
 
A képek optimalizálása gomb megnyomásával a rendszer a fotógalériában lévő összes képet átméretezi maximum 1.000px szélességre / magasságra függően attól, hogy a kép álló vagy fekvő, majd az átalakított képeket kompresszálja.

Ha a művelet kész van, ismét a jobb szarokban lévő zöld értesítésben jelzi a rendszer Önnek!

Feltöltött teszt galéria kompresszálási eredményei:
Eredeti galéria méret: 4280 KB
Kompresszálás után: 532 KB

Nyolcszoros méretcsökkenést értünk el.

Fentebb és előző cikkünkben is bővebben kifejtettük, hogy a képek méretezése és kompresszálása mennyire fontos feladat. A 3.3.0 verziójú CMS rendszertől alapértelmezetten megtalálhatóak ezek a modulok!

Ha Önnek régebbi verziójú a rendszere, vegye fel velünk a kapcsolatot!

 

 

Hasznos volt számodra ez a cikk?
Mondd el mennyire!

Szavazatok száma: 17

Átlagos értékelés: 5.0