Placehold.it – online generátor zástupných obrázků

Vytváříte pro své klienty webové stránky a využíváte při vývoji wireframy a prototypy? Pak se vám určitě bude hodit služba Placehold.it.

Smysl služby Placehold.it je velmi jednoduchý. Zadáte URL adresu, která obsahuje určité parametry a služba vám na základě těchto parametrů vygeneruje obrázek, který bude mít potřebné rozměry, barvu pozadí a popředí a bude obsahovat zadaný text. Výsledný obrázek může vypadat například takto.

Pokud např. vytváříte HTML prototopy a potřebujete do stránky vložit zástupný obrázek (image placeholder, dummy image), nemusíte si nikde bokem v grafickém editoru připravovat obrázky potřebných rozměrů. Stačí do kódu vložit např.

<img src=“http://placehold.it/580×200/1B545F/FFFF0F.png“ />

a na stránce se vám objeví stejný obrázek, který je zobrazen výše.

Parametry pro generování obrázků

Při generování obrázků je možné specifikovat následující parametry:

• šířka a výška obrázku,
• barvy popředí a pozadí,
• zobrazený text (nepodporuje české znaky),
• formát obrázku (GIF, JPEG, JPG, PNG).

Jediným povinným parametrem je šířka obrázku. Pro získání obrázku znázorněného vpravo (200 x 200 px) si stačí zobrazit stránku http://placehold.it/200.

Syntaxe URL adresy je následující:

http://placehold.it/šířkaxvýška/barva-pozadí.formát-souboru/barva-popředí&text=test

Podtržené části URL představují hodnoty, které můžete měnit. Parametr pro určení formátu souboru se může přilepit ke kterémukoliv parametru kromě textu. Mezery v textu se vyjadřují pomocí znaku +.

Příklady generovaných obrázků

Obrázek 300 x 300 px s černým pozadí a bílým textem ve formátu GIF.

http://placehold.it/300/000000/FFFFFF

Obrázek 200 x 400 px s modrým pozadím ve formátu PNG a s textem Ahoj lidi.

http://placehold.it/200×400.png/0000FF&text=Ahoj+lidi

Další služby pro generování dummy obrázků

Placehold.it samozřejmě není jedinou službou svého druhu. Stejné nebo podobné stejné funkce nabízí například také:

• Dynamic Dummy Image Generator
  • možnost zadání jednoho rozměru číslem a druhého pomocí požadovaného poměru stran obrázku,
  • podporuje i české znaky v textu,
  • dostupný zdrojový kód v PHP, Pythonu, Ruby a dalších jazycích,
  • možnost používat zkratky pro obvyklé rozměry reklamních bloků
• Flickholdr
  • vrací obrázky z Flickru, které mají odpovídající rozměry
  • lze využít také Flickr štítky pro bližší specifikaci obrázku
• lorempixel
  • možnost zadat rozměry obrázku, téma obrázku a jestli má jít o barevný nebo černobílý obrázek