Mérd fel a helyzetet
Ahhoz, hogy megtudd érdemes-e neked ezzel foglalkozni illetve, hogy le tudd mérni a kép optimalizálás eredményességét két oldalsebesség mérőt ajánlanék a fegyemedbe: (elég csak az egyiket használni)
vagy
Kisebb kép = rövidebb betöltési idő
Egy weboldal betöltési idejét legegyszerűbben úgy tudjuk rövidíteni, hogy a weboldal összesített adat méretét csökkentjük (tehát azt hogy hány Megabyte az oldal). A szöveges részeknek elhanyagolható a méretük, a képeknek viszont korántsem, ezért ezeknél érdemes kezdeni.
Két lépésben tudjuk a lehető legminimálisabbra csökkenteni a képméretet:
- Kép felbontás csökkentésével
- Kép tömörítésével
Lássuk az elsőt…
1. lépés: Kép felbontás csökkentés
Teljesen felesleges nagyobb méretben feltölteni egy képet a weboldalra, mint amekkorában meg fog jelenni.
A mérnöki módszer
Mérd le a weboldalon, hogy mekkora méretben jelenik meg a kép. Erre a feladatra ezt a kiegészítőt tudom ajánlani: Page Ruler Redux (feltéve ha Google Chrome-ot használsz). Miután megvan a pontos felbontás, vágd erre a méretre a képet.
Az egyszerű módszer
Tegyük fel, hogy egy blogcikk előnézeti képéről van szó. Én ezeket a képeket a Facebook link típusú poszt előnézeti kép méretéhez szoktam igazítani, ami 1200 x 628. De egyébként a teljes képernyő jellemzően 1920 x 1080-as méretű, tehát ha te olyan képet akarsz feltenni, ami csak az oldal szélességének az egynegyedét tölti ki, akkor nem kell 500 pixelnél szélesebbnek lennie a feltöltött képnek.
2. lépés: Képtömörítés
Ha lejjebb vettük a képfelbontást és elmentettük a végeredményt .jpg kiterjesztéssel (ajánlott ezt használni .png helyett), akkor a következő lépés, hogy feltöltjük valamilyen képtömörítő eszközbe:
https://shortpixel.com/online-image-compression
vagy
https://tinypng.com/
Válaszd ki az egyiket és azt használd. Én a shortpixel-t fogom bemutatni.
Shortpixel használata
3 fül található a jobb sarokban, ezek közül válaszd ki a neked megfelelőt:
- Lossy
Ez a beállítás csökkenti legjobban a képméretet, de egyben látható minőségromlással is járhat. (Sebesség optimalizálás szempontjából ez az ajánlott.) - Glossy
Kevésbé csökkenti a képméretet viszont átlag felhasználó számára nem lesz látható minőségromlás. (Bevallom én ezt szoktam használni olyan képeknél amiknél azt szeretném, hogy szépek maradjanak.) - Lossless
Semmilyen minőségromlás nincs, viszont alig csökken a fájlméret. (Ezt nem érdemes használni.)
Ha feltöltöd a képedet shortpixel-re van lehetőség az előtte / utána verzió összehasonlítására.
Ha csinálsz egy ingyenes regisztrációt az oldalon akkor, néhány korlátozás feloldódik, például, nem egyesével kell letölteni a képeket.
Utolsó lépés
Már csak fel kell tölteni az optimalizált képeket a weboldaladra és lecserélni és a régieket. A nagyméretű már nem használt képeket érdemes törölni, hiszen így a tárhellyel is spórolhatunk.
A régi képeket a médiatárban találod:
Ne felejtsd el újra lemérni valamelyik eszközzel az oldal betöltési sebességét. Ha sikerült 6 másodperc alá bevinni az már nem rossz, de még lehetne rajta dolgozni. Ha 4 másodperc alatt vagy akkor már megnyugodhatsz, de persze még ezen is lehet javítani ha szükséges.
Pro tipp: Ha keresőoptimalizálni is szeretnéd a képeket, akkor a feltöltés előtt érdemes átnevezni úgy, hogy ne legyenek benne ékezetes betűk és a szóközöket helyettesíted kötőjellel, például: “Énekes madarak.jpg” helyett: “enekes-madarak.jpg”.
Természetesen ha lehet a fájl nevében és a kép “helyettesítő szöveg”-ében (alt tag) is legyen benne a kulcsszó amire keresőoptimalizálni szeretnél.
Remélem tudtam segíteni. Természetesen a sebesség optimalizálásnak is vannak további lépései, de erről talán majd egy másik cikkben írok.
