Képek méretezése és optimalizálása (05:36)

Kiemelt linkek:

• TinyPNG – ingyenes szoftver .png és .jpg képek manuális tömörítéséhez
• Smush Image Compression and Optimization – ingyenes WordPress bővítmény képek automatikus és manuális tömörítéséhez

1. Képek optimalizálása

A képekről már sok szó esett a bejegyzések szerkesztésekor, de most ismét elővesszük őket, mert a weboldalad sebességét illetően igen sok múlik rajtuk, jobban mondva azon, hogy hogyan használod őket.

A képek általában nagyméretű fájlok, és igen sok tárhelyet foglalnak. A nagyméretű fájloknak emiatt „lassú” a letöltése és a megjelenítése.

Ez – főleg a mobilos netezés korában – egyre inkább főbenjáró bűn lesz, hiszen ma már tizedmásodpercekig sem szeretünk várakozni.

Minél gyorsabban, gördülékenyebben működik az oldalunk, annál több érdeklődőt tudunk megtartani.

A képek webes optimalizálása azt jelenti, hogy jó minőségű, de lehetőleg minél kisebb méretű (= kevés tárhelyet elfoglaló) képeket jelenítesz meg a weboldaladon.

Láthattad a listában, hogy vannak olyan dolgok, amelyekre nem igazán tudsz befolyással lenni. A képek használata pont nem ilyen, szóval ha macerásnak tűnik is, akkor is megéri beletenned az idődet!

1.1. Használd a megfelelő pixelméretet!

Vegyünk egy egyszerű példát: egy blogbejegyzésedbe szúrsz be egy képet.

Ilyenkor figyelned kell arra, hogy milyen szélességű a hely, ahova a képet beteszed. Ez egy blogbejegyzésnél általában kb. 700 pixel szokott lenni.

Hiba #1: A hányaveti felhasználó ilyenkor azt csinálja, hogy feltölt egy 1400×600-as képet, mert majd úgyis beállítja, hogy a cikkben közepes méretben jelenjen meg.

(Egy kis súgó: a képek méreténél mindig a szélességet adjuk meg előbb, és a magasságot másodjára, szóval az 1400×600-as kép azt jelenti, hogy 1400 pixel a szélessége, és 600 pixel a magassága.)

Ha gyorsan betöltődő oldalakat szeretnél, akkor pontosan ez az, amit te soha többet nem fogsz megcsinálni.

Ha a kép a célhelyen kb. 700 px szélességben fog megjelenni, és neked van egy 1400×600-as eredetid, akkor tessék lekicsinyíteni méretarányosan 700×300-asra.

Megjegyzés: Akkor szabad például blogbejegyzésben nagyobb képeket használni, ha szeretnéd, hogy kattintásra nagyobb méretben is látható legyen. Ilyenkor feltölthetsz nagyobbat, így ha mondjuk számok, statisztikák vannak rajta, akkor kinagyítva el tudják a látogatók olvasni.

Hiba #2: A másik általános hiba a teljes oldalszélességben használt képeknél jön elő.

Ilyenkor a legtöbben feltöltik nagy méretben a háttérnek szánt eredeti képet, és kihúzzák teljesen az oldal szélességére. Van, aki képes felrakni ide egy 5000×3000-res képet, ami 6-7 megabyte-ot is elfoglal a tárhelyeden. Ilyet se csinálj többet kérlek. 🙂

A teljes oldalszélességben felhasznált képekből 1920 pixel széles képeket tölts fel. A magassága pedig természetesen arányosan alakuljon a megváltoztatott szélességhez.

Ennyi képszerkesztést meg kell tudni tanulni. Én nagyon béna vagyok, de még nekem is sikerült megtanulnom Photoshopban a méretezést. 🙂 Neked még a Photoshopot sem szükséges beszerezned, mert a méretezés egy valamirevaló képszerkesztőben alapfunkció kell, hogy legyen.

A képek átméretezését még azelőtt végezd el, hogy feltöltöd őket a WordPress-be.

1.2. Használd a megfelelő fájltípust!

Főleg .JPG-t vagy .PNG-t használunk, de nekem is sokáig homályos volt, hogy mikor melyiket.

• .JPG-t akkor használj, ha fotót töltesz fel (emberek, tájak stb.).
• .PNG-t pedig akkor, ha logót vagy olyan képet használsz, aminek nem szeretnéd, hogy háttere legyen (ilyenek a körülvágott illusztrációk üres háttérrel).

Más eshetőség nem nagyon van. 🙂

1.3. Feltöltés előtt mindig tömörítsd a képeket!

Minél bonyolultabb egy kép, minél több színt tartalmaz, annál nagyobb lesz az általa igénybe vett tárterület is.

Az optimalizálás során direkt rontunk a képeink minőségén (elég vandálul hangzik, igaz?), de szigorúan csak annyira, hogy a különbség az érzékelés szintjén még ne legyen szembetűnő. Csak a lefoglalt tárterület méretében lesz látványos különbség.

Az eredmény tehát attól lesz optimális, hogy megpróbáljuk megtalálni az elérhető legkisebb képméretet a még elérhető legjobb minőség megtartása mellett.

Ha alapból jó fájlformátumú képet választottál, és azt a célnak megfelelő módon méretezted, akkor még bedobjuk egy ingyenes tömörítőbe, hogy az adatmennyiség szintjén kisebbet varázsoljon belőle.

1.3.1. Képek tömörítése egy külső szoftverrel

Mi egy ingyenesen elérhető külső szoftvert ajánlunk neked, a tinypng-t. Ne csapjon be a neve, szerencsére .JPG-t is tudsz vele tömöríteni.

A használata pofonegyszerű:

1. Kiválasztod a képet (vagy képeket), amit tömöríteni szeretnél.
2. Belehúzod a pandába.
3. Vársz, amíg megcsócsálja és kisebbé teszi. 😀
4. Letöltöd a lekicsinyített képet.
5. Vagy felülírod az eredetit, vagy egy új nevet adsz neki.
6. Feltöltöd az immár tömörített képedet WordPress-be!

Ezekből a lépésekből áll a kézi tömörítés. Kb. fél perccel hosszabb ez a művelet, mint a bővítményes megoldás – amit szintén mindjárt megmutatok -, de mostanra már tudod, hogy érdemes minél kevesebb bővítményt használni.