Attēli parasti veido lielāko daļu no mājas lapas kopējā failu svara — nereti 50–80%. Neoptimizēti attēli dramatiski palēnina lapas ielādi, pasliktina Core Web Vitals rādītājus un negatīvi ietekmē SEO ranžēšanu. Turklāt pareizi optimizēti attēli ar aprakstošiem failnosaukumiem un alt tekstiem var piesaistīt papildu trafiku no Google Images meklēšanas.

Šajā rakstā apskatīsim pilnu attēlu optimizācijas procesu — no pareizā formāta izvēles līdz lazy loading ieviešanai un SEO atribūtu pievienošanai.

1. Kāpēc attēlu optimizācija ir svarīga?

  • Ātrums — mazāki faili nozīmē ātrāku ielādi. Tas tieši uzlabo LCP (Largest Contentful Paint) metriku
  • SEO — Google ranžē lapas arī pēc ātruma. Turklāt optimizēti attēli ar alt tekstu parādās Google Images meklēšanas rezultātos
  • Lietotāja pieredze — ātra lapa samazina atteikuma rādītāju (bounce rate)
  • Mobilā pieredze — mobilo ierīču lietotāji bieži izmanto lēnāku interneta savienojumu
  • Servera resursi — mazāki faili patērē mazāk joslas platuma un servera resursu

2. Attēlu formāti

Pareiza formāta izvēle ir pirmais un svarīgākais optimizācijas solis.

Formāts Pielietojums Priekšrocības Trūkumi
WebP Fotogrāfijas, ilustrācijas, ikonas 25–35% mazāks nekā JPEG, atbalsta caurspīdīgumu un animāciju Vecākas pārlūkprogrammas (IE) neatbalsta
AVIF Fotogrāfijas, augstas kvalitātes attēli Līdz 50% mazāks nekā JPEG, izcila kvalitāte Lēnāka kodēšana, nepilns pārlūkprogrammu atbalsts
JPEG Fotogrāfijas (fallback) Universāls atbalsts, labs saspiešanas līmenis Nav caurspīdīguma, zaudējumaina saspiešana
PNG Logotipi, ikonas ar caurspīdīgumu Bezzaudējumu saspiešana, caurspīdīgums Lieli faili fotogrāfijām
SVG Ikonas, logotipi, vienkāršas ilustrācijas Vektors — ideāla kvalitāte jebkurā izmērā, ļoti mazs fails Neder fotogrāfijām

Ieteikums: izmantojiet WebP kā galveno formātu ar JPEG/PNG kā fallback. Ja nepieciešama maksimāla saspiešana un jūsu auditorija izmanto modernas pārlūkprogrammas, apsveriet AVIF.

3. Attēlu saspiešana

Pat pareizā formātā attēli bieži ir lielāki, nekā nepieciešams. Saspiešana samazina faila izmēru, saglabājot pieņemamu kvalitāti.

Tiešsaistes rīki

Rīks Formāti Bezmaksas?
Squoosh JPEG, PNG, WebP, AVIF Jā (pilnībā)
TinyPNG PNG, JPEG, WebP Jā (līdz 20 attēliem vienā reizē)
Compressor.io JPEG, PNG, SVG, GIF, WebP Jā
Ezgif JPEG, PNG, GIF, WebP, AVIF Jā
ImageOptim JPEG, PNG, GIF Jā (macOS lietotne)

Komandrindas rīki

Automatizēšanai un lielu attēlu daudzumu apstrādei izmantojiet komandrindas rīkus:

cwebp — konvertēšana uz WebP:

# Konvertēt vienu attēlu
cwebp -q 80 ievade.jpg -o izvade.webp

# Konvertēt visus JPEG attēlus mapē
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

ImageMagick — universāls rīks:

# Saspiešana un izmēra maiņa
convert ievade.jpg -resize 1200x -quality 82 izvade.jpg

# Konvertēšana uz WebP
convert ievade.jpg -quality 80 izvade.webp

Uzstādīšana Linux (Ubuntu/Debian):

sudo apt install webp imagemagick

Ieteicamie saspiešanas iestatījumi

Formāts Kvalitāte Piezīmes
JPEG 75–85% Zem 75% kvalitāte var pamanāmi pasliktināties
WebP 75–85% WebP pie 80% izskatās līdzvērtīgi JPEG pie 85–90%
AVIF 60–75% AVIF saspiež efektīvāk, tāpēc zemāka kvalitātes vērtība dod labu rezultātu
PNG Bezzaudējumu Izmantojiet rīkus kā OptiPNG vai TinyPNG, lai noņemtu liekos metadatus

