Kaip sumažinti nuotraukų svorį svetainei ir pagreitinti puslapį

Kodėl paveikslėlių svoris svarbus

Nuotrauka tiesiai iš telefono gali sverti kelis megabaitus. Jei tokią įkelsite į straipsnį, lankytojas mobiliuoju ryšiu turės ją atsisiųsti, nors ekrane ji bus rodoma vos kelių šimtų pikselių pločio. Rezultatas: lėtas puslapis, didesnis išeinančių lankytojų skaičius ir nereikalingai sunaudotas duomenų paketas.

Greitis susijęs ir su Google naudojamais Core Web Vitals rodikliais. Vienas jų yra LCP (Largest Contentful Paint), kuris matuoja, kaip greitai atsiranda didžiausias matomas elementas. Labai dažnai tai yra pagrindinis paveikslėlis, todėl jo svoris tiesiogiai veikia šį rodiklį. Google kaip gerą LCP reikšmę nurodo iki 2,5 sekundės.

Formato pasirinkimas: WebP ar JPG

JPG tinka nuotraukoms ir veikia visur. WebP paprastai duoda mažesnį failą esant panašiai kokybei, dažnai maždaug ketvirtadaliu ar daugiau, o dabar jį palaiko visos populiarios naršyklės. Todėl naujoms svetainėms WebP dažniausiai yra geras numatytasis pasirinkimas.

PNG verta rinktis ekrano nuotraukoms, logotipams ir grafikai su aštriais kraštais ar skaidrumu. Nuotraukos PNG formatu būna neįprastai didelės, todėl jas geriau konvertuoti į JPG arba WebP. Telefonų HEIC failus prieš talpinant į svetainę taip pat reikia konvertuoti.

Kokybės nustatymas

Nuotraukoms su nuostoliais suspaudžiamuose formatuose (JPG, WebP) paprastai pakanka maždaug 75-85 kokybės skalėje nuo 0 iki 100. Žemiau 70 pradeda matytis blokeliai ir pakraščių triukšmas, o aukščiau 90 failas smarkiai išauga, nors akis skirtumo beveik nemato.

Geriausia išbandyti: išsaugokite kelias versijas ir palyginkite jas ekrane tokiu dydžiu, kokiu jos bus rodomos. Paveikslėliai su dideliais vienspalviais plotais ar smulkiu tekstu kompresiją pastebimai parodo anksčiau, todėl jiems gali prireikti aukštesnės kokybės.

Pakeiskite dydį iki rodomo

Suspaudimas be dydžio keitimo yra pusė darbo. Jei paveikslėlis puslapyje rodomas 800 px pločio, nėra prasmės siųsti 4000 px pločio failo. Didelės nuotraukos sumažinimas nuo 4000 iki 1600 px pločio failo svorį sumažina kelis kartus, nes pikselių skaičius krenta kvadratu.

Kad vaizdas būtų ryškus ir didelio tankio ekranuose, paruoškite apie dvigubai didesnį už rodomą plotį variantą. Pavyzdžiui, 800 px pločio vietai gali pakakti 1600 px failo.

Adaptyvūs paveikslėliai ir įkėlimas

Atributas srcset leidžia naršyklei pasirinkti tinkamo dydžio failą pagal ekraną. Pavyzdys:

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

Atributas loading="lazy" nurodo naršyklei paveikslėlį įkelti tik kai vartotojas priartėja prie jo, todėl naudokite jį paveikslėliams žemiau pirmo ekrano. Pagrindinio, pirmame ekrane rodomo paveikslėlio lazy nenaudokite, nes tai gali pabloginti LCP.

Atributai width ir height leidžia naršyklei iš anksto rezervuoti vietą, todėl puslapis nešokinėja kraunantis. Tai sumažina CLS (Cumulative Layout Shift) rodiklį.

Praktinis sąrašas prieš publikuojant

• Paveikslėlis pakeistas iki realiai rodomo pločio (ne didesnio nei maždaug dvigubai).
• Pasirinktas formatas: nuotraukoms WebP arba JPG, grafikai su skaidrumu PNG ar WebP.
• Kokybė apie 75-85, peržiūrėta ekrane.
• Nurodyti width ir height atributai.
• Paveikslėliai žemiau pirmo ekrano turi loading="lazy".
• Failų pavadinimai aprašomi (pvz., kaunas-senamiestis.webp), užpildytas alt tekstas.
• Naršyklės kūrėjų įrankiuose (skirtukas Network) patikrintas faktinis atsisiųsto failo dydis.

Kaip išmatuoti rezultatą

Prieš optimizuodami užsirašykite, kiek sveria puslapis. Naršyklės kūrėjų įrankiuose (F12, skirtukas Network, filtras Img) matysite kiekvieno paveikslėlio dydį ir bendrą jų sumą. Po optimizavimo pakartokite matavimą su išjungtu kešu (Disable cache), kad palyginimas būtų sąžiningas.

Pavyzdys: straipsnyje yra penkios nuotraukos po 3 MB, iš viso apie 15 MB. Jei kiekvieną sumažinsite iki 1600 px pločio ir išsaugosite WebP formatu, kokybė 80, kiekviena dažnai sveria apie 100-250 KB, o visos kartu mažiau nei 1,5 MB. Tikslus skaičius priklauso nuo nuotraukos turinio, todėl visada matuokite pats.

Pabaigai vertėtų prisiminti, kad optimizavimas nėra vienkartinis veiksmas. Kai į svetainę kasdien dedate naujus paveikslėlius, geriausia susikurti nuolatinį įprotį: visada pakeisti dydį, pasirinkti formatą ir tik tada įkelti. Tai užtrunka kelias minutes, o sutaupo daug sekundžių kiekvienam lankytojui ir palengvina paieškos sistemų darbą.

Dažnos klaidos

Pastaba apie skirtingus įrenginius: telefonuose ekranai turi didelį taškų tankį, todėl tas pats paveikslėlis gali atrodyti aštriau nei kompiuterio monitoriuje. Jei galite, peržiūrėkite rezultatą bent dviejuose įrenginiuose, nes kompresijos artefaktai kartais matomi tik viename iš jų. Verta patikrinti ir lėtą ryšį, pavyzdžiui, kūrėjų įrankiuose pasirinkus sulėtintą tinklo profilį.

• Dydis keičiamas tik CSS: jei įkeliate 4000 px failą ir rodote jį 400 px pločio, naršyklė vis tiek atsisiunčia visą failą.
• Pakartotinis suspaudimas: kiekvienas JPG perrašymas prideda nuostolių. Visada eksportuokite iš originalo.
• PNG naudojimas nuotraukoms: failas gali būti kelis kartus didesnis nei JPG ar WebP.
• Lazy loading pirmam paveikslėliui: pagrindinis viršutinis vaizdas turi būti kraunamas iškart.
• Trūksta alt teksto: jis svarbus prieinamumui ir padeda paieškos sistemoms suprasti paveikslėlį.