Ebben a cikkben bemutatjuk azt, hogy hogyan optimalizálhatjátok a képeket WordPress feltöltéshez, illetve átvesszük, hogy miért fontos a kisméretű képek használata.
Ebben a cikkben bemutatjuk azt, hogy hogyan optimalizálhatjátok a képeket WordPress feltöltéshez, illetve átvesszük, hogy miért fontos a kisméretű képek használata.
Tartalomjegyzék
Miért szükséges a képek optimalizálása?
Mivel nem ez a cikkünk főtémája, így csak nagyon röviden foglaljuk össze, hogy miért kell nagy hangsúlyt fektetni a képek optimalizálására. A rövid válasz az, hogy a keresőoptimalizálás és a felhasználói élmény miatt.
A felhasználók egyszerűen nem szeretnek arra várni, hogy egy weboldal betöltsön. A keresőmotorok (például Google) pedig külön figyeli, hogy egy weboldal milyen gyorsan tölt be. Azok az oldalak, amelyek gyorsabban töltenek be, azokat a keresőmotorok jobban kedvelik, így ez is egy döntő faktor abban, hogy egy-egy bejegyzés hányadik helyen jelenik meg a keresőben.
Egy weboldal betöltési idejét sok minden befolyásolja, leginkább a tárhely, a felhasznált szkriptek és a megjelenítendő képek mérete. Ezek közül mindegyikkel érdemes foglalkozni, hogy egy gyorsabb weboldalunk legyen. Jelen cikkben bemutatjuk, hogy mit tehettek azért, hogy a képek mérete ne legyen túl nagy.
Hogyan ellenőrizzem az oldalam sebességét?
Weboldal sebessége több eszközzel is ellenőrizhető, a leggyakrabban használt eszköz a Google PageSpeed Insight eszköze, de a DevTools (jobb klikk a weboldalon bárhol, majd Vizsgálat gomb) is tartalmaz beépített sebességmérőt a Lighthouse fülön.
Ezen oldalak mind nyújtanak ajánlatokat arra vonatkozólag, hogy mit érdemes fejlesztenünk az oldalunkon, hogy gyorsabb betöltést érjünk el. Illetve láthatjuk, hogy mely médiafájlok, képek túl nagy méretűek, ezeket érdemes optimalizálni.
Hogyan optimalizáljam a képeket?
A lehetőségek tárháza szinte végtelen: először is érdemes már feltöltés előtt optimalizálni a képeket, de ha már van egy csomó feltöltött képünk, amelyek optimalizálatlanul kerültek fel, akkor érdemes egy bővítmény tudását segítségül hívnunk. Lent több megoldást is találhattok, melyek között vannak olyan kezdők számára ajánlott opciók is, amelyek elvégzése könnyű, illetve haladók találnak bővítménymentes megoldást is.
Optimalizáljuk a képeket egy képszerkesztővel
Ha használunk valamilyen képszerkesztőt, amelyben megszerkesztjük a képeket, amelyeket később feltöltünk a WordPress oldalunkra, akkor érdemes a kép elmentésekor beleásni magunkat a beállításokba. Ha a kép nem átlátszó, akkor érdemes JPEG formátumot választanunk, és beállítani valamilyen szintű tömörítést. Ha nem fotós oldalt üzemeltetünk, akkor valószínűleg nincs szükségünk tűéles képekre.
A képek méretét nagyon nagymértékben lehet csökkenteni alig észrevehető minőségromlással. Mi a WEBiskolára 100 és 200 kB közötti képeket szoktunk feltölteni. Érdemes nektek is hasonló méretre lecsökkenteni a képek méretét.
Ha esetleg készen álltok egy újabb képformátumra, akkor érdemes a WebP formátummal megismerkednetek.
Optimalizáljuk a képeket egy online képoptimalizálóval
Számtalan olyan képoptimalizáló eszköz van az interneten, amelyekre elég csak feltölteni egy képet, majd pár másodperc elteltével már tölthetjük is lefele az optimalizált, sokkal kisebb méretű képet. Ezek között vannak egyszerűbbek, melyeket nem szükséges állítgatni, illetve vannak olyanok is, ahol megvan a szabadságunk, így állítgathatjuk a rendszert, hogy hány százalékban tömörítsen stb.
Optimalizáljuk a képeket egy WordPress bővítménnyel
Ez az opció kombinálható az első kettővel is, azonban nem érdemes mind a hármat egyszerre használni, hiszen az már túlságosan sok tömörítés lenne egyszerre, így bár a képméret valóban csökkenne, de vele egyidejűleg a minőség is drasztikusan romlana. Így ez a megoldás akkor ajánlott, ha egyik előző megoldást sem használjuk, vagy ha vannak olyan képek a weboldalunkon, amelyeket korábban töltöttünk fel és még nincsenek optimalizálva.
A WordPress bővítmények nagy előnye, hogy nem kell manuálisan dolgoznunk a képek méretének csökkentésén, hiszen minden, ami felkerül a WordPress oldalunk tárhelyére, azt a bővítmény automatikusan (ha úgy állítjuk be) optimalizálja.
Ezen bővítmények legtöbbje nem csak képméret csökkentést garantál, hanem egyéb képekkel kapcsolatos optimalizációkat is, például lusta betöltés (lazy load), WebP konvertálás stb.
WordPress sablon által generált képméretek törlése
A WordPress egyik előnyét könnyen nevezhetjük hátránynak is. A WordPress tartalmaz egy olyan funkciót, hogy minden feltöltött képből több változatot generál különböző méretekben. A pontos mennyiség a választott sablontól függ. Ennek az az előnye, hogy ha egy kis képernyőn nyitják meg az oldalunkat, akkor nem kell egy teljesméretű képet letölteniük, így gyorsabb lesz a betöltési idő. Viszont ebből következik a hátrány is, hiszen, ha minden képből több változat lesz, akkor a képek sokkal többet fognak foglalni, így a tárhely is hamarabb elfogy.
Mi weboldalainkon korlátozni szoktuk a generálandó változatok számát, általában 3 vagy 4 képméret (kicsi, közepes, nagy, esetleg még thumbnail, azaz borítóméret) bőven elég szokott lenni. Ezt legegyszerűbben valamilyen bővítménnyel tehetjük meg, a fenti bővítmények közül több is támogatja ezt, illetve találhatunk dedikált bővítményeket is erre a célra.
Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!