4. Attēlu izmēri un responsīvie attēli

Nelejupielādējiet 4000px platu attēlu, ja tas tiek rādīts 800px platā kolonnā. Attēliem jābūt tādā izmērā, kādā tie tiks attēloti.

Noteikumi izmēru izvēlei

  • Nosakiet maksimālo platumu, kādā attēls tiks rādīts jūsu lapā
  • Sagatavojiet attēlus ar 2x izšķirtspēju Retina ekrāniem (piemēram, ja attēls ir 600px plats, sagatavojiet 1200px platu versiju)
  • Lielākā daļa gadījumu — pietiek ar 1200–1600px platu attēlu kā maksimālo versiju

Responsīvie attēli ar srcset

srcset atribūts ļauj pārlūkprogrammai izvēlēties vispiemērotāko attēla versiju atkarībā no ekrāna izmēra:

<img
src="attels-800.webp"
srcset="attels-400.webp 400w,
attels-800.webp 800w,
attels-1200.webp 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="Mājaslapas optimizācijas piemērs"
width="1200" height="675">

picture elements dažādiem formātiem

<picture> elements ļauj piedāvāt attēlu vairākos formātos — pārlūkprogramma izvēlēsies pirmo, ko tā atbalsta:

<picture>
<source srcset="attels.avif" type="image/avif">
<source srcset="attels.webp" type="image/webp">
<img src="attels.jpg" alt="Aprakstošs teksts" width="800" height="450">
</picture>

Šajā piemērā pārlūkprogramma vispirms mēģinās ielādēt AVIF, tad WebP, un kā pēdējo variantu — JPEG.

5. SEO optimizācija attēliem

Attēlu SEO ir tikpat svarīgs kā teksta SEO. Pareizi optimizēti attēli var piesaistīt būtisku trafiku no Google Images.

5.1. Alt teksts (alternatīvais teksts)

Alt teksts apraksta attēla saturu gan meklētājprogrammām, gan ekrāna lasītājiem (pieejamības rīkiem):

<!-- SLIKTI — tukšs vai bezjēdzīgs alt -->
<img src="foto.webp" alt="">
<img src="foto.webp" alt="attēls">
<img src="foto.webp" alt="foto1">

<!-- LABI — aprakstošs, ar atslēgvārdiem -->
<img src="seo-audita-rezultati.webp" alt="SEO audita rezultātu pārskats Google Search Console">

<!-- LABI — vienkārši aprakstošs -->
<img src="riga-panorama.webp" alt="Rīgas vecpilsētas panorāma no Daugavas">

Alt teksta padomi:

  • Aprakstiet, kas ir redzams attēlā — īsi un konkrēti (ideāli 5–15 vārdi)
  • Iekļaujiet atslēgvārdus, ja tas ir dabiski un atbilst attēla saturam
  • Nesāciet ar „attēls ar..." vai „bilde, kurā..." — ekrāna lasītāji jau paziņo, ka tas ir attēls
  • Dekoratīviem attēliem (kas nenes informāciju) izmantojiet tukšu alt: alt=""

5.2. Failu nosaukumi

Failu nosaukumiem jābūt aprakstošiem un cilvēklasāmiem:

  • Labi: seo-audita-rezultati.webp, wordpress-uzstadisana-vps.webp
  • Slikti: IMG_4521.jpg, screenshot-2026-03-01.png, foto_final_v2.jpeg
  • Izmantojiet defises (-) starp vārdiem, nevis apakšsvītras vai atstarpes
  • Lietojiet tikai mazos burtus un latīņu alfabēta burtus bez diakritiskajām zīmēm

5.3. Title atribūts

title atribūts nav obligāts SEO, taču parāda papildu tekstu, kad lietotājs novieto peles kursoru virs attēla:

<img src="riga.webp" alt="Rīgas Vecrīga" title="Rīgas Vecrīgas panorāma no Daugavas krasta">

5.4. Structured data attēliem

Ja attēli ir produktu fotogrāfijas vai receptēs, izmantojiet strukturētos datus (Schema.org), lai Google attēlotu bagātinātus fragmentus:

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ImageObject",
"contentUrl": "https://jusu-lapa.lv/img/produkts.webp",
"name": "Produkta nosaukums",
"description": "Detalizēts produkta apraksts"
}
</script>

6. Lazy loading (Slinkā ielāde)

Lazy loading atliek attēlu ielādi līdz brīdim, kad tie kļūst redzami ekrānā. Tas būtiski samazina sākotnējo ielādes laiku.

Natīvais lazy loading

Modernās pārlūkprogrammas atbalsta iebūvētu lazy loading ar loading atribūtu:

