Azt hiszed, hogy több képek segít több potenciális ügyfelet hoz, ha nem szükséges optimalizálni? Valójában tévedsz, mert igen fontos, képekkel nagyon mélyen kell foglalkozni, mert azok nagyobb befolyást bír az oldalt betöltés sebességi időt, mint bármi más dolgok.
Képeknél a prioritás lista közül az ELSŐ.
Ezért gondoltam leírom részletesen és megosztom veletek amiket tapasztaltam, mert 2016 közepe óta túl sokat foglalkoztam a sebesség optimalizálással és azóta folyamatosan fejlesztem a tudásomat.
1. Átméretezés és kivágás
Először végezzük el az átméretezést
Alap dolog, hogy mindig átméterezni kell, mert többség általábban a legnagyobb felbontású monitornál nagyobb méretű képek szokott lenni, aminek általában 2-3-4-szeresével nagyobb a méret, ezek felesleges lett volna felhasználni az adatmennyiséget és lassúbb lenne..
Mondok egy példát:
Mivel 1920px a legnagyobb felbontású monitor, így ez esetén jó, ha szélességet kb 1400 - 1600 között méretezzük át, ez csak akkor, ha jó minőség van a képen. Ez ellenkező esetében végső megoldásként 1920px-t méretezzük át.
Végül végezzük el a kivágást
Mivel többség amikor átméretezés után az arányilag szerint ugyanis nagy magasság mérete, aminek nem jót tesz a monitor. Mert nagy kép esetén alatta nem fogják észrevenni az ösztönzésre tartalmak, így nagyobb esélye vissza fog lépni, így visszalépési aránya növelni fog, mert nagy magasságú kép lefoglalta az egész monitort és rontana a felhasználói élményt.
Javaslat: magassága ez legyen: 400-700px között. És ezzel természetesen segíti, hogy még több kilobájtot felszabadít.
2. Konvertálás a kiválasztott és a javaslat képformátumokra
- JPEG: Átláthatatlan fényképek (akár 30%-kal több tömörítést takar és képminősége csökkenése nélkül, azaz nem lesz pixeles)
- PNG: Átlátszó háttér (ezt csak akkor érdemes használni, ha van rajta átlátszó háttér, ellenkező esetében JPG-t javaslom, mert PNG kövérebb a kilobájtja)
- SVG: Méretezhető ikonok és formák (3 formátum közül ez a leggyorsabb, de annyi gond van, hogy legtöbb grafikusok egyelőre még nem készíti el a SVG-t)
- GIF: Animációs kép, kevesebb kilobájtot fogyaszt.
A felsoroltak közül gyakrabban JPG formátumot szoktam használni a weboldal gyorsaság érdekében. SVG-t pedig egyelőre logóra vagy ikonokra használom, mert ehhez nem szükséges átméretezni és nem lesznek pixelesek a felnagyításakor. PNG-t az utolsó sorban csak logóra szoktam használni, mást nem, mert sok a kilobájtja van.
3. Új képformátumok
Tavaly óta támogat 3 féle új képformátumot használni:
- WebP
- JPEG 2000
- JPEG XR
Ezek szokottnál kisebb tömörítésű és gyorsabb, sőt az én szívem szerint egy ideig egyelőre még nem használhatjuk, mert ezek sajnos NEM böngészőfüggetlenek…
Megvizsgáltam a Firefox szimulátor böngészőben, amivel lehet manipulálni a verziószámát és ez alatt ellenőrzést végeztem el, hogy jelent-e meg a kép:
https://developers.google.com/speed/webp/gallery1
 |
| 56 esetén |
 |
| 66 esetén |
Mint látjátok, hogy a régebbi verziónál nem jelent meg?!
Ráadásul megnéztem a Google Analytics alatt statisztikát, hogy léteznek-e akik régi verziót használtak az elmúlt 3 hónapban. IGEN vannak, miattuk egyelőre nem akartam belevágni még, mert attól félek, hogy növelni fog a visszalépési arány.
Várni kell egy kicsit, év végén vagy jövőre év elején szóba jöhet, majd a mérések alapján eldöntöm.
Itt meglehet nézni, hogy melyik böngésző (verziószámmal együtt) támogat, melyik nem:
- WebP: https://caniuse.com/#feat=webp
- JPEG 2000: https://caniuse.com/#feat=jpeg2000
- JPEG XR: https://caniuse.com/#feat=jpegxr
4. Compress generátor - Kódolja hatékonyan a képeket
Minden képeknél mindig vannak felesleges minőségek és meta adatok, ezeket fel kéne szabadítani a tömörítéssel, hogy minél kisebb legyen kilobájtja és annál gyorsabb lesz.
Én gyakran ezt használom: TinyPNG generátort. Itt az a gond hogy egy időben max 20db vagy max 5MB-et lehet intézni.
Ha több kép, akkor több időt jut. Ez elkerülése esetében javaslom ezt használni:
Shell scripttel lehet gyorsan intézni, de előtt regisztrálni kell a Tinypng oldalon, azaz PRO-t és akkor kap kulcsot (API KEY), ezt bele kell tenni a SH fájlba és akkor lehet terminálban alkalmazni.
5. Képek betöltés optimalizálás
Azzal segít, hogy csak akkor töltsön be a képeket, ha lefelé görgetni a felhasználó, így azzal lehet spórolni a mobil adatforgalmat, mert különben aki még nem nézte meg lefelé képeket, akkor minek fel lett használva a mobilinternet csomagban foglalt adatmennyiséget?
Ráadásul ennek köszönhetően gyorsabban is fog tölteni be az oldalt.
Rengeteg megoldások vannak, de közül 2db legfontosabb:- Lazy Loading Images
- rel=”preload” Images
CSS Image Sprites:
Ezt egyelőre csak slidereket és head képeket érdemes HTML-ba helyett CSS-ba tárolni a képfájlnevet és ezzel segíti gyorsabban betölteni.
Fontos:
Egyszerű újságszerűen, box-szerűen és bélyegszerűen megjelenve a képek, azok továbbra maradjon a HTML-ba tárolás a ALT és a TITLE tagok miatt szükséges, hogy Google-ban szerepeljenek a találati listában.
6. Hány darab képek vannak az egy oldalon? Mert nem mindegy, elmondom…
Minél több képek, annál több adatforgalmat fogyaszt és lassúbb lesz az oldal. Ezért érdemes felbontani az aloldalakba és oda feltölteni képeket a kategória szerint. A főoldalon pedig elég csak kiválogat és kiemelt kép legyen fent. Mert csak azzal lehet spórolni az oldal betöltési időt meg adatforgalmat.
7. Egyéb javítanivalók
Képeken kívül van még javítani valók is, azok pedig: HTML, CSS, JS, Fonts és még egyéb dolgok. Erről leírtam, itt megtekinthető.
8. Véleményem szerint
Az optimalizált képek gyorsabban töltődnek be, és kisebb mobiladat-forgalommal járnak.
Ez a összes módszert érdemes használni, mert azzal javulni fog a weboldal teljesítménye és megerősíti a mobil felhasználói élményt.
Ennek köszönhetően növelni fog a konverzió, visszatérő látogatók és csökkeni fog a visszalépési aránya, ráadásul növelni fog az üzleti bevétel.
Erről a képek és egyebek optimalizálásáról is írtam cikket, itt megtekinthető
0 Megjegyzések