Wireframe / mockup, kde nemáš ještě skutečné obrázky. Test layoutu při různých rozměrech obrázků. Demo galerie, kde každý obrázek má rozumnou velikost. Náhrada za externí placeholder.com — běží lokálně, nezatěžuje síť.

SVG ≠ raster. SVG je vektor — zachová ostrost při jakékoli velikosti. Aspect ratio testuj v HTML. data URI v src. Funguje vždy, ale velké data URI zvyšují HTML size. Aspect ratio. CSS s aspect-ratio zachová rozměry; bez toho se může placeholder roztáhnout. Accessibility. Placeholder má mít alt atribut, zvláště když je tam meaningful text.

Generátor placeholder obrázků

Vygeneruj inline-SVG placeholder obrázky jakékoli velikosti s vlastním textem a barvami. Výstup jako data URI nebo stáhnutelné SVG.

Width (px)

Height (px)

Background colour

Text colour

Label text (leave blank for "WxH")

Preview

SVG markup

Data URI

Download

Vytvořil JXXR1 · ♥ Sponzorovat · ☕ Kup mi kávu

K čemu to slouží?

Vygeneruje inline SVG placeholder obrázek zvolené velikosti, s vlastním textem (default je „WxH") a barvami. Výstup je buď stáhnutelný SVG soubor, nebo data URI, který můžeš inline vložit do HTML / CSS.

Kdy to použít

Wireframe / mockup, kde nemáš ještě skutečné obrázky.
Test layoutu při různých rozměrech obrázků.
Demo galerie, kde každý obrázek má rozumnou velikost.
Náhrada za externí placeholder.com — běží lokálně, nezatěžuje síť.

Časté chyby

SVG ≠ raster. SVG je vektor — zachová ostrost při jakékoli velikosti. Aspect ratio testuj v HTML.
data URI v src. Funguje vždy, ale velké data URI zvyšují HTML size.
Aspect ratio. CSS s aspect-ratio zachová rozměry; bez toho se může placeholder roztáhnout.
Accessibility. Placeholder má mít alt atribut, zvláště když je tam meaningful text.