Gyorsabb weboldal képcserével: formátum, méret és betöltés

A túlméretes képek gyakran észrevétlenül lassítanak. Megmutatjuk, hogyan válassz méretet, formátumot és betöltési módot minőségromlás nélkül.

A képek adják sok weboldal letöltési méretének jelentős részét. Egyetlen nagy hero fotó vagy automatikusan eredeti méretben feltöltött galéria elég ahhoz, hogy mobilhálózaton érezhetően lassú legyen az első benyomás.

A megjelenési mérethez exportálj

Egy 400 pixel széles kártyához nincs szükség több ezer pixeles forrásfájl kiszolgálására. Készíts több méretet, és engedd, hogy a böngésző a kijelzőhöz megfelelőt válassza. A helyes szélesség és magasság megadása a tördelés ugrálását is csökkenti.

Válassz korszerű, megfelelő formátumot

Fotóknál a WebP vagy AVIF gyakran kisebb fájlt ad, grafikánál pedig a tartalomtól függően PNG vagy SVG lehet jobb. Ne a fájlkiterjesztés alapján dönts: hasonlítsd össze a valódi méretet és a látható minőséget.

A fontos kép ne várjon feleslegesen

A hajtás feletti fő képet ne töltsd lustán, mert késleltetheti a legnagyobb tartalmi elem megjelenését. Az oldalon lejjebb lévő galériáknál viszont hasznos a lazy loading. Minden változtatást valós mobilnézetben is ellenőrizz.

Gyakorlati ellenőrzőlista

• Listázd az öt legnagyobb letöltött képfájlt.
• Exportálj a tényleges megjelenési mérethez igazodva.
• Adj width és height értéket a képekhez.
• Teszteld a fő képet lassabb mobilkapcsolatot szimulálva.

A következő lépés

Optimalizáld először a főoldal és a legfontosabb landing oldal három legnagyobb képét. Már ez a kis beavatkozás is jól mérhető javulást adhat, utána pedig automatizálhatod az új feltöltések átméretezését.

Ha szeretnéd, hogy a megvalósítást ne egyedül kelljen végigvinned, kérj személyre szabott konzultációt.