Ako na responzívne obrázky

Keď chceme spraviť responzívne obrázky, musíme riešiť 3 veci naraz: -aby obrázok nepretiekol z kontajnera (mobil vs desktop) -aby stránka neskákala pri načítaní (rezervovať miesto) -aby sa obrázky nenačítavali zbytočne (lazy loading + správna veľkosť)

<div class="ukazka">
    <img
        src="https://picsum.photos/id/237/600/400"
        alt="obrázok čierneho psa"
        width="600"
        height="400"
        loading="lazy"
        decoding="async"
    >
</div>

 

.ukazka {
border: 1px solid #a50000;
max-width: 800px;   /* len aby bolo vidno, že kontajner môže byť užší */
margin: 2rem auto;
}

/* 1) ZÁKLAD: obrázok sa prispôsobí šírke kontajnera /
.ukazka img {
display: block; /* odstráni "medzeru pod obrázkom" (baseline) */
max-width: 100%; /* nikdy nebude širší než rodič */
height: auto; /* zachová pomer strán */
}

 

1) Prečo obrázky často “rozbijú” mobil?

Lebo majú natvrdo šírku (alebo prídu veľké) a kontajner je menší.

Riešenie je vždy toto duo: max-width: 100%, height: auto

To znamená:

  • keď je kontajner úzky (mobil), obrázok sa zmenší,

  • keď je kontajner široký, obrázok môže byť vo svojej prirodzenej veľkosti, ale nepretečie.

2) “Pripraviť miesto” pre obrázok ešte pred načítaním (aby stránka neskákala)

To je presne ten moment, keď sa načíta obrázok a celý text pod ním odskočí. Najjednoduchšie a najlepšie riešenie: dať obrázku width a height atribúty.

<img src="..." width="600" height="400">

Prečo to funguje? Prehliadač si vie dopredu vypočítať pomer strán (aspect ratio), teda si hneď rezervuje správnu výšku miesta a keď sa obrázok načíta, nič sa neposúva.

Toto je dnes najpraktickejší spôsob.
CSS max-width: 100% stále funguje, len miesto je dopredu rezervované.

3) Lazy loading: nech sa obrázky načítajú až keď treba

Keď máš stránku dlhú a pod prvým ekranom sú obrázky, je zbytočné ich sťahovať hneď.

Stačí:

loading="lazy"

Takže:

<img src="..." loading="lazy">

Kedy nedávať lazy?

Na hlavný obrázok hore (hero, prvý vizuál na stránke).
Ten chceš mať rýchlo, nie “neskôr”.

4) decoding="async" (malý bonus)

decoding="async"

Hovorí prehliadaču: “dekóduj obrázok mimo hlavnej práce stránky, keď sa dá.”
Nie je to zázrak, ale je to čisté a bezpečné nastavenie.

5) Keď chceš rovnaký “výrez” na všetkých zariadeniach (ako banner)

Toto je iná situácia: nechceš zachovať celý obrázok, chceš aby vyplnil box.

Vtedy robíme toto:

.ukazka {
  border: 1px solid #a50000;
  aspect-ratio: 3 / 2;   /* box má stále rovnaký pomer */
  overflow: hidden;      /* čo trčí, odrežeme */
}

.ukazka img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* vyplní box, oreže okraje */
  display: block;
}

Rozdiel:

  • height: auto = ukáže celý obrázok (len sa zmenší)

  • object-fit: cover = vyplní box, ale časť odreže (ako “crop”)

6) Najčastejšie chyby

  • chýba max-width: 100% → obrázok pretiekne z kontajnera

  • obrázok je inline → “medzera pod obrázkom” (rieši display:block)

  • bez width/height → stránka môže skákať pri načítaní

  • lazy na prvom (hero) obrázku → paradoxne spomalíš vizuál hore

Moderný základ: 

  1. responsívne zdroje (srcset + sizes) = mobil stiahne menší súbor, desktop väčší

  2. moderný formát (WebP/AVIF) + fallback cez <picture>

Doteraz sme riešili:

  • aby obrázok nepretiekol (max-width/height auto),

  • aby neskákala stránka (width/height),

  • aby sa neťahalo všetko hneď (lazy).

Ale stále môže byť problém: mobil si stále stiahne 600×400, aj keď ho zobrazuje napr. len 320px široký. A to je tá “neporiadnosť” v praxi (zbytočné dáta).

(reálne pre web) – <picture> + srcset + sizes

HTML

<body>
  <h1>Obrázky poriadne: responsive + webp + bez skákania</h1>

  <div class="ukazka">
    <picture>
      <!-- 1) moderný formát -->
      <source
        type="image/webp"
        srcset="
          /images/dog-320.webp 320w,
          /images/dog-600.webp 600w,
          /images/dog-1000.webp 1000w
        "
        sizes="(max-width: 700px) 100vw, 700px"
      >

      <!-- 2) fallback (jpg/png) -->
      <img
        src="/images/dog-600.jpg"
        srcset="
          /images/dog-320.jpg 320w,
          /images/dog-600.jpg 600w,
          /images/dog-1000.jpg 1000w
        "
        sizes="(max-width: 700px) 100vw, 700px"
        alt="obrázok čierneho psa"
        width="600"
        height="400"
        loading="lazy"
        decoding="async"
      >
    </picture>
  </div>
</body>

CSS (rovnaký základ)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  max-width: 700px;
  margin: 2rem auto;
}

.ukazka img {
  display: block;
  max-width: 100%;
  height: auto;
}

Prečo takto?

1) srcset = viac veľkostí toho istého obrázka

Hovoríš prehliadaču: „Tu máš 320/600/1000… vyber si.“

2) sizes = koľko bude obrázok reálne veľký na stránke

Toto je kľúčové. Bez sizes si prehliadač často vyberie väčší súbor “pre istotu”.

sizes="(max-width: 700px) 100vw, 700px" znamená:

  • keď je viewport do 700px → obrázok bude približne na celú šírku okna

  • inak bude mať max 700px

3) <picture> = moderný formát + fallback

Keď prehliadač vie WebP, zoberie WebP.
Keď nevie, spadne na <img> (jpg/png).

Keď chceme použiť srcset + sizes, tak najskôr musíme mať viac verzií toho istého obrázka (rôzne šírky). Lebo prehliadač si nemá z čoho vybrať, ak mu dáš len jeden súbor.

Čo to znamená v praxi

Musíš mať napríklad tieto súbory (ten istý obrázok, len zmenšený):

  • dog-320.jpg (pre mobily)

  • dog-600.jpg (stred)

  • dog-1000.jpg (desktop)

  • a ideálne aj to isté vo WebP:

    • dog-320.webp

    • dog-600.webp

    • dog-1000.webp

Až potom má zmysel napísať:

<img src="/images/dog-600.jpg" srcset="/images/dog-320.jpg 320w, /images/dog-600.jpg 600w, /images/dog-1000.jpg 1000w" sizes="(max-width: 700px) 100vw, 700px" >

Prečo to robíme

  • mobil si stiahne 320w (malý súbor),

  • desktop si stiahne 1000w (kvalita),

  • a ty nepreplácaš dáta tam, kde netreba.