Slike in hitrost strani: formati, velikosti, lazy loading

Zakaj slike odločajo o času nalaganja

Google piše, da slike pogosto največ prispevajo k skupni velikosti strani, zaradi česar se strani lahko nalagajo počasi in drago. Dva od Core Web Vitals sta neposredno odvisna od slik. Largest Contentful Paint (LCP) meri nalaganje: Google svetuje, naj se največji element pojavi v prvih 2,5 sekunde, odkar se stran začne nalagati. Na mnogih straneh je ta element slika, na primer velika fotografija na vrhu. Cumulative Layout Shift (CLS) meri vizualno stabilnost in naj ostane pod 0,1. Slike, ki prispejo brez rezerviranega prostora, potisnejo besedilo navzdol in zvišajo to vrednost.

Pravi format

• Fotografije: JPEG deluje povsod. WebP in AVIF sta pri podobni kakovosti pogosto opazno manjša.
• Grafike z ostrimi robovi ali prosojnostjo: PNG ali WebP in AVIF, ki sta lahko tudi prosojna.
• Logotipi in ikone: SVG, ker ostane oster pri vsaki velikosti in je običajno zelo majhen.
• Google Iskanje podpira slike v atributu src v formatih BMP, GIF, JPEG, PNG, WebP, SVG in AVIF.

Če ponujaš WebP ali AVIF, lahko JPEG obdržiš kot nadomestek v elementu picture. Brskalnik izbere prvi vir, ki ga razume.

Prava velikost

Slika, široka 2400 slikovnih pik, ki je prikazana v 600 slikovnih pikah, zapravi večino svojih bajtov. Slike izvozi približno v širini, v kateri so prikazane, za ostre zaslone pa približno v dvojni širini. Nato jih stisni. V mnogih programih za slike za fotografije na spletu zadošča nastavitev kakovosti okoli sredine lestvice. Preden zamenjaš izvirnik, preveri rezultat v polni velikosti.

srcset in sizes

Ena datoteka nikoli ne ustreza vsakemu zaslonu. S srcset ponudiš več datotek iste slike in navedeš širino vsake datoteke. S sizes brskalniku poveš, kako široko bo slika prikazana. Brskalnik nato izbere najmanjšo datoteko, ki je dovolj ostra.

<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="…">

V tem primeru slika na ozkih zaslonih zapolni zaslon, na širših pa je široka 700 slikovnih pik. Google priporoča, da v atributu src vedno obdržiš nadomestek. Namesto treh pik napiši pravo nadomestno besedilo.

Width in height proti premikom postavitve

Brez width in height brskalnik ne ve, koliko prostora potrebuje slika, dokler datoteka ne prispe. Besedilo pod njo nato skoči navzdol. Vodnik web.dev o premikih postavitve svetuje: slikam in video elementom vedno dodaj atributa width in height, z velikostjo datoteke v slikovnih pikah ali vsaj s pravilnim razmerjem stranic. Sodobni brskalniki iz teh vrednosti nastavijo privzeto razmerje stranic slike in rezervirajo prostor. V CSS width: 100% in height: auto ohranita sliko prilagodljivo. Če atributov ne moreš nastaviti, vodnik kot alternativo navaja lastnost CSS aspect-ratio.

Lazy loading

Z loading="lazy" brskalnik naloži sliko šele, ko se približa vidnemu območju. To prihrani podatke pri slikah nižje na strani. Google o lazy loadingu pravi: ne dodajaj ga vsebini, ki bo verjetno takoj vidna, ko uporabnik odpre stran. Vgrajeni lazy loading brskalnika je na voljo za slike in iframe.

Slika LCP

Največja slika na vrhu, pogosto naslovna slika ali glavna fotografija izdelka, je najpomembnejša datoteka strani. Vodnik web.dev o LCP pravi: slike LCP nikoli ne nalagaj z lazy loadingom. fetchpriority="high" je za brskalnik namig, naj jo naloži zgodaj. Po vodniku visoka prednost pri več kot eni ali dveh slikah ne pomaga več. Slike, katerih naslov knjižnica skript skriva v data-src ali ki so samo ozadje CSS, brskalnik najde pozno. Za sliko v ozadju vodnik navaja vnaprejšnje nalaganje z link rel="preload" v HTML-ju. AVIF ali WebP in manjša datoteka prav tako skrajšajo čas nalaganja.

Da vidiš, kako se obnesejo tvoje strani, Google napotuje na poročilo Core Web Vitals v Search Console. Za posamezno stran orodja za zmogljivost v tvojem brskalniku pokažejo, kateri element je element LCP in kateri elementi premikajo postavitev. Meri pred spremembo in po njej, da veš, ali je pomagala.

Kratek kontrolni seznam

• Ali se največja slika na vrhu naloži normalno, ne z lazy loadingom?
• Ali ima vsak img width in height ali prostor, rezerviran z aspect-ratio?
• Ali je vsaka datoteka približno tako široka, kot je prikazana, in stisnjena?
• Ali so velike fotografije na voljo v več širinah s srcset in sizes?
• Ali obstajajo datoteke JPEG ali PNG, ki bi lahko bile WebP ali AVIF?

Delo z Do4U

Preverjanje slik prebere eno stran in vsako sliko na njej. Za vsako datoteko poroča format, velikost datoteke in slikovne pike, iz HTML-ja pa width in height, loading, fetchpriority, srcset in sizes, vire v picture ter slike ozadja v atributih style. Do4U iz HTML-ja ugiba verjetno sliko LCP. Ne meri je, ker o dejanskem elementu LCP odloči brskalnik. Dobiš tabelo slik z ugotovitvami, skupno težo in kratek povzetek. Slike, ki jih vstavi JavaScript, in slike ozadja iz zunanjih datotek CSS niso zajete. UI se ne uporablja, preverjanje pa je brezplačno, z dnevno omejitvijo.

Do4U najde namige, ti preveriš in odločiš. Preden spremeniš stran, element LCP potrdi z orodji za zmogljivost v svojem brskalniku.