Posjetitelj na 13-inch laptopu ne treba istu 4K sliku kao posjetitelj na 5K iMac-u. A posjetitelj na 4G mreži posebno ne treba 8 MB hero baner koji se grozno lazy loadingom kasno učitava. Responsive images standardi (srcset, sizes, picture, lazy loading) postoje od 2015, ali većina sajtova ih ne koristi pravilno — što daje 2-5× težine sajta nego potrebno.

Ovaj vodič pokriva sve što stvarno treba znat o modernom <img> taggu u 2026 — srcset, sizes, picture za art direction, native lazy loading, plus kako WordPress automatski sve to handla (i kad to nije dovoljno).

Osnovna formula: jedna slika, više veličina

Stari pristup: postaviš <img src="hero.jpg"> sa 2400×1600 fotografijom, browser je servira svima — mobilac uchucvni 800 KB suvišno.

Novi pristup: servisaš 5 verzija (npr. 400, 800, 1200, 1600, 2400 pixela) i browser bira najmanju koja je dovoljna za uređaj:

<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg 400w,
    hero-800.jpg 800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w,
    hero-2400.jpg 2400w
  "
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="Opis slike"
  width="800"
  height="600"
  loading="lazy">

Browser uzima viewport, multiplicira sa pixel density, i bira najbližu sliku iz srcset. Mobilac dobiva 400w, desktop 1200w, 4K display 1600 ili 2400w.

Razumjeti srcset i sizes

srcset — koje varijante postoje

Lista slika sa njihovim širinama. 800w znači "ova slika je 800 piksela široka". Browser zna sve opcije.

sizes — koliko prostora slika zauzima u layout-u

Lista CSS media query-ja: "ako je viewport ispod 600px, slika zauzima 100% širine. Ako je između 600 i 1200, zauzima 50%. Inače 33%."

Browser kombinira sizes (koliko prostora) + viewport (kolika je device širina) + pixel density (2x retina?) i bira optimalnu sliku iz srcset.

Tipične greške:

Bez sizes atributa — browser pretpostavi 100vw, što često nije točno → uzima preveliku sliku.
Sizes ne odgovara CSS-u — npr. sizes kaže 50% ali CSS daje slici width: 25%. Browser uzima 2× veću sliku nego treba.
Premali srcset — samo 2 varijante (800w i 1600w) nije dovoljno za sve devicove.

Native lazy loading — od 2020.

Atribut loading="lazy" na <img> ili <iframe> kaže browseru da odgodi učitavanje dok se slika ne približi viewport-u. Sve moderne browsere podržavaju.

<img src="image.jpg" loading="lazy" alt="..." width="800" height="600">

Hero slika (above-the-fold) NE smije imati lazy — gubiš LCP score. Sve ispod fold-a → lazy.

Alternativa loading="eager" kaže "učitaj odmah, prioritetno" — koristi za hero sliku.

loading="auto" ostavlja browseru da odluči (default).

Picture element — art direction (različite slike, ne samo veličine)

Ponekad mobilna verzija treba drugačiju sliku (npr. portret crop umjesto landscape):

<picture>
  <source media="(max-width: 600px)" srcset="hero-portrait.jpg">
  <source media="(min-width: 601px)" srcset="hero-landscape.jpg">
  <img src="hero-landscape.jpg" alt="..." width="800" height="600">
</picture>

Plus, picture je idealna mjesto za format fallback (AVIF → WebP → JPEG):

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="..." width="800" height="600" loading="lazy">
</picture>

Width i height — zašto su kritični za CLS

Bez width i height atributa, browser ne zna koliko prostora rezervirati prije nego slika učita → tekst i ostali elementi se pomaknu kad slika dođe → Cumulative Layout Shift (CLS) score pada. Core Web Vitals kazna.

Uvijek navedi width i height u pikselima, čak i kad je slika responzivna (CSS će je skalirat). Browser koristi te dimenzije samo za aspect-ratio izračun.

WordPress — što automatski radi (od 4.4+)

WP automatski:

Generira više veličina slike pri uploadu (thumbnail, medium, large, full, plus custom theme sizes).
Dodaje srcset i sizes u wp_get_attachment_image() output.
Od WP 5.5+, dodaje loading="lazy" na sve slike ispod fold-a.
Dodaje width i height atribute.

Što provjeriti:

Da tvoja tema koristi wp_get_attachment_image() ili the_post_thumbnail(), ne raw <img> taggove.
Da WP generira sve potrebne veličine za tvoju temu (definirano u functions.php kroz add_image_size()).
Da nije neki plugin overridao default lazy loading (provjeri HTML output).

