Optimalizálja a képek használatát egy weboldalon
A webhely lassúságának első számú oka a betöltött adatok mennyiségével függ össze. Ebben a nyilvántartásban a legigényesebb tétel kétségtelenül a képeket érinti.
Mint a cikkben láttuk Miért érdemes optimalizálni egy weboldalt ?, javítsa egy oldal oldalbetöltési sebességét legalább 4 közvetlen hatással: a látogatók számával, a hivatkozások felhasználásával, gazdasági haszonnal és valós környezeti hatással.
Intuitív módon megértjük, hogy a lassúság első számú oka a betöltött adatok mennyiségével függ össze. Ebben a regiszterben a legkomorúbb tétel kétségtelenül a képeket érinti. Vizsgáljuk meg az optimalizálás lehetséges útjait, és meglepődve látja majd a lehetséges nyereség mértékét.
Kép szükséges ?
De kezdjük egy naivnak tűnő kérdéssel: kellenek képek? ?
Meglepő, hogy egyes esetekben a képeket szilárd felületek, például oldalháttér, szalaghirdetés vagy menü háttér színezésére használják. Például egy szilárd 20 képpontos négyzet alakú ismétlődő végtelen, mint oldal háttér egyenértékű legalább 100 bájttal, míg a CSS háttér tulajdonság használatával csak 30-at fogyaszt. E két megközelítés között legalább 60% -os előny egyenértékű renderelés. Első tanácsom tehát: vadászzon felesleges képeket !
Nagyon hasonló módon ne kezelje a képek margóit a háttérszín szilárd szegélyének hozzáadásával. Előnyben részesítsen egy sokkal diétásabb megközelítést a CSS margó és a kitöltési attribútumok használatával.
Válassza ki a megfelelő képformátumot
Ezután vegye figyelembe, hogy csak három képformátum életképes a webhelyek számára:
- jpg (vagy jpeg mert Közös fényképészeti szakértői csoport): ez a formátum akár 16 millió színt képes kezelni, és csak speciális grafikákhoz, kiváló minőségű képekhez vagy fotókhoz használható.
- gif (a Grafikus csereformátum): ez a formátum maximum 256 színt támogat, de támogatja az átlátszóságot, vagy egyszerű animációk összeállítását teszi lehetővé. Használata ezért ideális.
- png (a Hordozható hálózati grafika): ez a formátum legfeljebb 16 millió színt képes kezelni, valamint az átlátszóság különböző szintjeit . Ezért gyakorlatilag minden vizuális javításra alkalmas.
Ne feledje azonban, hogy nem minden böngésző natív módon támogatja a png formátumot (különösen az Internet Explorer a 7 alatti verziók esetében), és előfordulhat, hogy megfelelő hackeket kell használnia [1]. De a StatCounter által készített statisztikák szerint ez jóval a használt böngészők 3,76% -át teszi ki (a W3Scools.com esetében ez 0,3%).
A png formátum általában biztonságos fogadás, de az ikonikus képek esetében, amelyek nem igénylik az átlátszóság használatát, szánjon időt a jpg és a png verzió összehasonlítására is, amelyek néha 10-ből eltéréseket okozhatnak.