Avasin hiljuti ühe potentsiaalse kliendi veebilehe ja jäin ootama. Kuna ootamine tundus liiga pikk, vaatasin Developer Tools’ist järele – avalehel oli pilt, mis “kaalus” 8 MEGAbaiti. See on rohkem kui mõni väiksem koduleht tervikuna!
Piltide optimeerimine on veebilehe omaniku jaoks esmapilgul “tüütu lisakohustus” veebilehe haldamisel – optimeerimise võiks ära teha mingi plugin, eksole? Tõsi, pluginad on omal kohal ja vajalikud ning mingil määral teevadki, sellest veidi hiljem. Samas on oluline mõista põhiprintsiipte optimeerimise taga, teadvustada korra “klassikalised mahud ja mõõtmed ja ühikud” ning siis toimivad ka pluginad paremini – oskad neid õigesti kasutaja ja häälestada. Viimselt tuleb teema ikka kokku äriprotsessi juurde ja see teeb asja aktuaalseks ja tähtsaks – kodulehe piltide küsimus on suuresti määrav, kas Sinu veebileht teenib raha või ajab kliente minema.
Miks peaks pilte optimeerima?
Google paneb tähele. Lehe kiirus on otsene rankingu faktor. Aeglane leht = kehvem koht otsingutulemuses = vähem külastajaid = vähem müüki. Nii lihtne see ongi.
Inimesed ei jaksa oodata. Uuringud näitavad, et kui leht ei laadi 3 sekundi jooksul, läheb pool külastajaid minema. Mobiilis on see veelgi hullem – seal ei viitsi keegi vaadata, kuidas laadimise ring keerleb ja keerleb. Eriti kui ta on kusagil bussis või poest läbi käies ja interneti kiirus pole parim.
Server ja hosting pole tasuta. Suured pildid “söövad” serverite ressurssi. Kui Sul on palju külastajaid ja iga külastaja tõmbab alla megabaidid pilte, siis see mõjutab nii serveri jõudlust kui ka Sinu kulusid. Ja kui kasutad CDN-i (sellest kohe), siis seal on samuti limiidid.
Mis on CDN ja miks see oluline?
CDN ehk Content Delivery Network on selline teenus, mis jagab Sinu veebilehe sisu (sh pildid) üle maailma erinevatesse serveritesse. Kui keegi Eestis Sinu lehte vaatab, laetakse pildid Eesti lähedalt, kui keegi Austraalias – sealt lähedalt. See teeb lehe kiiremaks. Cloudflare pakub tasuta CDN-i ja see on lihtne sisse lülitada – otsi Google’ist “Cloudflare free CDN setup” ja leiad häid juhendeid. Aga kui Sinu pildid on algselt hiigelsured, siis isegi CDN ei päasta – andmeid lihtsalt on liiga palju edasi anda.
Mida tähendab “piltide optimeerimine”?
Siin on kaks asja, mida pead jälgima:
1. Pildi mõõtmed (pikslites)
Kui Sinu lehel kuvatakse pilt 600 piksli laiusena, aga üles on laetud 6000 piksli laiune originaal, siis on pahandus. Brauserid küll vähendavad pilti visuaalselt õige suuruseks, aga kogu see suur fail laaditakse ikkagi alla. See tähendab aeglasemat lehte, suuremat serverikoormust, rahulolematumaid külastajaid.
Lihtne reegel: vaata, mis suuruses pilt ekraanil näha on ja laadi üles maksimaalselt 2x suurem versioon (et Retina ekraanidel oleks terav). Kui pilt on lehel 800px lai, siis 1600px originaal on piisav. Mitte 4000px.
2. Pildi maht (faili suurus)
Sama 800px pilt võib olla kas 50KB või 800KB. Vahe on 16-kordne! Ja kui see on tulnud “otse imelike sätetega fotokaamerast”, siis 8MB! Erinevus tuleneb sellest, kui palju on pilti kompressitud (kokku pakitud) ja millises formaadis (.jpg, .hevc jne) see on.
JPEG-formaat on fotodele hea, kuid vananenud. PNG on vajalik siis, kui Sul on vaja läbipaistvust (näiteks logo). WebP on tänapäeva standard – see on nagu JPEG ja PNG, aga palju väiksema failisuurusega ja sama kvaliteediga. WebP võib olla isegi 30-50% väiksem kui JPEG. Ja loomulikult on veel vektorgraafika failid (.svg), milles kuvatakse näiteks logosid ja mustreid, kuid hetkel tegeleme peamiselt just lehel olevate piltide ja nt e-poe tootefotodega).
Kuidas seda praktikas teha?
Kujunda harjumus, et lased veebilehele üles laetavad fotod alati mõnest veebipõhisest tööriistast läbi. Näiteks TinyPNG, iLoveIMG või lihtsalt google otsing “compress images” ja “resize images”. Kel meeldib arvutis paiknev tarkvara, siis väga vanast ajast toimiv lahendus on “Multiple Image Resizer.net” – seadistad selle korra ära, hiljem tirid vaid pilte sisse ja vajutad nuppu ning teed massilist fotode mõõtmete muutmist. Kui teed nii suuruse muutmist (resize) kui kokkupakkimist (compress), siis enne resize ning seejärel compress.
Kui fotod on veebiserverisse laetud, siis on hea, kui WordPressis on ÜKS (mitte mitu erinevat) fotode serveerimist haldavat pluginat. Näiteks
Imagify, EWWW Image Optimizer või mõni WebP formaati teisendav plugin. Tavaliselt aitab plugin tekitada “lazy-loadi” ehk eel-laadimise ning hoolitseb selle eest, et faili kuvataks kaasaegses kompaktses vormingus, näiteks WebP.
NB: Elementor on super pagebuilder ja ehitame sellega täna 95% lehtedest, kuid palun ära kasuta Elementori enda piltide optimeerimise pluginat – see reklaamib end, aga ei tööta tasuta.
Kokkuvõte
Piltide optimeerimine pole raketiteadus, aga see on osa professionaalsest lähenemisest. Kui tahad, et Google Sind näeks, et inimesed Sinu lehel püsiksid ja et server asjatut koormust ei saaks, siis pildid peavad olema korras. Ei pea olema geniaalne ega maksma pluginate eest – vaja on lihtsalt mõista, mis Sa teed, ja võtta aega selleks, et asjad õigesti teha.
Checklist:
- Enne üleslaadimist muuda pilt õigeks suuruseks (max 2x suurem kui ekraanil näha)
- Compressi üles laetavad fotod kokku. Minu enda soovitatud rusikareegel: Foto max 1920px lai ja max 300kb maht.
- Plugina abil automaatkonverdi WebP formaati
Ja kui tahad, et keegi selle kõigega Sinu eest tegeleks, siis kirjuta – võtame Su veebilehe hooldusesse ning hoiame selle kiire ja kergena.
