Kuidas pilte veebilehe jaoks tihendada ja lehti kiirendada

Miks piltide maht on oluline

Otse telefonist pärit foto võib kaaluda mitu megabaiti. Kui paned selle artiklisse, peab mobiililevi kaudu külastaja selle kogu alla laadima, kuigi seda kuvatakse vaid paarisaja piksli laiuselt. Tulemuseks on aeglane leht, rohkem lahkuvaid külastajaid ja raisatud mobiilsideandmed.

Kiirus on seotud ka Core Web Vitalsiga, mida Google kasutab. Üks neist on LCP (Largest Contentful Paint), mis mõõdab, kui kiiresti ilmub suurim nähtav element. Väga sageli on see element põhipilt, mistõttu selle maht mõjutab tulemust otse. Google kirjeldab head LCP-d kui 2,5 sekundit või vähem.

Vormingu valik: WebP või JPG

JPG sobib fotodele ja töötab kõikjal. WebP annab sama visuaalse kvaliteedi juures tavaliselt väiksema faili, sageli umbes veerandi või rohkem, ja kõik suuremad brauserid toetavad seda nüüd. Uute saitide jaoks on WebP tavaliselt hea vaikevalik.

PNG on õige valik ekraanipiltide, logode ja teravate servade või läbipaistvusega graafika jaoks. PNG-na salvestatud fotod muutuvad ebatavaliselt suureks, seega teisenda need selle asemel JPG-ks või WebP-ks. Ka telefonidest pärit HEIC-failid tuleks enne veebilehele panemist teisendada.

Kvaliteedi seadistamine

Kadudega vormingute (JPG, WebP) puhul piisab fotode jaoks tavaliselt kvaliteedist umbes 75–85 skaalal 0–100. Alla ligikaudu 70 hakkad nägema plokilisi alasid ja müra servade ümber, üle 90 aga kasvab fail palju vahe jaoks, mida silm vaevu märkab.

Parim meetod on proovida: ekspordi mõni versioon ja võrdle neid ekraanil suuruses, milles neid tegelikult kuvatakse. Suurte ühtlaste pindade või peene tekstiga pildid näitavad tihendusvigu varem ja võivad vajada kõrgemat seadet.

Muuda suurus kuvatavaks suuruseks

Tihendamine ilma suuruse muutmiseta on vaid pool tööd. Kui pilti kuvatakse 800 px laiuselt, ei ole mõtet serveerida 4000 px faili. Suure foto vähendamine 4000 px laiuselt 1600 px laiuseks vähendab faili kaalu mitu korda, sest pikslite arv langeb laiuse ruuduga.

Et pildid püsiksid kõrge tihedusega ekraanidel teravad, valmista ette versioon umbes kahekordse kuvatava laiusega. 800 px koha jaoks piisab tavaliselt 1600 px failist.

Adaptiivsed pildid ja laadimine

Atribuut srcset laseb brauseril valida ekraanile sobiva suurusega faili. Näide:

<img src="photo-800.webp" srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="533" alt="Kirjeldus" loading="lazy">

Atribuut loading="lazy" käsib brauseril pildi alla laadida alles siis, kui külastaja selle lähedale kerib, seega kasuta seda piltide jaoks, mis asuvad esimesest ekraanist allpool. Ära laisklaadi ülal nähtavat põhipilti, sest see võib LCP-d halvendada.

Atribuudid width ja height lasevad brauseril ruumi ette reserveerida, nii et leht ei hüppa laadimise ajal. See parandab CLS-i (Cumulative Layout Shift) näitajat.

Praktiline kontrollnimekiri enne avaldamist

• Pildi suurus on muudetud laiuseks, milles seda tegelikult kuvatakse (mitte rohkem kui umbes kaks korda suurem).
• Vorming valitud: WebP või JPG fotodele, PNG või WebP läbipaistvusega graafikale.
• Kvaliteet umbes 75–85, kontrollitud visuaalselt ekraanil.
• Atribuudid width ja height on määratud.
• Esimesest ekraanist allpool olevad pildid kasutavad atribuuti loading="lazy".
• Kirjeldavad failinimed (näiteks tallinna-vanalinn.webp) ja sisukas alt-tekst.
• Tegelik allalaaditud failisuurus on kontrollitud brauseri arendajatööriistades (vahekaart Network).

Kuidas tulemust mõõta

Enne optimeerimist märgi üles, kui palju leht kaalub. Brauseri arendajatööriistades (F12, vahekaart Network, filter Img) näed iga pildi suurust ja nende kogusummat. Pärast optimeerimist korda mõõtmist keelatud vahemäluga (Disable cache), et võrdlus oleks aus.

Näide: artiklis on viis 3 MB fotot, kokku umbes 15 MB. Kui vähendad iga foto 1600 px laiuseks ja salvestad WebP-na kvaliteediga 80, kaalub iga sageli umbes 100–250 KB ja kõik kokku alla 1,5 MB. Täpne arv sõltub foto sisust, seega mõõda alati ise.

Levinud vead

• Suuruse muutmine ainult CSS-iga: kui laadid üles 4000 px faili ja näitad seda 400 px laiuselt, laadib brauser ikkagi kogu faili alla.
• Korduv ümbertihendamine: iga JPG uuesti salvestamine lisab kadusid. Ekspordi alati originaalist.
• PNG kasutamine fotode jaoks: fail võib olla mitu korda suurem kui JPG või WebP.
• Esimese pildi laisklaadimine: ülal olev põhipilt peaks laadima kohe.
• Puuduv alt-tekst: see on oluline ligipääsetavuse jaoks ja aitab otsingumootoritel pilti mõista.