Szükséges-e a képeket optimalizálni, mielőtt azokat feltöltjük a weboldalunkra? Természetesen igen. Hisz gondoljunk bele, manapság már egy olcsóbb-közép kategóriás okostelefonnal készült kép mérete is több megabájt. Ha mindenféle optimalizálás/átalakítés nélkül felrakjuk azt a weboldalunkra, egyrészt előbb-utóbb elfogya tárhelyünk, másrészt pedig rendkívül le tudja lassítani a honlapunkat. És akkor képzeljünk el egy webshop-ot, vagy egy fotós weboldalt, több száz képpel…. Ugye?
Korábban a weboldal gyorsítással kapcsolatos posztomban már írtam a képoptimalizálással kapcsolatban, de az az írás csak érintette a témát. Illetve SEO szempontból is vizsgáltuk már ezt a kérdést. Kicsit egyébként ez is összefügg a SEO-val, hisz ha a nem megfelelően optimalizált képek lassítják az oldalunkat, az bizony nagyban kihat a weboldalunk teljesítményélre is. Igaz ugyan, hogy kibővíthettem volna a korábbi írást ezzel, de úgy gondoltam, megérdemel egy külön bejegyzést. Több ügyfelem már létező weboldalán kellett dolgoznom, és jónéhány esetben a lassú honlap legfőbb oka ez volt.
Tehát ahhoz, hogy a weboldalunkon kép oldalról minden rendben legyen, és megtegyünk mindent annak érdekében, hogy a honlapunk ebből a szempontból is jófej legyen a Google szemében, meg aztán a látogatóink se szenvedjenek a lassú betöltés miatt, röviden az alábbiakra van szükség:
- SEO szempontból megfelelően állítsuk be a képeket.
- Optimalizáljuk a képeket.
Mit jelent a képoptimalizálás?
A képoptimalizálás lényege az, hogy a kép méretét úgy csökkentsük a lehetséges legkisebbre, hogy ne veszítsen a képminőségből. Ez elég bonyolultnak hangzik így elsőre, de szerencsére manapság erre egy csomó plugin vagy ingyenes weboldal van, ami automatikusan megcsinálja ezt helyettünk.
A WordPress weboldalra feltöltött képek megfelelő optimalizálására két lehetőségünk van:
- Feltöltés utáni optimalizálás
- Feltöltés előtti optimalizálás
Feltöltés utáni optimalizálás
Megvallom őszintén, én nem ezt a módszert preferálom. Ha már létező weboldalon kell dolgozni, és fenn van egy csomó kép, nyilván egyszerűbb ez a módszer. 🙂 A feltöltés utáni optimalizálás egyrészt a WordPress saját, beépített szerkesztőjében lehetséges, ahol vágni, illetve átméretezni tudjuk a képeket, másrészt pedig valamilyen pluginnal, ami tömöríti a képet és eltávolítja belőle a felesleges tartalmakat. Vannak kimondottan képoptimalizálásra készült alkalmazások, de a legtöbb cache bővítményben (általában a fizetős verzióban) van beépített képoptimalizáló.
Ha úgy gondolod, hogy inkább feltöltés után optimalizálnál, akkor javaslom, hogy inkább egy komplex bővítményt használj, ami gyorsítja az oldaladat, és mellette a képeidet is optimalizálja. Erre (szerintem) a legjobb bővítmény a Swift Performance. Van lite és pro verzió, a képekhez a pro verzió kell neked. Ja, és magyar program, magyar nyelvű támogatással. Egyébként ha nem képoptimalizálásra, a weboldal gyorsításához szerintem ez egy kötelező kiegészítő. 🙂
Feltöltés előtti optimalizálás
Az esetek 90 százalékában ezt a metódust alkalmazom. Szerintem sokkal jobb előre megcsinálni mindent, hogy utána már csak fel kelljen tölteni a tárhelyünkre, így amikor fel akarjuk használni, csak ki kell választanunk a már optimalizált és feltöltött képet.
0. Előkészítés
Gyakorlatilag itt annyit csinálunk, hogy a képeket átnevezzük, mégpedig úgy, hogy a neve csupa kisbetűből álljon, és ékezeteket nem használunk. Komplex elnevezés esetén a tagokat „-” jellel választjuk el. Például:
ez-egy-kep.jpg
1. Átméretezés
Először is felejtsük el, hogy egy weboldalra 4628*3692 pixel felbontású kép kell. Nem kell. Nincs általános recept, hogy minden képnek X*X felbontásúnak kell lenni a weboldalunkon, egyszerűen meg kell találnunk mindenhova a megfelelő méretet. Például ennek a bejegyzésnek a kiemelt képe 800*600 pixeles, ami bőven elég. Arra figyeljünk oda, hogy a képeket arányosan méretezzük, és az egy helyre/szakaszba/bejegyzésbe szánt képeket érdemes pontosan ugyanolyan méretűre vágni.
Vegyünk erre egy példát:
Van egy képünk, ami mondjuk 4900×3200 pixel felbontású. Ennek a mérete kb. 1,8 megabyte. A képet képszerkesztővel átméretezzük 1200×795 pixelesre, és a kép mérete máris lecsökken 100 kilobyte körülire, ami 94 %-os képméret csökkenést jelent, minimális (szemmel nem látható) minőségromlás mellett!
Mivel méretezzünk?
Rengeteg program található erre szerte az interneten, a teljesség igénye nélkül:
–Adobe Photoshop (fizetős)
–PhotoScape (ingyenes)
-Operációs rendszer beépített szerkesztői (Win, Mac, Linux)
–online méretező (ingyenes)
2. Minőségromlás nélküli tömörítés
Az optimalizálás következő lépése az, amikor a már megfelelően átnevezett és átméretezett, weboldalunkrá szánt képünkből eltávolítunk minden felesleges dolgot. Erre olyan módszert kell alkalmaznunk, hogy mindezt minőségromlás nélkül tudjuk kivitelezni. Szerencsére az interneten erre is van számos megoldás, magunk is egyszerűen meg tudjuk csinálni. Ezt is tudjuk programmal (Adobe Photoshop, Gimp), vagy online, „drag & drop” módszerrel csinálni.
Véleményem szerint erre nem kell külön programot használni, itt van helyette ez:
TinyPNG/TinyJPG
A TinyPNG, és a testvére a TinyJPG weboldalt megnyitjuk, és egyszerűen behúzzuk a fájlokat a megjelölt területre. A weboldal szépen tömöríti a képeinket, majd generál minden kép mellé egy letöltési linket, és egyesével le tudjuk tölteni a képeinket. A link mellé kiírja a kapott kép méretét, és hogy hány százalékos tömörítést értünk el. Az ingyenes verzióba egyszerre 20 képet tudunk optimalizálni.
Összefoglalás
- Kép megfelelő átnevezése
- Kép megfelelő méretre konvertálása, vágása
- Felesleges dolgok eltávolítása
- Feltöltés a weboldalunkra
- Képoptimalizálás SEO szempontból
Természetesen a WPlanningnál a weboldalad vagy webshopod elkészítése során minden egyes kép a leírt módszerrel kerül fel a weboldaladra.
Ha kérdésed van, vagy valamit elírtam, esetleg csak hozzászólnál, ne habozz! 🙂
