Ako na responzívne obrázky

Toto je praktický základ: aby obrázok nepretiekol z kontajnera, nespôsoboval skákanie layoutu a zbytočne nespomaľoval stránku.

Ako na responzívne obrázky

 

Základná HTML ukážka

<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>

Základné CSS

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

.ukazka img {
  display: block;   /* odstráni medzeru pod obrázkom */
  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 nastavenú veľkosť alebo prídu vo veľkom rozmere a kontajner je užší.

Základné riešenie je skoro vždy toto duo: max-width: 100%; a height: auto;

  • keď je kontajner úzky, obrázok sa zmenší,
  • keď je kontajner širší, obrázok môže zostať vo svojej prirodzenej veľkosti,
  • ale nepretečie mimo rodiča.

2) Ako „pripraviť miesto“ pre obrázok ešte pred načítaním

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

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

Prečo to funguje? Pretože prehliadač si vie dopredu vypočítať pomer strán a rezervuje miesto ešte pred načítaním súboru.

Výsledok: stránka neskáče.

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

Ak máš dlhú stránku a obrázky sú až nižšie, je zbytočné ich sťahovať hneď.

loading="lazy"

Príklad:

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

Kedy lazy nedávať?

Na hlavný obrázok hore na stránke, napríklad hero alebo prvý veľký vizuál. Ten chceš zobraziť čo najskôr.

4) decoding="async" ako malý bonus

decoding="async"

Hovorí prehliadaču: „ak sa dá, dekóduj obrázok mimo hlavnej práce stránky“.

Nie je to zázrak, ale je to čisté a bezpečné nastavenie.

5) Keď chceš rovnaký výrez na všetkých zariadeniach

Toto je iná situácia. Nechceš ukázať celý obrázok, ale chceš, aby vyplnil box, napríklad ako banner alebo karta.

.ukazka {
  border: 1px solid #a50000;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.ukazka img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Rozdiel je takýto:

  • height: auto = ukáže celý obrázok, len ho zmenší
  • object-fit: cover = vyplní box, ale odreže okraje

6) Najčastejšie chyby

  • chýba max-width: 100% → obrázok pretečie z kontajnera
  • obrázok je inline → vzniká medzera pod obrázkom
  • chýba width a height → stránka môže pri načítaní skákať
  • loading="lazy" na prvom hero obrázku → zbytočne spomalíš to, čo má byť hore vidieť hneď

Moderný základ pre reálny web

Doteraz sme riešili:

  • aby obrázok nepretiekol,
  • aby neskákala stránka,
  • aby sa neťahalo všetko naraz.

Ale stále môže byť problém: mobil si môže stiahnuť zbytočne veľký súbor, aj keď ho zobrazí len v malej šírke.

Tu nastupujú:

  1. srcset + sizes = rôzne veľkosti toho istého obrázka
  2. <picture> = moderný formát + fallback

<picture> + srcset + sizes

HTML

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

  <div class="ukazka">
    <picture>
      <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"
      >

      <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

* {
  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áš viac verzií toho istého obrázka, vyber si vhodnú.“

2) sizes = aký veľký bude obrázok na stránke

Toto je dôležité. Bez sizes si prehliadač často vezme väčší súbor „pre istotu“.

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

To znamená:

  • keď je viewport do 700px → obrázok bude približne na celú šírku okna,
  • inak bude mať maximálne 700px.

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

Keď prehliadač podporuje WebP, zoberie WebP.

Keď nie, použije <img> ako fallback.

Čo musíš mať pripravené

Keď chceš použiť srcset a sizes, musíš mať viac verzií toho istého obrázka v rôznych šírkach.

Napríklad:

  • dog-320.jpg → mobil
  • dog-600.jpg → stredná veľkosť
  • dog-1000.jpg → desktop

A ideálne aj vo WebP:

  • dog-320.webp
  • dog-600.webp
  • dog-1000.webp

Až potom má zmysel niečo takéto:

<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 menší súbor,
  • desktop si stiahne väčší a kvalitnejší,
  • a netlačíš zbytočné dáta tam, kde netreba.

Zhrnutie

  • základ responzívneho obrázka je max-width: 100% a height: auto
  • width a height v HTML pomáhajú zabrániť skákaniu layoutu
  • loading="lazy" dávaj na obrázky nižšie na stránke, nie na hlavný hero obrázok
  • object-fit: cover je na výrez, nie na zobrazenie celého obrázka
  • srcset a sizes riešia, aby si zariadenia neťahali zbytočne veľké súbory
  • <picture> sa hodí na moderné formáty a fallback

 

Súvisí to aj s tým, čo robím

Pozrite sa, s čím viem pomôcť

Ak riešite nový web, úpravy existujúcej stránky alebo audit SEO, GEO, prístupnosti a výkonu, pozrite si moje služby.

Jednoduchý web na mieru

Pre menšie prezentácie, firemné weby a stránky, ktoré majú byť prehľadné, rýchle a ľahko použiteľné.

Pozrieť službu

Zložitejší web na mieru a webová aplikácia

Keď už nestačí len jednoduchá prezentácia a web potrebuje vlastnú logiku, správu dát alebo rozšírené funkcie.

Pozrieť službu

SEO, GEO a prístupnostný audit

Kontrola technického stavu webu, viditeľnosti vo vyhľadávaní, prístupnosti a celkovej použiteľnosti.

Pozrieť službu

Úpravy a rozšírenie webu

Keď web už existuje, ale potrebuje opravy, vylepšenia, zrýchlenie alebo nové časti.

Pozrieť službu
← Späť na blog Pozrieť služby →