Obiskovalec na 13-palčnem prenosniku ne potrebuje enake slike 4K kot obiskovalec na 5K iMac-u. In obiskovalec v omrežju 4G še posebej ne potrebuje 8 MB velikega bannerja, ki se strašno počasi nalaga. Standardi za odzivne slike (srcset, sizes, picture, lazy loading) obstajajo že od leta 2015, vendar jih večina spletnih mest ne uporablja pravilno – kar spletnemu mestu doda 2–5-krat večjo težo, kot je potrebno.

Ta vodnik zajema vse, kar morate vedeti o sodobni oznaki v letu 2026 – srcset, velikosti, sliko za umetniško usmeritev, izvorno leno nalaganje ter kako WordPress samodejno obravnava vse to (in kdaj to ni dovolj).

Osnovna formula: ena slika, več velikosti

Stari pristop: objaviš s fotografijo velikosti 2400×1600, brskalnik jo prikaže vsem – uporabniki mobilnih naprav so 800 KB preveč.

Nov pristop: ponudnik storitev ima 5 različic (npr. 400, 800, 1200, 1600, 2400 slikovnih pik), brskalnik pa izbere najmanjšo, ki je zadostna za napravo:

Brskalnik vzame vidno polje, pomnoži z gostoto slikovnih pik in izbere najbližjo sliko iz nabora izvornih podatkov. Mobilna naprava dobi 400 W, namizna 1200 W, 4K zaslon pa 1600 ali 2400 W.

Razumevanje srcset in velikosti

srcset — katere različice obstajajo

Seznam slik z njihovimi širinami. 800w pomeni »ta slika je široka 800 slikovnih pik«. Brskalnik pozna vse možnosti.

velikosti — koliko prostora slika zavzame v postavitvi

Seznam medijskih poizvedb CSS: »če je vidno polje pod 600 slikovnimi pikami, slika zaseda 100 % širine. Če je med 600 in 1200 slikovnimi pikami, zaseda 50 %. Sicer pa 33 %.«

Brskalnik združi velikosti (koliko prostora) + vidno polje (kako široko je območje naprave) + gostoto slikovnih pik (2x mrežnica?) in izbere optimalno sliko iz nabora virov.

Tipične napake:

• Brez atributa sizes brskalnik predpostavlja 100vw, kar pogosto ni pravilno → vzame preveliko sliko.
• Velikosti se ne ujemajo s CSS-jem – npr. velikosti pravijo 50 %, CSS pa poda širino slike: 25 %. Brskalnik sprejme 2× večjo sliko, kot bi morala biti.
• Premajhen nabor virov — samo 2 različici (800 W in 1600 W) ni dovolj za vse device.

Izvorno leno nalaganje – od leta 2020.

Atribut loading="lazy" na ali brskalniku sporoči, naj nalaganje odloži, dokler se slika ne približa vidnemu območju. Podprti so vsi sodobni brskalniki.

Slika junaka (nad pregibom) NE sme imeti lenega prikaza – izgubite oceno LCP. Vse pod pregibom → lenega prikaza.

Alternativna loading="eager" pravi "naloži takoj, določi prioriteto" – uporabite za glavno sliko.

loading="auto" prepušča brskalniku, da se sam odloči (privzeto).

Element slike – umetniška smer (različne slike, ne le velikosti)

Včasih mobilna različica potrebuje drugačno sliko (npr. pokončno obrezovanje namesto ležečega):

Poleg tega je slika idealno mesto za nadomestni format (AVIF → WebP → JPEG):

Širina in višina – zakaj sta ključni za CLS

Brez atributov width in height brskalnik ne ve, koliko prostora rezervirati, preden se slika naloži → besedilo in drugi elementi se premaknejo, ko slika prispe → zniža se ocena kumulativnega premika postavitve (CLS). Kazen za ključne spletne kazalnike.

width in height vedno navedite v slikovnih pikah, tudi če je slika odzivna (CSS jo bo pomanjšal). Brskalnik te dimenzije uporablja samo za izračune razmerja stranic.

WordPress — kaj deluje samodejno (od različice 4.4+)

WP samodejno:

• Ob nalaganju ustvari več velikosti slik (sličica, srednja, velika, polna in velikosti tem po meri).
• Doda srcset in velikosti v izhod wp_get_attachment_image() .
• Od različice WP 5.5+ naprej dodaja loading="lazy" vsem slikam pod pregibom.
• Doda atribute širine in višine.

Kaj preveriti:

1. Da vaša tema uporablja wp_get_attachment_image() ali the_post_thumbnail() , ne pa surovih oznak .
2. Ta WP ustvari vse potrebne velikosti za vašo temo (določene v functions.php prek add_image_size() ).
3. Da je nek vtičnik preglasil privzeto leno nalaganje (preverite izpis HTML).

Kaj pa, če WP ni dovolj?

