srcset / Responsive Image Generátor

K čemu je srcset / Responsive Image

Responzivní obrázky jsou jedna z věcí, které každý webař ví, že by měl řešit – ale ruční psaní `srcset` atributů je otrava. Pokud připravuješ web pro klienta nebo ladíš výkon vlastního projektu, tohle za tebe vygeneruje přesný HTML kód, který prohlížeči řekne, jaký obrázek má načíst na jaké šířce obrazovky.

Hodí se hlavně frontendistům, webdesignerům a OSVČ, kteří buildují weby na WordPressu nebo v jakémkoliv statickém generátoru a nechtějí ručně počítat breakpointy a psát syntaxi, kde se jedna překlep promítne do načítání obřího obrázku na mobilu.

USP je jednoduchost: zadáš šířky variant obrázku, nástroj ti vrátí hotový `<img>` tag se správně sestaveným `srcset` i `sizes` atributem. Žádné memorování syntaxe, žádné chyby z překlepů.

Co umí

• Generuje `<img>` tag s atributy `srcset` a `sizes` připravenými k okamžitému použití
• Podporuje libovolný počet šířkových variant (např. 480w, 768w, 1200w)
• Volitelně přidá `<picture>` element pro podporu moderních formátů
• Umožňuje nastavit fallback `src` pro starší prohlížeče
• Výstup je čistý HTML, který zkopíruješ přímo do kódu

Jak to funguje

1. Zadej název souboru nebo vzor URL pro jednotlivé varianty obrázku.
2. Přidej šířky variant – například 480, 768 a 1200 pixelů.
3. Volitelně uprav `sizes` atribut, pokud obrázek nezabírá celou šířku viewportu (např. `(max-width: 768px) 100vw, 50vw`).
4. Nástroj vygeneruje hotový HTML kód přímo v prohlížeči – nic se neposílá na server.
5. Zkopíruj výsledný kód a vlož ho do svého projektu.

Časté otázky

Jaký je rozdíl mezi `srcset` a `<picture>` elementem?

`srcset` na `<img>` tagu nechá prohlížeč vybrat nejvhodnější variantu podle rozlišení a šířky viewportu. `<picture>` element ti dává větší kontrolu – můžeš servírovat různé formáty (WebP, AVIF) nebo úplně jiné ořezy pro různé breakpointy.

Musím mít obrázky fyzicky připravené ve více velikostech?

Ano, nástroj generuje pouze HTML kód – samotné ořezy nebo zmenšeniny si musíš připravit předem. Na kompresi a převod do WebP se hodí nástroj jako WebP Kompresor, který najdeš ve stejné sekci.

Jak zjistím, jaké šířky variant použít?

Záleží na layoutu. Pokud obrázek zabírá celou šířku, stačí odpovídající breakpointy (mobil, tablet, desktop). Pro výpočet poměrů stran se hodí Aspect Ratio Kalkulátor. Nejběžnější kombinace je 480w, 768w, 1200w a 1920w.

Funguje výsledný kód ve všech prohlížečích?

`srcset` podporují všechny moderní prohlížeče. Pro IE11 se vyplatí mít vyplněný fallback `src`, který nástroj také generuje – starší prohlížeče ho prostě načtou místo responzivní varianty.