Pildid kodulehel: kuidas mitte saiti aeglustada
Pildid teevad saidi ilusaks, aga just nemad on kõige sagedasem põhjus, miks leht laeb aeglaselt. Suur optimeerimata foto võib kaaluda rohkem kui kogu ülejäänud lehekülg kokku. Hea uudis on see, et paar lihtsat võtet hoiavad saidi nii nägusa kui ka kiirena, ilma et peaksite kvaliteedis järele andma.
Miks pildid saiti aeglustavad
Iga pilt tuleb külastaja seadmesse alla laadida. Mida suurem fail, seda kauem leht laeb, eriti mobiilse leviala peal.
Levinud viga on laadida saidile otse kaamerast tulnud foto, mis on 4000 pikslit lai ja mitu megabaiti suur, kuigi ekraanil kuvatakse seda 800 piksli laiuselt.
Aeglane laadimine mõjub kahes suunas: külastaja lahkub enne, kui leht avaneb, ja Google alandab positsiooni, sest kiirus on reastamistegur.
Pildid mõjutavad ka Core Web Vitals mõõdikut LCP, mis mõõdab, kui kiiresti ilmub lehe suurim sisuelement, tihti just suur hero-pilt.
Vali õige formaat
Formaat otsustab, kui palju fail kaalub sama kvaliteedi juures. Vananenud formaadid on tarbetult rasked.
- WebP on tänane vaikevalik: sama kvaliteet kui JPEG, kuid 25-35% väiksem fail. Kõik kaasaegsed brauserid toetavad seda.
- AVIF läheb veelgi kaugemale ja annab veel väiksema faili, sobib eriti suurte fotode jaoks.
- PNG jäta läbipaistvust vajavatele elementidele ja logodele, mitte fotodele, sest fotona on see väga raske.
- SVG on parim ikoonidele ja lihtsale graafikale, sest see on vektor ja püsib terav igas suuruses.
Suurus ja mõõtmed
Ära lae kunagi pilti suuremana, kui seda kuvatakse. Kui element on 600 pikslit lai, ei ole 3000-pikslisest failist mingit kasu, ainult lisakaal.
Kasuta responsive-pilte, kus brauser valib ekraani järgi õige suuruse. Nii saab telefon väikese ja arvuti suurema versiooni.
Suru fail kokku enne üleslaadimist. Tööriistad nagu Squoosh või TinyPNG vähendavad mahtu kordades ilma nähtava kvaliteedikaota.
Sea mõistlik sihtmärk: enamik sisupilte võiks jääda alla 200 KB, hero-pildid alla 400 KB.
Laadimine ja paigutuse stabiilsus
Lazy loading tähendab, et allpool voldi asuvad pildid laetakse alles siis, kui kasutaja nendeni kerib. See kiirendab esmast avanemist märgatavalt.
Määra igale pildile laius ja kõrgus või aspect-ratio. Muidu hüppab paigutus laadimise ajal, mis rikub CLS-mõõdiku ja ärritab kasutajat.
Esimese ekraani hero-pilti ära pane lazy-laadima, sest see peab ilmuma kohe. Lazy loading kuulub allapoole jäävatele piltidele.
Lisa igale pildile sisukas alt-tekst. See aitab ligipääsetavust, annab Google'ile konteksti ja toob liiklust pildiotsingust.
Lihtne töövoog, mida järgida
Hea pildihaldus ei nõua kallist tarkvara, vaid järjekindlat harjumust iga pildiga.
- Vähenda mõõtmed kuni kuvatava suuruseni.
- Teisenda WebP või AVIF formaati.
- Suru fail kokku ja kontrolli, et maht on mõistlik.
- Lisa alt-tekst ning laius ja kõrgus.
Kui sait on WordPressil, teeb suure osa sellest automaatseks pildioptimeerimise plugin, kuid õigetes mõõtmetes originaali eest vastutate ikkagi teie.
FAQ
Milline pildiformaat on kodulehele parim?+
Fotode jaoks on täna parim WebP, mis annab sama kvaliteedi JPEG-ist märksa väiksema failina, ning veelgi väiksema tulemuse annab AVIF. Läbipaistvust vajavatele elementidele sobib PNG ja ikoonidele SVG. Peamine on vältida rasket optimeerimata JPEG-i või PNG-i fotona.
Kui suur tohib pildifail olla?+
Üldreegel on hoida sisupildid alla 200 KB ja suured hero-pildid alla 400 KB. Palju olulisem kui täpne number on see, et pilti ei laeta suuremana kui kuvatav mõõt ja et fail on enne üleslaadimist kokku surutud. Nii püsib leht kiire ka mobiilis.
Mis on lazy loading ja kas seda tasub kasutada?+
Lazy loading laeb allpool voldi asuvad pildid alles siis, kui kasutaja nendeni kerib, mis kiirendab lehe esmast avanemist. Seda tasub kasutada kõigil sisupiltidel, kuid mitte esimese ekraani hero-pildil, mis peab ilmuma kohe. Enamik kaasaegseid platvorme lülitab selle vaikimisi sisse.