Slike i brzina stranice: formati, veličine, lazy loading

Zašto slike odlučuju o vremenu učitavanja

Google piše da slike često najviše pridonose ukupnoj veličini stranice, zbog čega se stranice mogu sporo i skupo učitavati. Dva od Core Web Vitals izravno ovise o slikama. Largest Contentful Paint (LCP) mjeri učitavanje: Google savjetuje da se najveći element pojavi unutar prvih 2,5 sekunde nakon što se stranica počne učitavati. Na mnogim stranicama taj je element slika, na primjer velika fotografija na vrhu. Cumulative Layout Shift (CLS) mjeri vizualnu stabilnost i treba ostati ispod 0,1. Slike koje stignu bez rezerviranog prostora guraju tekst prema dolje i povećavaju tu vrijednost.

Pravi format

• Fotografije: JPEG radi svugdje. WebP i AVIF često su znatno manji uz sličnu kvalitetu.
• Grafike s oštrim rubovima ili prozirnošću: PNG ili WebP i AVIF, koji također mogu biti prozirni.
• Logotipi i ikone: SVG, jer ostaje oštar u svakoj veličini i obično je vrlo malen.
• Google pretraživanje podržava slike u atributu src u formatima BMP, GIF, JPEG, PNG, WebP, SVG i AVIF.

Ako nudiš WebP ili AVIF, JPEG možeš zadržati kao zamjenu u elementu picture. Preglednik bira prvi izvor koji razumije.

Prava veličina

Slika široka 2400 piksela koja se prikazuje u 600 piksela troši većinu svojih bajtova uzalud. Izvezi slike otprilike u širini u kojoj se prikazuju, a za oštre zaslone otprilike u dvostrukoj širini. Zatim ih komprimiraj. U mnogim programima za slike za fotografije na webu dovoljna je postavka kvalitete oko sredine ljestvice. Provjeri rezultat u punoj veličini prije nego što zamijeniš izvornik.

srcset i sizes

Jedna datoteka nikad ne odgovara svakom zaslonu. Sa srcset nudiš nekoliko datoteka iste slike i navodiš širinu svake datoteke. Sa sizes pregledniku kažeš koliko će široko slika biti prikazana. Preglednik tada bira najmanju datoteku koja je dovoljno oštra.

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

U ovom primjeru slika na uskim zaslonima ispunjava zaslon, a na širima je široka 700 piksela. Google preporučuje da uvijek zadržiš zamjenu u atributu src. Umjesto tri točke napiši pravi alt tekst.

Width i height protiv pomaka izgleda

Bez width i height preglednik ne zna koliko prostora slika treba dok datoteka ne stigne. Tekst ispod nje tada skoči prema dolje. Vodič web.dev o pomacima izgleda savjetuje: slikama i video elementima uvijek dodaj atribute width i height, s veličinom datoteke u pikselima ili barem s točnim omjerom stranica. Moderni preglednici iz tih vrijednosti postavljaju zadani omjer stranica slike i rezerviraju prostor. U CSS-u width: 100% i height: auto zadržavaju sliku fleksibilnom. Ako ne možeš postaviti atribute, vodič kao alternativu navodi CSS svojstvo aspect-ratio.

Lazy loading

S loading="lazy" preglednik učitava sliku tek kada se približi vidljivom području. To štedi podatke za slike niže na stranici. Google o lazy loadingu kaže: ne dodaji ga sadržaju koji će vjerojatno biti odmah vidljiv kada korisnik otvori stranicu. Ugrađeni lazy loading preglednika dostupan je za slike i iframeove.

LCP slika

Najveća slika na vrhu, često hero slika ili glavna fotografija proizvoda, najvažnija je datoteka stranice. Vodič web.dev o LCP-u kaže: nikad ne učitavaj LCP sliku s lazy loadingom. fetchpriority="high" pregledniku je naznaka da je učita rano. Prema vodiču visoki prioritet na više od jedne ili dvije slike više ne pomaže. Slike čiju adresu biblioteka skripti skriva u data-src ili koje su samo CSS pozadina preglednik pronalazi kasno. Za pozadinsku sliku vodič navodi predučitavanje s link rel="preload" u HTML-u. AVIF ili WebP i manja datoteka također skraćuju vrijeme učitavanja.

Da vidiš kako se tvoje stranice ponašaju, Google upućuje na izvješće Core Web Vitals u Search Consoleu. Za pojedinačnu stranicu alati za performanse u tvojem pregledniku pokazuju koji je element LCP element i koji elementi pomiču izgled. Mjeri prije i poslije promjene kako bi znao/la je li pomogla.

Kratki kontrolni popis

• Učitava li se najveća slika na vrhu normalno, a ne s lazy loadingom?
• Ima li svaki img width i height ili prostor rezerviran s aspect-ratio?
• Je li svaka datoteka otprilike široka kao prikaz i je li komprimirana?
• Dolaze li velike fotografije u nekoliko širina sa srcset i sizes?
• Postoje li JPEG ili PNG datoteke koje bi mogle biti WebP ili AVIF?

Rad s Do4U-om

Provjera slika čita jednu stranicu i svaku sliku na njoj. Za svaku datoteku prijavljuje format, veličinu datoteke i piksele, a iz HTML-a width i height, loading, fetchpriority, srcset i sizes, izvore u picture te pozadinske slike u atributima style. Do4U iz HTML-a pogađa vjerojatnu LCP sliku. Ne mjeri je, jer o stvarnom LCP elementu odlučuje preglednik. Dobivaš tablicu slika s nalazima, ukupnu težinu i kratak sažetak. Slike koje umeće JavaScript i pozadinske slike iz vanjskih CSS datoteka nisu uključene. AI se ne koristi, a provjera je besplatna, uz dnevno ograničenje.

Do4U pronalazi naznake, a ti provjeravaš i odlučuješ. Prije promjene stranice potvrdi LCP element alatima za performanse u svojem pregledniku.