Paveikslėliai ir greitis: formatai, dydžiai, lazy loading

Kodėl įkėlimo laiką lemia paveikslėliai

Google rašo, kad paveikslėliai dažnai sudaro didžiausią viso puslapio dydžio dalį, todėl puslapiai gali būti lėti ir brangūs įkelti. Du iš Core Web Vitals rodiklių tiesiogiai priklauso nuo paveikslėlių. Largest Contentful Paint (LCP) matuoja įkėlimą: Google pataria, kad didžiausias elementas pasirodytų per pirmąsias 2,5 sekundės nuo puslapio įkėlimo pradžios. Daugelyje puslapių tas elementas yra paveikslėlis, pavyzdžiui, didelė nuotrauka viršuje. Cumulative Layout Shift (CLS) matuoja vizualinį stabilumą ir turėtų likti mažesnis nei 0,1. Paveikslėliai, kuriems nerezervuota vieta, stumia tekstą žemyn ir didina šią vertę.

Tinkamas formatas

• Nuotraukos: JPEG veikia visur. WebP ir AVIF esant panašiai kokybei dažnai yra gerokai mažesni.
• Grafika su aštriais kraštais ar skaidrumu: PNG arba WebP ir AVIF, kurie taip pat gali būti skaidrūs.
• Logotipai ir piktogramos: SVG, nes jis išlieka ryškus bet kokio dydžio ir paprastai yra labai mažas.
• Google paieška palaiko paveikslėlius src atribute BMP, GIF, JPEG, PNG, WebP, SVG ir AVIF formatais.

Jei siūlai WebP ar AVIF, picture elemente gali palikti JPEG kaip atsarginį variantą. Naršyklė pasirenka pirmą šaltinį, kurį supranta.

Tinkamas dydis

Paveikslėlis, kurio plotis 2400 pikselių, bet rodomas 600 pikselių pločio, didžiąją dalį baitų švaisto veltui. Eksportuok paveikslėlius maždaug tokio pločio, kokio jie rodomi, o ryškiems ekranams – maždaug dvigubai platesnius. Tada juos suspausk. Daugelyje paveikslėlių programų nuotraukoms internete pakanka kokybės nustatymo maždaug skalės viduryje. Prieš pakeisdamas(-a) originalą, patikrink rezultatą visu dydžiu.

srcset ir sizes

Vienas failas niekada netinka visiems ekranams. Su srcset pasiūlai kelis to paties paveikslėlio failus ir nurodai kiekvieno failo plotį. Su sizes pasakai naršyklei, kokio pločio paveikslėlis bus rodomas. Tada naršyklė pasirenka mažiausią pakankamai ryškų failą.

<img src="/img/sofa-800.jpg"
     srcset="/img/sofa-400.jpg 400w, /img/sofa-800.jpg 800w, /img/sofa-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="800" height="533"
     alt="…">

Šiame pavyzdyje siauruose ekranuose paveikslėlis užpildo visą ekraną, o platesniuose yra 700 pikselių pločio. Google rekomenduoja visada palikti atsarginį variantą src atribute. Vietoj trijų taškų parašyk tikrą alternatyvųjį tekstą.

width ir height prieš maketo poslinkius

Be width ir height naršyklė nežino, kiek vietos reikia paveikslėliui, kol neatkeliauja failas. Tada žemiau esantis tekstas šokteli žemyn. web.dev vadove apie maketo poslinkius patariama: paveikslėliams ir vaizdo elementams visada nurodyk width ir height atributus su failo dydžiu pikseliais arba bent teisingu kraštinių santykiu. Šiuolaikinės naršyklės pagal šias vertes nustato numatytąjį paveikslėlio kraštinių santykį ir rezervuoja vietą. CSS kode width: 100% ir height: auto palieka paveikslėlį lankstų. Jei atributų nustatyti negali, vadove kaip alternatyva nurodyta CSS savybė aspect-ratio.

Lazy loading

Su loading="lazy" naršyklė įkelia paveikslėlį tik tada, kai jis priartėja prie matomos srities. Tai taupo duomenis paveikslėliams, esantiems žemiau puslapyje. Google apie lazy loading sako: nenaudok jo turiniui, kuris greičiausiai bus matomas iškart, kai naudotojas atidaro puslapį. Integruotas naršyklės lazy loading veikia paveikslėliams ir iframe elementams.

LCP paveikslėlis

Didžiausias paveikslėlis viršuje, dažnai pagrindinis reklaminis paveikslėlis ar pagrindinė produkto nuotrauka, yra svarbiausias puslapio failas. web.dev vadove apie LCP sakoma: niekada neįkelk LCP paveikslėlio atidėtai (lazy). fetchpriority="high" yra užuomina naršyklei įkelti jį anksti. Pasak vadovo, aukštas prioritetas daugiau nei vienam ar dviem paveikslėliams nebepadeda. Paveikslėlius, kurių adresą skriptų biblioteka paslepia data-src atribute arba kurie yra tik CSS fonas, naršyklė randa vėlai. Fono paveikslėliui vadove nurodomas išankstinis įkėlimas su link rel="preload" HTML kode. AVIF ar WebP ir mažesnis failas taip pat sutrumpina įkėlimo laiką.

Norėdamas(-a) pamatyti, kaip veikia tavo puslapiai, Google nukreipia į Core Web Vitals ataskaitą Search Console. Vienam puslapiui tavo naršyklės našumo įrankiai parodo, kuris elementas yra LCP elementas ir kurie elementai stumdo maketą. Matuok prieš pakeitimą ir po jo, kad žinotum, ar jis padėjo.

Trumpas kontrolinis sąrašas

• Ar didžiausias paveikslėlis viršuje įkeliamas įprastai, ne atidėtai?
• Ar kiekvienas img turi width ir height arba vietą, rezervuotą su aspect-ratio?
• Ar kiekvienas failas maždaug tokio pločio, kokio rodomas, ir suspaustas?
• Ar didelės nuotraukos pateikiamos keliais pločiais su srcset ir sizes?
• Ar yra JPEG ar PNG failų, kurie galėtų būti WebP ar AVIF?

Dirbk su Do4U

„Paveikslėlių patikra“ perskaito vieną puslapį ir kiekvieną jame esantį paveikslėlį. Kiekvienam failui ji nurodo formatą, failo dydį ir pikselius, o iš HTML – width ir height, loading, fetchpriority, srcset ir sizes, picture šaltinius ir fono paveikslėlius style atributuose. Do4U iš HTML spėja, kuris paveikslėlis tikriausiai yra LCP. Jis jo nematuoja, nes tikrąjį LCP elementą nustato naršyklė. Gauni paveikslėlių lentelę su radiniais, bendrą svorį ir trumpą santrauką. JavaScript įterpti paveikslėliai ir fono paveikslėliai iš išorinių CSS failų neįtraukiami. DI nenaudojamas, patikra nemokama, su dienos riba.

Do4U randa užuominų, tu patikrini ir sprendi. Prieš keisdamas(-a) puslapį, LCP elementą patvirtink savo naršyklės našumo įrankiais.