Honlap tipp: Kisebb képméret, nagyobb sebesség

Miért is jó, ha kisebb a képméret, azaz a kép mérete? Egy honlap betöltési sebessége sokmindentől függ. Ilyen lehet az oldal „alatt futó” kódolások (leginkább JS), a választott szerverünk konfigurációjától és válaszidejétől, az adatbázis lekérdezések optimalizáltságától, egyéb oldalakról beágyazott kódolásoktól és a médiafájlok méretétől. Ha egy oldal rosszul optimalizált, bizony nagyon lassú lehet, mely következtében nemcsak ügyfelektől eshetünk el, de bizony a keresőóriások is „lepontozhatnak”.

Honlap Tipp: kisebb képméret nagyobb betöltési sebesség.
Tipp: Segítek hogy hogyan is optimalizáld képeid méretét!

Tehát a fentiek nagyban befolyásolják nem csak a sebességet, de végeredményében az oldalunk, és esetleg az erre épített vállalkozásunk sikerét is. Nyilván egy megfelelő webmester ezekre figyelni fog, de ha magad építed az oldalt, akkor szinte biztos hogy látókörön kívül esik mindegyik fentebbi pont. Ha már megvan a szervered (szolgáltatód) és feltelepítettél például egy WordPresst, amin netán egy nem túl jól optimalizált sablon fut, plusz megannyi bővítmény is akkor bizony a honlap csigalassú lehet. Ezt azzal tudod megfejelni, ha telefonoddal készített 2-4 mb-os képeket használod az aloldalakon, bejegyzésekben. Viszont, a médiafájlok méretének csökkentésével nagyban segíted a javulást is. S persze a fenti okok közül Te, mint felhasználó vagy honlap tulajdonos nem sok mindenben tud javítani a képméret, videóméret, vagy esetleg a bővítmények csökkentésén túl.

Hogyan optimalizáljam képeimet, videóimat?

Nézzük is tehát a médiafájljaink optimalizálását. Első körben ajánlanám, hogy felejtsük el a szuper okostelefonunkkal készült képeink azonnali használatát. 4 mb-os képek töltési ideje borzasztóan sok. Az ideális körülbelül a 400 Kb. Jogos a kérdés, hogy akkor ezt a méretet hogyan lehet elérni? Már le is szögezem, hogy nem kell hozzá grafikus, webdesigner vagy kiváló fotós. Magunk is tudunk javítani. Akár egy Painttel is. Tehát még csak az Adobe egyik szuperterméke, a Photoshop sem kell az optimalizáláshoz.

Az alábbiakban egy mindenki számára elérhető megoldást fogok vázolni, képekkel együtt. Kezdjük azzal, hogy dobjuk fel a kívánt képeinket a saját gépünkre. Majd nyissuk meg a Paintet (nem kell a Paint 3D, elég a sima is). Ezután nyissuk meg a módosítani kívánt képünket paintban és csökkentsük annak képméretét.

 Itt egy 1,4 Mb méretű és eredetileg 3000×2000 pixeles felbontású kép látszik. Ezt módosítottam 1000×666 –ra. Lentebb az eredmény
A módosítás után a képméret is jelentősen csökkent. Összesen 357 Kb lett a kép mérete. Ez már ideális egy honlap számára.

A modern telefonok képesek akár 2-3000 pixeles (vagy ennél is nagyobb) felbontású képeket is simán készíteni és kezelni, viszont honlapunkra ez a méret irreális. Lehet nyugodtan kisebb, akár 1000×700 px-es, vagy 850×500 px-es kép is. Nem pont ekkora, a lényeg hogy ehhez a mérethez közelíts. Viszont ebben az esetben sem biztos hogy azonnal elérjük a 400 kb körüli méretet, de lényegesen javulni fog, akár 6-700 kb környékére is.

Smush – Egy kis segítség képeink tömörítéséhez.

WordPress esetén javaslom a Smush (innen letölthető) nevű bővítményt. Ez a bővítmény képes tovább tömöríteni a képeinket. A Smush alkalmazásánál nem kell meglepődni, mert bizony kicsit meg fogja növelni a képeink szerverre való feltöltési idejét (nem a honlap betöltési idejét), viszont cserébe közelíteni fogunk a megfelelő képmérethez. Így akár 2-300 Kb-os képeket is képesek leszünk készíteni.

A Smush az egyik személyes kedvencem, de természetesen van más hasonló és kiváló bővítmény is

Amennyiben egy képet kiemeltként szeretnénk használni, akkor érdemes az 1000×700-as mérethez közelít választani, viszont ha csak egy kisképet szeretnénk generálni ami egy cikkben, bejegyzésben fog megjelenni, akkor érdemes mégtovább zsugorítani a méretet. Ezzel szintén segítve az oldalunk gyorsabb betöltésén.

Picit összeszedve a lényeget.

Tehát az ideális honlapsebesség érdekében Te magad is tehetsz. Optimalizálj, és ne hagyd figyelmenkívül a további befolyásoló tényezőt sem. Képeidet illetve azok méretét csökkentsd, használj tömörítési lehetőségeket (nem a WinRar-ra gondoltam 🙂 ). Illetve ha már úgy is optimalizálod képeidet, akkor ékezet nélküli fájlneveket használj.

Nem ördöglakat a történet, viszont rengetege segít és gyorsít honlapodon az ideális képméret.

Tetszett a cikk?

Oszd meg Facebook-on
Tweetelj róla
Oszd meg Linkdin-en is
Dobd ki a Pinterest-re