<!-- Attēls ielādēsies tikai, kad lietotājs ritinās līdz tam -->
<img src="foto.webp" alt="Apraksts" width="800" height="450" loading="lazy">

Svarīgi:

  • Nelietojiet loading="lazy" pirmajiem 1–2 attēliem, kas ir redzami ekrānā bez ritināšanas (above the fold)
  • LCP attēlam nekad nelietojiet lazy loading — tas aizkavēs lielākā elementa ielādi un pasliktinās LCP metriku
  • Vienmēr norādiet width un height, lai pārlūkprogramma var atvēlēt vietu un novērst CLS

LCP attēla prioritizēšana

Galveno attēlu (hero image) ieskrietā veidā priekšielādējiet:

<!-- head sadaļā -->
<link rel="preload" as="image" href="hero-attels.webp">

<!-- Vai ar fetchpriority atribūtu -->
<img src="hero-attels.webp" alt="Galvenais attēls" fetchpriority="high" width="1200" height="600">

7. CSS attēlu optimizācija

Fona attēli

CSS fona attēliem nav alt teksta, tāpēc tie nav indeksējami Google Images. Izmantojiet tos tikai dekoratīviem nolūkiem:

.hero {
background-image: url('fons.webp');
background-size: cover;
background-position: center;
}

Responsīvi fona attēli ar media queries

.hero {
background-image: url('fons-mobile.webp');
}

@media (min-width: 768px) {
.hero {
background-image: url('fons-tablet.webp');
}
}

@media (min-width: 1200px) {
.hero {
background-image: url('fons-desktop.webp');
}
}

8. Attēlu optimizācijas kontrolsaraksts

Formāts un saspiešana

  • Attēli konvertēti uz WebP (vai AVIF)
  • Kvalitāte iestatīta uz 75–85% (JPEG/WebP) vai 60–75% (AVIF)
  • Fotogrāfijas — WebP/AVIF/JPEG; logotipi un ikonas — SVG/PNG
  • Izmantots <picture> elements vairāku formātu atbalstam

Izmēri

  • Attēli nav lielāki par nepieciešamo attēlošanas izmēru
  • Sagatavoti 2x izmēra attēli Retina ekrāniem
  • Izmantots srcset responsīviem attēliem
  • Norādīti width un height atribūti

SEO

  • Katram attēlam ir aprakstošs alt teksts
  • Failu nosaukumi ir aprakstošī (ar defisēm starp vārdiem)
  • Svarīgie attēli ir <img> elementi (nav CSS fons)

Veiktspēja

  • Attēli ārpus ekrāna izmanto loading="lazy"
  • LCP attēls ir priekšielādēts un nav lazy loaded
  • Izmantots CDN attēlu piegādei

9. Biežākās kļūdas

  • Neoptimizēti oriģināli — augšupielādēti 5 MB JPEG faili no kameras tieši mājas lapā
  • Tukši alt teksti — attēliem nav alt teksta vai tas ir bezjēdzīgs („foto", „img1")
  • Nav norādīti izmēri — trūkst width un height, kas izraisa CLS (layout shift)
  • Lazy loading visiem attēliem — ieskaitot LCP attēlu, kas pasliktina ielādes ātrumu
  • Viens izmērs visām ierīcēm — mobilajā ierīcē tiek ielādēts 2000px plats attēls
  • Novecojis formāts — BMP vai nesaspiesti TIFF faili, vai JPEG, kur WebP būtu labāks
  • Teksts attēlos — svarīgs teksts ievietots attēlā, nevis HTML — Google to nevar indeksēt
  • Pārāk agresīva saspiešana — kvalitāte zem 60%, kas rada redzamus artefaktus

Kopsavilkums

Attēlu optimizācija ir viens no vienkāršākajiem un efektīvākajiem veidiem, kā uzlabot mājas lapas ātrumu un SEO. Galvenais:

  1. Izvēlieties pareizo formātu — WebP fotogrāfijām, SVG ikonām, AVIF maksimālai kompresijai
  2. Saspiežiet — 75–85% kvalitāte JPEG/WebP, 60–75% AVIF
  3. Pielāgojiet izmērus — ne lielāki, nekā nepieciešams; izmantojiet srcset
  4. Pievienojiet SEO atribūtus — aprakstošs alt teksts, lasāmi failu nosaukumi
  5. Ieviešiet lazy loading — visiem attēliem, izņemot LCP elementu
  6. Norādiet izmērus HTML — width un height, lai novērstu CLS

Noderīgas saites un rīki:

Laboja mad, labots 2x