Kā saspiest attēlus vietnei un paātrināt lapas ielādi

Kāpēc attēlu izmērs ir svarīgs

Fotogrāfija tieši no tālruņa var svērt vairākus megabaitus. Ja to ievietojat rakstā, apmeklētājam ar mobilo savienojumu jālejupielādē viss fails, lai gan attēls tiek rādīts tikai dažus simtus pikseļu platumā. Rezultāts ir lēna lapa, vairāk apmeklētāju, kas aiziet, un veltīgi iztērēti mobilie dati.

Ātrums ir saistīts arī ar Core Web Vitals rādītājiem, ko izmanto Google. Viens no tiem ir LCP (Largest Contentful Paint), kas mēra, cik ātri parādās lielākais redzamais elements. Ļoti bieži tas ir galvenais attēls, tāpēc tā izmērs tieši ietekmē vērtējumu. Google par labu LCP uzskata 2,5 sekundes vai mazāk.

Formāta izvēle: WebP vai JPG

JPG der fotogrāfijām un darbojas visur. WebP ar līdzīgu vizuālo kvalitāti parasti dod mazāku failu, bieži par aptuveni ceturtdaļu vai vairāk, un tagad to atbalsta visas lielākās pārlūkprogrammas. Jaunām vietnēm WebP parasti ir labs noklusējums.

PNG ir pareizā izvēle ekrānuzņēmumiem, logotipiem un grafikai ar asām malām vai caurspīdīgumu. Fotogrāfijas, saglabātas kā PNG, kļūst neparasti lielas, tāpēc pārveidojiet tās par JPG vai WebP. Arī HEIC failus no tālruņiem pirms ievietošanas vietnē vajadzētu pārveidot.

Kvalitātes iestatīšana

Formātiem ar zudumiem (JPG, WebP) fotogrāfijām parasti pietiek ar kvalitāti aptuveni no 75 līdz 85 skalā no 0 līdz 100. Zem apmēram 70 sāk parādīties bloku laukumi un troksnis ap malām, bet virs 90 fails ievērojami pieaug, lai gan atšķirību acs tik tikko pamana.

Labākā metode ir izmēģināt: eksportējiet dažas versijas un salīdziniet tās ekrānā tādā izmērā, kādā tās tiešām tiks rādītas. Attēli ar lielām vienlaidu virsmām vai smalku tekstu saspiešanas artefaktus parāda ātrāk un var prasīt augstāku iestatījumu.

Samaziniet līdz rādītajam izmēram

Saspiešana bez izmēra maiņas ir tikai puse darba. Ja attēls tiek rādīts 800 px platumā, nav jēgas piegādāt 4000 px failu. Lielas fotogrāfijas samazināšana no 4000 uz 1600 px platumu faila izmēru samazina vairākkārt, jo pikseļu skaits krītas proporcionāli platuma kvadrātam.

Lai attēli augsta blīvuma ekrānos paliktu asi, sagatavojiet versiju aptuveni divreiz platāku par rādīto platumu. 800 px vietai parasti pietiek ar 1600 px failu.

Adaptīvie attēli un ielāde

Atribūts srcset ļauj pārlūkprogrammai izvēlēties ekrānam piemērota izmēra failu. Piemērs:

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

Atribūts loading="lazy" liek pārlūkprogrammai attēlu ielādēt tikai tad, kad apmeklētājs ritina tuvu tam, tāpēc izmantojiet to attēliem, kas atrodas zem pirmā ekrāna. Neizmantojiet slinko ielādi galvenajam attēlam, kas redzams augšpusē, jo tas var pasliktināt LCP.

Atribūti width un height ļauj pārlūkprogrammai iepriekš rezervēt vietu, tāpēc lapa ielādes laikā nepārlēkā. Tas uzlabo CLS (Cumulative Layout Shift) rādītāju.

Praktisks kontrolsaraksts pirms publicēšanas

• Attēls samazināts līdz platumam, kādā tas tiešām tiek rādīts (ne vairāk kā aptuveni divreiz lielāks).
• Izvēlēts formāts: WebP vai JPG fotogrāfijām, PNG vai WebP grafikai ar caurspīdīgumu.
• Kvalitāte ap 75 līdz 85, pārbaudīta vizuāli ekrānā.
• Iestatīti atribūti width un height.
• Attēliem zem pirmā ekrāna izmantots loading="lazy".
• Aprakstoši failu nosaukumi (piemēram, kaunas-old-town.webp) un jēgpilns alt teksts.
• Faktiskais lejupielādētā faila izmērs pārbaudīts pārlūkprogrammas izstrādātāju rīkos (cilne Network).

Kā izmērīt rezultātu

Pirms optimizēšanas pierakstiet, cik lapa sver. Pārlūkprogrammas izstrādātāju rīkos (F12, cilne Network, filtrs Img) var redzēt katra attēla un to kopējo izmēru. Pēc optimizēšanas atkārtojiet mērījumu ar atspējotu kešatmiņu (Disable cache), lai salīdzinājums būtu godīgs.

Piemērs: rakstā ir piecas fotogrāfijas pa 3 MB, kopā aptuveni 15 MB. Ja katru samazināsit līdz 1600 px platumam un saglabāsit kā WebP ar kvalitāti 80, katra bieži sver aptuveni 100 līdz 250 KB, bet visas kopā mazāk nekā 1,5 MB. Precīzs skaitlis ir atkarīgs no fotogrāfijas satura, tāpēc vienmēr mēriet pats.

Biežākās kļūdas

• Izmēra maiņa tikai ar CSS: ja augšupielādējat 4000 px failu un rādāt 400 px platumā, pārlūkprogramma tāpat lejupielādē visu failu.
• Atkārtota saspiešana: katra JPG atkārtota saglabāšana pievieno zudumus. Vienmēr eksportējiet no oriģināla.
• PNG izmantošana fotogrāfijām: fails var būt vairākas reizes lielāks nekā JPG vai WebP.
• Pirmā attēla slinkā ielāde: galvenajam attēlam augšpusē jāielādējas nekavējoties.
• Trūkstošs alt teksts: tas ir svarīgs pieejamībai un palīdz meklētājprogrammām saprast attēlu.