• Graditelji strani (Elementor, Divi, Beaver) pogosto ustvarjajo neoptimalne slike. Plus vtičniki: Smush , ShortPixel , EWWW , Optimole .
• Brezglavi WP (nevezan sprednji del): ročno nastavite srcset/sizes v komponenti Next.js / Nuxt.
• Pretvorba WebP/AVIF : Jedro WP še ne deluje samodejno, vtičnik ali predpomnilnik LiteSpeed.

CDN za slike – ko ga potrebujete

Storitve CDN za slike (Cloudflare Polish, Bunny CDN, Imgix, Cloudinary, ImageKit) prenesejo vso obdelavo slik na rob omrežja:

• Naložite enega od originalov.
• URL določa želeno velikost/format (npr. https://cdn.tvoj.hr/image.jpg?w=800&format=avif&q=80 ).
• CDN pretvarja sproti, shranjuje v predpomnilnik in streže.

Cena: 5–50 USD/mesec za majhna do srednje velika spletna mesta. Velja za:

• Fotografi / spletna mesta s portfelji z več kot 1000 slikami.
• E-trgovina z veliko slikami izdelkov.
• Večjezična spletna mesta, kjer je potrebnih veliko različnih pridelkov.

Počasno nalaganje – napredne strategije

Rezervni opazovalec križišč

Starejši brskalniki (redki v letu 2026) brez izvorne funkcije lazy podpirajo Intersection Observer JavaScript API. Vtičnik lazysizes ponuja rešitev za več brskalnikov.

Zameglitev / LQIP (nadomestno besedilo za sliko nizke kakovosti)

Preden se naloži prava slika, se prikaže majhna zamegljena različica (npr. 20 × 15 slikovnih pik). Gladek vizualni prehod. To se doseže z ozadjem CSS ali JS:

Orodja: nadomestni znak , blurhash , thumbhash .

Zaznavanje nad pregibom

Počasno nalaganje lažje pokvari spletno mesto, če vtičnik WP napačno označi glavno sliko kot »pod pregibom« → uporabnik za sekundo vidi prazno glavno območje. Onemogočite počasno nalaganje za prvi drsnik in prvi odstavek slike.

Vpliv ključnih spletnih podatkov

• LCP (največje vsebinsko slikanje) : slika glavnega junaka. Optimizirana mora biti + fetchpriority="high" + loading="eager" .
• CLS (Cumulative Layout Shift) : atribut širine/višine je obvezen za vse slike.
• INP (Interakcija z naslednjim slikanjem) : počasno nalaganje slik zmanjša stroške JS pri nalaganju, kar pospeši interaktivnost.

Kontrolni seznam predprodukcije

1. Vse slike imajo alt besedilo (SEO + dostopnost)
2. Vse slike imajo width in height v slikovnih pikah.
3. Naslovna slika (zgoraj na pregibu) ima loading="eager" + fetchpriority="high"
4. Druge slike imajo loading="lazy"
5. srcset definiran z vsaj 3-4 različicami
6. Atribut sizes ustreza dejanski širini CSS-ja
7. Če je mogoče, uporabite za rezervno kodo WebP/AVIF
8. Pregled PageSpeed za mobilne naprave za slike: ni opozoril »pravilna velikost slik«
9. Kakovost JPEG ne več kot 85, WebP ne več kot 80, AVIF ne več kot 65
10. Ne nalagajte izvirnikov, večjih od 2× največje velikosti prikaza (npr. ne 4000px za prikaz 800px).

Kako pomaga pristop z orožjem za množično uničevanje

• LiteSpeed Cache + QUIC.cloud samodejno ustvari WebP
• NVMe shramba omogoča hitro branje slik z diska
• HTTP/3 hitreje nalaga več slik hkrati
• Brotlijeva kompresija dodatno zmanjša HTML/CSS, v katerem so URL-ji slik
• Paketna regeneracija slik prek WP-CLI v SSH: wp media regenerate --yes

Pogosto zastavljena vprašanja

Ali potrebujem sliko za vse slike?
Ne. Slika je potrebna le za umetniško usmeritev (različne slike za različne velikosti) ali nadomestni format (AVIF → WebP → JPEG). Za preprosto "manjšo različico" zadostuje navaden z oznako srcset in je krajši.

Ali leno nalaganje zmanjšuje SEO?
Ne. Googlebot 2026 razume izvorno leno nalaganje. Slike se indeksirajo normalno. Google jih lahko spregleda le, če uporablja leno nalaganje na osnovi JavaScripta brez ustreznega označevanja.

Kaj pa SVG?
SVG-ji so vektorski – ni potrebe po odzivnih različicah. Ena datoteka SVG deluje za vse velikosti. Stisniti jo je mogoče le s svgomg ali SVGO .

Ali moram imeti v izvornem naboru 5 velikosti za majhno sliko za blog?
Ne. Za slike v vrstici zadostujejo 2–3 velikosti (majhna, srednja, velika). 5+ velikosti za glavne slike/slike izdelkov/izpostavljene slike.