A Weboldal gyorsítás elsőszámű lépése: kép optimalizálás

Torma Bálint

Ha nagy méreű képeket használsz a weboldaladon az brutálisan lelassítja az oldalbetöltést. Ez pedig gyenge felhasználói élményt okoz valamint, a Google-nek sem tetszik és hátrébb fog sorolni az organikus találatok listáján. Ebben a cikkben megmutatom hogyan lehet mindezt elkerülni és hogyan tudod a mostani képeidet szupergyorsan betöltődő képekekké alakítani.

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)

https://tools.pingdom.com/

vagy

https://gtmetrix.com/

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:

  1. Kép felbontás csökkentésével
  2. 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.

A Weboldal gyorsítás elsőszámű lépése: kép optimalizálás

Ha nagy méreű képeket használsz a weboldaladon az brutálisan lelassítja az oldalbetöltést. Ez pedig gyenge felhasználói élményt okoz valamint, a Google-nek sem tetszik és hátrébb fog sorolni az organikus találatok listáján. Ebben a cikkben megmutatom hogyan lehet mindezt elkerülni és hogyan tudod a mostani képeidet szupergyorsan betöltődő képekekké alakítani.

Olvass tovább »

7 + 1 szemfelnyitó ötlet egy mediátor marketingjének fejlesztésére

Éppen elég nehéz feladat elindítani egy mediátor praxist anélkül is, hogy közben az első számú munkahelyeden is megálld a helyed. Az egyik kedves ügyfelem éppen ebben a helyzetben volt amikor arra kért hogy nézzem át az online marketingjét és gyűjtsem össze a javaslataimat amik előrelépést jelentenének a vállalkozásában. Ebben a cikkben a neki írt e-mailt fogom feldolgozni.

Olvass tovább »

Miben tudnék még segíteni?

  • Marketing stratégia összeállítása
  • Weboldal készítés
  • Facebook hirdetések kezelése
  • Google hirdetések kezelése

Foglalj le egy ingyenes stratégiai konzultációt és beszéljük meg miben tudnálak támogatni.

Email: public[kukac]tormabalint.hu

Tel: +36 70 292 7781