Ha egy weboldal lassan töltődik be, akkor az esetek többségében ennek a fő oka az irreálisan nagy méretű képek használata. Ez természetesen rontja a felhasználói élményt és az oldal PageSpeed pontszámát – ezáltal a Google helyezését – is. Sok esetben több megabájt méretű és szükségtelenül magas felbontású képek kerülnek feltöltésre, mert a felhasználó nincs tudatában annak, hogy ezeket méretezni vagy éppen tömöríteni kellene a webre történő elhelyezés előtt. Ennek a problémának megoldására születtek meg az automatikus képtömörítő bővítmények és online, valamint lokális megoldások. WordPress esetén természetesen a legkényelmesebb módszer egy bővítmény használata, itt pedig általában két megoldás versenyez, a WP-Smush és a ShortPixel Image Optimizer. Az előbbiről már írtunk korábban, most viszont az utóbbit vesszük alaposan szemügyre.
A ShortPixel egy romániai székhelyű csapat, ők fejlesztik magát a képtömörítő bővítményt és az ezt kiszolgáló cloud alapú szolgáltatást, amin keresztül maga a tömörítés zajlik. Természetesen létezik saját API a cloud tömörítő használatához, így nem csak WordPress-be, hanem bármilyen más CMS-be vagy saját fejlesztésű kódba is integrálható a szolgáltatás, ami sokaknak igen hasznos lehet.
A folyamat itt is ugyanúgy működik, ahogyan az általában szokott, tehát az általunk a médiatárba feltöltött képeket elküldi a bővítmény a Shortpixel cloud szerverének, az a beállításainktól függően újratömöríti őket, majd visszakapjuk a tömörített, csökkentett méretű változatot, a plugin pedig kicseréli a korábbi verziót az újratömörítettel. Ez természetesen leveszi a terhet a szerverünk/tárhelyünk válláról, hiszen az erőforrás igényes újratömörítés egy külső szerveren történik. Egyetlen hátránya mindössze talán csak annyi, hogy a le/feltöltögetés miatt kicsit tovább tart a művelet, de ez általában elhanyagolható.
A bővítmény egyik nagy előnye a konkurenseivel szemben a támogatott formátumok listája, ez pedig a megszokott JPG, PNG-n túl tartalmazza még a sima és animált GIF-et, valamint a PDF-et is. Ez utóbbi formátum tömörítése is fontos és nem utolsó sorban hasznos, erre pedig eddig kevés használható eszköz létezett WordPress alá.
Ahhoz, hogy elkezdhessük a képeink tömörítését természetesen telepítenünk kell a plugint. Ezt megtaláljuk a hivatalos bővítménytárban a ShortPixel Image Optimizer név alatt, de elérhető a hivatalos honlapon keresztül is. Itt kell kiemelni, hogy természetesen a bővítmény használata ingyenes, azonban alapesetben csak havi 100 kép erejéig. Ha ez a mennyiség nem lenne számunkra elegendő, akkor nagyobb csomagot vagy krediteket kell vásárolnunk. A következő csomag mindössze 4.99 dollár/hó (~1.200 forint), ezért az árért pedig már havi 5.000 képet tömöríthetünk, ami általános felhasználás esetén több, mint elegendő. A WPSzaki olvasói természetesen most sem maradnak exkluzív ajándék nélkül, ugyanis a fejlesztők nagylelkűen a rendelkezésünkre bocsátottak 50%-al több kreditet minden csomaghoz, ennek érvényesítéséhez mindössze EZEN a linken keresztül kell regisztrálni akár az ingyenes, akár valamelyik fizetős csomagra. Így az ingyenes csomag esetében már havi 150 képet tömöríttethetünk, fizetős csomagok esetében pedig a csomag tartalmának +50%-át, tehát a 4.99 dolláros “Short” csomag vásárlása esetén 7.500 képet!
Ha a havi díjas konstrukció nem szimpatikus, akkor vásárolhatunk egyszeri kredit csomagot is, például 10.000 kredit csak 9.99 dollár (~2.500 forint), de ha EZEN a linken keresztül vásárolsz, akkor ezért az árért most 15.000 kreditet kapsz. Ezek alapján valószínűleg minden felhasználó megtalálhatja a számára leginkább megfelelő csomagot, az ingyenes havi 100 (150) kép pedig tökéletesen elegendő a bővítmény tesztelésére vagy akár kisebb oldalak teljes kiszolgálására is.
Telepítés után meg kell adnunk az email címünket, majd a “Request key” gombbal igényelhetünk egy API kulcsot (ha még nem tettük volna meg a weboldalon keresztül). Ez rövidesen meg is érkezik a megadott címre, másoljuk is be az “API key” mezőbe és a “Validate” gombbal hitelesítsük. Amennyiben ez sikerült átirányításra is kerülünk a plugin beállításaihoz (Beállítások / ShortPixel).
Alap esetben nem szükséges ezek módosítása, azonban a legfontosabb opciókat érdemes kicsit tanulmányozni.
A “Compression type” mellett választhatjuk ki a tömörítés típusát. A weboldalak többségénél a “Lossy” típus a megfelelő, ebben az esetben szabad szemmel legtöbbször észrevehetetlen (vagy minimális) lesz a különbség a forrás és a tömörített változat között, a fájlméret azonban jelentősen csökken. Ennek a működését ITT lehet élőben is tesztelni. A “Glossy” opciót abban az esetben érdemes kiválasztani, ha a fotók az oldalunk fő alkotóelemei (például fényképész vagy grafikus weboldala), ilyenkor a fotó minősége változatlan marad a méretcsökkenés mellett. A “Lossless” kiválasztása esetén a tömörített kép pixelpontosan fog megegyezni az eredeti változattal, egyes esetekben szükséges ennek a használata (például vektoros grafikák esetén). Az “Also include thumbnails” kiválasztása esetén a miniatűröket is újratömöríti a rendszer, ami erősen ajánlott, de fontos tudni, hogy ezek is beleszámítanak a kvótába. Az “Image backup” biztonsági mentést készít a meglévő képeinkről és ezeket elmenti egy külön könyvtárba, így bármikor vissza tudunk állni az eredeti verziókra, ha szükséges. A “CMYK to RGB conversion” bekapcsolása esetén automatikusan konvertálja a képeket RGB formátumra, hiszen a weben csak erre van szükség (és az RGB mérete is kisebb). A “Remove EXIF” opció eltávolítja a képekbe ágyazott extra információkat, amit például a telefonok és fényképezőgépek hagynak hátra. Ha ezeket nem használjuk és nem jelenítjük meg az oldalon, akkor érdemes ezt is bekapcsolva hagyni. A “Resize large images” bekapcsolása esetén megadhatunk egy maximum szélességet és hosszúságot amire szeretnénk, hogy a rendszer átméretezze a képeinket. Akkor hasznos, ha korábban sok irreálisan nagy méretű kép került feltöltésre a médiatárba vagy ha nagy méretű képeket tervezünk feltölteni és manuális méretezésre nincs időnk vagy lehetőségünk.
Az “Advanced” fül alatt néhány mélyebb technikai beállítást találunk, például készíttethetünk WebP verziókat a képeinkből ingyenesen és a retina verziókat is optimalizáltathatjuk az “Optimize retina images” bekapcsolásával. Szintén itt tudjuk engedélyezni a PDF-ek tömörítését is az “Optimize PDFs” szekcióban. Érdemes mindkettőt bekapcsolva hagyni. Az “Optimize media in upload” tesz róla, hogy minden újonnan feltöltött kép automatikusan tömörítésre kerüljön a jövőben.
A “Statistics” fül alatt értelemszerűen a bővítmény statisztikáit találjuk, itt érdemes ellenőrizni majd a hatékonyságát (általános tömörítési arány, megspórolt tárhely, megspórolt sávszélesség). Szintén itt találjuk a számunkra elérhető összes és jelenleg szabad kreditet és azt is, hogy ebben a hónapban mennyi képet dolgozott már fel a rendszer. Itt törölhetjük a képek biztonsági mentéseit is (Empty backups).
Ha átnéztük a beállításokat, akkor valószínűleg szeretnénk az eddig feltöltött képeinket újratömöríttetni, ezt meg is tudjuk tenni a “Média / Bulk ShortPixel” menüpont alatt. Itt rögtön láthatjuk is, hogy mennyi képpel fog dolgozni a bővítmény. Ajánlott bekapcsolva tartani a miniatűrök tömörítését is (Include Thumbnails), ennek csak az az egyetlen hátránya, hogy így sokkal több kép kerül átdolgozásra, tehát gyorsabban fogy majd a kreditünk is. A WPSzaki esetében per pillanat 202 eredeti kép található a médiatárban, ha engedélyezem az egyéb méretek tömörítését, akkor azok 1.279-el növelik a számot, a végösszeg így 1.472 kép lesz. A “Start Optimizing” gombra kattintással el is indítható a folyamat és közben látjuk is, hogy éppen melyik képet tömöríti a plugin és milyen hatékonysággal. Amíg dolgozik, addig ne navigáljunk el az oldalról, mert akkor a folyamat megszakad. A WPSzaki.hu-nál kb. 30 percet vett igénybe a képek optimalizálása, az átlagos méretcsökkenés 27% volt “Lossy” beállítás mellett, mindezt úgy, hogy korábban az összes kép már optimalizálva lett az ingyenes WPSmush segítségével.
A végére egy kis összehasonlítás:
A kiindulási alap egy 218 kb-os JPG fotó, ezt tömöríttettem újra először az ingyenes WP-Smush, utána pedig a Shortpixel Image Optimizer pluginnel (Lossy beállítás mellett).
WP-Smush tömörített méret: 213kb (0.6% méretcsökkenés)
ShortPixel tömörített méret: 62kb (47% méretcsökkenés)
1.65 MB-os JPG fotó:
WP-Smush tömörített méret: A teljes méretet nem tudta tömöríteni az 1MB-os korlát miatt
ShortPixel tömörített méret: 322kb (67% méretcsökkenés)
439 kb-os PNG fotó:
WP-Smush tömörített méret: Nem nyúlt hozzá
ShortPixel tömörített méret: 159kb (41% méretcsökkenés)
Azt hiszem ebből a gyors összehasonlításból is látszik, hogy a Shortpixel optimalizáló megoldása igen hatékonyan dolgozik. A tesztelés alatt semmilyen hibát vagy anomáliát nem tapasztaltam és a képek tömörítése is gyorsan lezajlott a háttérben.
A bővítmény jelesre vizsgázott és bátran merem ajánlani minden weboldal tulajdonosnak. Ha pedig nem lenne elegendő az ingyenes havi 100 kredit, akkor regisztrálj a lentebb található link segítségével, ami egyedül csak a WPSzaki olvasóinak került létrehozásra. Ennek segítségével minden csomag kredit tartalma automatikusan 50%-al nő, legyen az akár az ingyenes, akár a fizetős verzió. A 150 kredit több, mint elegendő, hogy ki tudd próbálni a bővítmény működését élesben is, ha pedig bevált és te is hasznosnak találtad, akkor egyszerűen nagyobb csomagra válthatsz és egyúttal támogathatod a fejlesztőket is.
