Paveikslėlių optimizavimas: praktinis 2026 m. vadovas
Paveikslėliai paprastai yra sunkiausias dalykas žiniatinklio puslapyje, todėl jie ir yra didžiausia našumo galimybė, kurią dauguma svetainių palieka neišnaudotą. Gerai juos optimizavus — tinkamas formatas, tinkamas dydis, pateiktas tinkamu būdu — puslapio svoris dažnai sumažėja perpus ir tiesiogiai pagerėja jūsų Core Web Vitals.
Trumpai
Pateikite modernius formatus (AVIF arba WebP) su JPEG atsargine parinktimi, sumažinkite paveikslėlius iki dydžio, kuriuo jie realiai rodomi, naudodami srcset, atidėkite (lazy-load) viską žemiau matomos srities, protingai suspauskite ir visada nurodykite width bei height, kad išvengtumėte išdėstymo šuolių. Atlikite patikrą, kad pamatytumėte, kokie sunkūs jūsų paveikslėliai.
1. Pasirinkite tinkamą formatą
Formatas yra didžiausias svertas. Priderinkite jį prie paveikslėlio rūšies:
| Formatas | Geriausia | Pastabos |
|---|---|---|
| AVIF | Nuotraukos, sudėtingi vaizdai | Mažiausi failai; puiki kokybė vienam baitui |
| WebP | Nuotraukos, grafika | Mažesnis nei JPEG/PNG; beveik visuotinis palaikymas |
| JPEG | Nuotraukos (atsarginis) | Visuotinis; naudokite kaip atsarginį senesnėms naršyklėms |
| PNG | Grafika, kuriai reikia skaidrumo | Be nuostolių, bet didelis; kur įmanoma, rinkitės WebP/AVIF |
| SVG | Logotipai, ikonos, linijinė grafika | Vektorinis, mastelis begalinis, mažytis paprastoms formoms |
Naudokite <picture> elementą, kad pirmiausia pasiūlytumėte AVIF, tada WebP, tada JPEG atsarginį variantą, leisdami kiekvienai naršyklei pasirinkti geriausią palaikomą formatą:
<picture>
<source srcset="/img/hero.avif" type="image/avif">
<source srcset="/img/hero.webp" type="image/webp">
<img src="/img/hero.jpg" width="1200" height="675" alt="...">
</picture>2. Pateikite adaptyvius dydžius su srcset
Siunčiant 2000 pikselių paveikslėlį į telefoną, kuris rodo jį 400 pikselių pločiu, iššvaistoma didžioji atsisiuntimo dalis. Pateikite kelis dydžius ir leiskite naršyklei pasirinkti pagal įrenginį su srcset ir sizes:
<img src="/img/photo-800.webp"
srcset="/img/photo-400.webp 400w, /img/photo-800.webp 800w, /img/photo-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="450" alt="...">3. Atidėkite įkėlimą žemiau matomos srities
Pridėkite loading="lazy" paveikslėliams, kurie prasideda už ekrano, kad naršyklė atidėtų jų įkėlimą, kol vartotojas priartės slinkdamas. Tai atlaisvina pralaidumą tam, kas matoma iškart. Viena svarbi išimtis: niekada neatidėkite savo LCP paveikslėlio — jis turi įsikelti kuo anksčiau.
4. Protingai suspauskite
Dauguma nuotraukų atrodo identiškai esant vidutiniam kokybės nustatymui, tačiau sveria kur kas mažiau nei maksimalios kokybės eksportas. Spauskite tol, kol vos pradedate pastebėti skirtumą, tada atsitraukite vienu lygiu. Pašalinkite nereikalingus metaduomenis, o SVG failus praleiskite per minifikatorių, kad pašalintumėte redaktoriaus paliktą šiukšlę. Kadangi paveikslėliai jau suspausti, neleiskite jų per Gzip ar Brotli — tai tik švaisto procesorių.
5. Nurodykite matmenis, kad apsaugotumėte CLS
Visada nurodykite aiškius width ir height atributus, kaip parodyta pavyzdžiuose aukščiau. Jie leidžia naršyklei rezervuoti tinkamą vietos kiekį prieš įsikeliant paveikslėliui, neleisdami puslapiui šokinėti — dažna ir lengvai išvengiama prasto Cumulative Layout Shift priežastis.
Dažniausiai užduodami klausimai
Ar turėčiau viską perkelti į AVIF?
AVIF suteikia mažiausius failus, bet suporuokite jį su WebP arba JPEG atsargine parinktimi per <picture> elementą, kad būtų padengta kiekviena naršyklė. Taip gausite sutaupymą nesugadindami senesnių klientų.
Ar atidėtas įkėlimas kenkia SEO?
Ne, jei atliekama teisingai. Naudokite natyvų loading="lazy" tik paveikslėliams žemiau matomos srities, o pagrindinį turinį ir LCP paveikslėlį palikite įkeliamus iškart, kad naršyklės botai ir vartotojai juos matytų nedelsdami.
Kokio dydžio turėtų būti mano paveikslėliai?
Ne didesni nei maksimalus dydis, kuriuo jie rodomi, atsižvelgiant į didelio tankio ekranus. Naudokite srcset, kad mažesniems įrenginiams pateiktumėte mažesnes versijas, o ne vieną per didelį failą visiems.
Susiję vadovai
Kas yra TTFB (laikas iki pirmojo baito)?
Ką matuoja „laikas iki pirmojo baito“, kas laikoma geru rezultatu ir dažniausios lėto TTFB priežastys.
Skaityti →Našumas ir Core Web Vitals„Core Web Vitals“ paaiškinimas ne programuotojams
LCP, INP ir CLS paprastai — ką matuoja „Google“, kokios ribos ir kaip tai veikia reitingus.
Skaityti →Našumas ir Core Web VitalsKaip pagerinti LCP (Largest Contentful Paint)
Praktiniai, pagal svarbą sudėlioti žingsniai, kaip LCP sumažinti iki mažiau nei 2,5 sekundės.
Skaityti →Patikrinkite savo svetainę pagal šį vadovą
Atlikite nemokamą ScanOpsPro patikrą ir pažiūrėkite, kaip jūsų svetainė tvarkosi su pagrindais.
Atlikti nemokamą patikrą