Attēli un lapas ātrums: formāti, izmēri, slinkā ielāde

Kāpēc attēli nosaka ielādes laiku

Google raksta, ka attēli bieži veido lielāko daļu no lapas kopējā izmēra, kas var padarīt lapu ielādi lēnu un dārgu. Divi no Core Web Vitals rādītājiem ir tieši atkarīgi no attēliem. Largest Contentful Paint (LCP) mēra ielādi: Google iesaka, lai lielākais elements parādītos pirmo 2,5 sekunžu laikā pēc tam, kad lapa sākusi ielādēties. Daudzās lapās šis elements ir attēls, piemēram, liels fotoattēls lapas augšā. Cumulative Layout Shift (CLS) mēra vizuālo stabilitāti, un tam jāpaliek zem 0,1. Attēli, kas ielādējas bez rezervētas vietas, nobīda tekstu uz leju un palielina šo vērtību.

Pareizais formāts

• Fotoattēli: JPEG darbojas visur. WebP un AVIF līdzīgā kvalitātē bieži ir ievērojami mazāki.
• Grafika ar asām malām vai caurspīdīgumu: PNG vai WebP un AVIF, kas arī var būt caurspīdīgi.
• Logotipi un ikonas: SVG, jo tas paliek ass jebkurā izmērā un parasti ir ļoti mazs.
• Google meklēšana atbalsta attēlus src atribūtā formātos BMP, GIF, JPEG, PNG, WebP, SVG un AVIF.

Ja piedāvā WebP vai AVIF, vari picture elementā paturēt JPEG kā rezerves variantu. Pārlūks izvēlas pirmo avotu, ko tas saprot.

Pareizais izmērs

Attēls, kas ir 2400 pikseļu plats, bet tiek rādīts 600 pikseļu platumā, izšķiež lielāko daļu savu baitu. Eksportē attēlus aptuveni tādā platumā, kādā tos rāda, un asiem ekrāniem aptuveni divreiz platākus. Pēc tam tos saspied. Daudzās attēlu programmās tīmekļa fotoattēliem pietiek ar kvalitātes iestatījumu ap skalas vidu. Pārbaudi rezultātu pilnā izmērā, pirms aizstāj oriģinālu.

srcset un sizes

Viens fails nekad neder visiem ekrāniem. Ar srcset tu piedāvā vairākus viena attēla failus un norādi katra faila platumu. Ar sizes tu pasaki pārlūkam, cik platu attēlu rādīs. Pārlūks tad izvēlas mazāko failu, kas ir pietiekami ass.

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

Šajā piemērā attēls šauros ekrānos aizpilda visu ekrānu, bet platākos ir 700 pikseļu plats. Google iesaka vienmēr paturēt rezerves variantu src atribūtā. Trīs punktu vietā uzraksti īstu alt tekstu.

Width un height pret izkārtojuma nobīdēm

Bez width un height pārlūks nezina, cik daudz vietas attēlam vajag, līdz fails ir ielādēts. Teksts zem tā tad nolec uz leju. web.dev ceļvedis par izkārtojuma nobīdēm iesaka: vienmēr pievieno attēliem un video elementiem width un height atribūtus ar faila pikseļu izmēru vai vismaz pareizo malu attiecību. Mūsdienu pārlūki no šīm vērtībām nosaka attēla noklusējuma malu attiecību un rezervē vietu. CSS kodā width: 100% un height: auto saglabā attēlu elastīgu. Ja nevari iestatīt atribūtus, ceļvedis kā alternatīvu nosauc CSS īpašību aspect-ratio.

Slinkā ielāde

Ar loading="lazy" pārlūks ielādē attēlu tikai tad, kad tas tuvojas redzamajai zonai. Tas ietaupa datus attēliem, kas ir lapā tālāk lejā. Google par slinko ielādi saka: nepievieno to saturam, kas, visticamāk, būs uzreiz redzams, kad lietotājs atver lapu. Pārlūka iebūvētā slinkā ielāde ir pieejama attēliem un iframe elementiem.

LCP attēls

Lielākais attēls lapas augšā, bieži galvenais baneris vai produkta galvenais fotoattēls, ir lapas svarīgākais fails. web.dev ceļvedis par LCP saka: nekad neielādē savu LCP attēlu slinki. fetchpriority="high" ir norāde pārlūkam to ielādēt agri. Saskaņā ar ceļvedi augsta prioritāte vairāk nekā vienam vai diviem attēliem vairs nepalīdz. Attēlus, kuru adresi skriptu bibliotēka paslēpj data-src atribūtā vai kuri ir tikai CSS fons, pārlūks atrod vēlu. Fona attēlam ceļvedis nosauc priekšielādi ar link rel="preload" HTML kodā. AVIF vai WebP un mazāks fails arī saīsina ielādes laiku.

Lai redzētu, kā darbojas tavas lapas, Google norāda uz Core Web Vitals atskaiti Search Console. Atsevišķai lapai pārlūka veiktspējas rīki parāda, kurš elements ir LCP elements un kuri elementi nobīda izkārtojumu. Mēri pirms un pēc izmaiņām, lai zinātu, vai tās palīdzēja.

Īss kontrolsaraksts

• Vai lielākais attēls lapas augšā tiek ielādēts parasti, nevis slinki?
• Vai katram img ir width un height vai vieta rezervēta ar aspect-ratio?
• Vai katrs fails ir aptuveni tikpat plats, cik to rāda, un saspiests?
• Vai lieli fotoattēli ir pieejami vairākos platumos ar srcset un sizes?
• Vai ir JPEG vai PNG faili, kas varētu būt WebP vai AVIF?

Darbs ar Do4U

Attēlu pārbaude nolasa vienu lapu un katru tajā esošo attēlu. Par katru failu tā norāda formātu, faila izmēru un pikseļus, bet no HTML koda width un height, loading, fetchpriority, srcset un sizes, picture avotus un fona attēlus style atribūtos. Do4U no HTML koda uzmin iespējamo LCP attēlu. Tas to nemēra, jo īsto LCP elementu nosaka pārlūks. Tu saņem attēlu tabulu ar konstatējumiem, kopējo apjomu un īsu kopsavilkumu. Attēli, ko ievieto JavaScript, un fona attēli no ārējiem CSS failiem nav iekļauti. AI netiek izmantots, un pārbaude ir bezmaksas, ar dienas limitu.

Do4U atrod norādes, tu pārbaudi un izlem. Apstiprini LCP elementu ar sava pārlūka veiktspējas rīkiem, pirms maini lapu.