Wireframe / mockup, kde nemáš ešte skutočné obrázky. Test layoutu pri rôznych rozmeroch obrázkov. Demo galérie, kde každý obrázok má rozumnú veľkosť. Náhrada za externý placeholder.com — beží lokálne, nezaťažuje sieť.

SVG ≠ raster. SVG je vektor — zachová ostrosť pri akejkoľvek veľkosti. Aspect ratio testuj v HTML. data URI v src. Funguje vždy, ale veľké data URI zvyšujú HTML size. Aspect ratio. CSS s aspect-ratio zachová rozmery; bez toho sa môže placeholder roztiahnuť. Accessibility. Placeholder má mať alt atribút, najmä keď je tam meaningful text.

Generátor placeholder obrázkov

Vygeneruj inline-SVG placeholder obrázky akejkoľvek veľkosti s vlastným textom a farbami. Výstup ako data URI alebo stiahnuteľné SVG.

Width (px)

Height (px)

Background colour

Text colour

Label text (leave blank for "WxH")

Preview

SVG markup

Data URI

Download

Vytvoril JXXR1 · ♥ Sponzorovať · ☕ Kúp mi kávu

Načo to slúži?

Vygeneruje inline SVG placeholder obrázok zvolenej veľkosti, s vlastným textom (default je „WxH") a farbami. Výstup je buď stiahnuteľný SVG súbor, alebo data URI, ktoré môžeš inline vložiť do HTML / CSS.

Kedy to použiť

Wireframe / mockup, kde nemáš ešte skutočné obrázky.
Test layoutu pri rôznych rozmeroch obrázkov.
Demo galérie, kde každý obrázok má rozumnú veľkosť.
Náhrada za externý placeholder.com — beží lokálne, nezaťažuje sieť.

Časté chyby

SVG ≠ raster. SVG je vektor — zachová ostrosť pri akejkoľvek veľkosti. Aspect ratio testuj v HTML.
data URI v src. Funguje vždy, ale veľké data URI zvyšujú HTML size.
Aspect ratio. CSS s aspect-ratio zachová rozmery; bez toho sa môže placeholder roztiahnuť.
Accessibility. Placeholder má mať alt atribút, najmä keď je tam meaningful text.