Što kad WP nije dovoljan

Page builderi (Elementor, Divi, Beaver) često generiraju neoptimalne slike. Plus pluginovi: Smush, ShortPixel, EWWW, Optimole.
Headless WP (decoupled frontend): ručno postaviš srcset/sizes u Next.js / Nuxt komponenti.
WebP/AVIF konverzija: WP core još ne radi automatski, plugin ili LiteSpeed Cache.

Image CDN — kad ti treba

Image CDN servisi (Cloudflare Polish, Bunny CDN, Imgix, Cloudinary, ImageKit) prebacuju cijelo image-handling na edge:

Uploadaš jedan originale.
URL kaže željenu veličinu/format (npr. https://cdn.tvoj.hr/image.jpg?w=800&format=avif&q=80).
CDN konvertira on-the-fly, cacheira, servira.

Cijena: $5-50/mj za male do srednje sajtove. Vrijedi za:

Photographers / portfolio sajtove s 1000+ slika.
E-commerce s puno product slika.
Multi-language sajtove gdje treba puno različitih crop-ova.

Lazy loading — napredne strategije

Intersection Observer fallback

Stari browseri (rijetki u 2026) bez native lazy podržavaju Intersection Observer JavaScript API. Plugin lazysizes daje cross-browser solution.

Blur-up / LQIP (Low Quality Image Placeholder)

Prije nego prava slika učita, prikazuje se tiny blurred verzija (npr. 20×15 pixela). Smooth visual transition. Postiže se kroz CSS background ili JS:

<img
  src="data:image/png;base64,...iVBORw..."
  data-src="hero.jpg"
  loading="lazy"
  alt="..."
  class="blur-up">

Tools: plaiceholder, blurhash, thumbhash.

Above-the-fold detection

Lazy loading lakše razbije sajt ako WP plugin pogrešno označi hero sliku kao "below fold" → korisnik vidi praznu hero zonu sekundu. Disable lazy za prvi slider i prvi paragraf slike.

Core Web Vitals impact

LCP (Largest Contentful Paint): glavni hero image. Mora biti optimiziran + fetchpriority="high" + loading="eager".
CLS (Cumulative Layout Shift): width/height atribute mandatory za sve slike.
INP (Interaction to Next Paint): lazy loading slika smanjuje JS overhead na load, što ubrzava interactivity.

Checklist prije production-a

Sve slike imaju alt tekst (SEO + accessibility)
Sve slike imaju width i height u pixelima
Hero image (above fold) ima loading="eager" + fetchpriority="high"
Ostale slike imaju loading="lazy"
srcset definiran s barem 3-4 varijante
sizes atribut odgovara stvarnoj CSS širini
WebP/AVIF fallback kroz <picture> ako moguće
PageSpeed Mobile audit za images: nema "properly size images" upozorenja
JPEG kvaliteta ne preko 85, WebP ne preko 80, AVIF ne preko 65
Originale ne uploadat preko 2× max display size (npr. ne 4000px za 800px display)

Kako WMD pristup pomaže

LiteSpeed Cache + QUIC.cloud generira WebP automatski
NVMe storage daje brz disk read za slike
HTTP/3 paralelno učitava više slika brže
Brotli kompresija dodatno smanjuje HTML/CSS u kojem su image URL-ovi
Image regeneracija batch-om kroz WP-CLI u SSH-u: wp media regenerate --yes

Najčešća pitanja

Trebam li picture za sve slike?
Ne. Picture treba samo za art direction (različite slike za različite veličine) ili format fallback (AVIF → WebP → JPEG). Za jednostavnu "manja verzija", obični <img> sa srcset je dovoljan i kraći.

Smanjuje li lazy loading SEO?
Ne. Googlebot 2026 razumije native lazy loading. Slike se indeksiraju normalno. Samo ako koristi JavaScript-based lazy bez ispravnog markup-a, Google ih može propustit.

Što s SVG?
SVG su vektorski — nema potrebe za responsive variants. Jedno SVG datoteka radi za sve veličine. Samo se može kompresirat kroz svgomg ili SVGO.

Trebam li imati 5 veličina u srcset za malu blog sliku?
Ne. Za inline content slike, 2-3 veličine (mali, srednji, veliki) je dovoljno. 5+ veličina za hero / product / featured slike.

Responsive images, srcset, lazy loading i art direction 2026 — kompletan vodič