CDRN

Generovat placeholder obrázek

  • Dokumentace
  • API

Jak ho používat?

Specifikujte velikost požadovaného obrázku přímo v URL volání. Vygenerované obrázky můžete použít ve svých HTML nebo CSS podle příkladu

První parametr definuje šířku obrázku

Druhý parametr definuje výšku obrázku. Je volitelný. Pokud není definován, výška bude identická šířce obrázku (obrázek bude čtvercový).


        <img src="https://cdrn.fr/60" alt="placeholder image">
        <img src="https://cdrn.fr/120x100" alt="placeholder image">
        <img src="https://cdrn.fr/80x100" alt="placeholder image">
placeholder image placeholder image placeholder image

Příklady

Čtvercové obrázky


        <img src="https://cdrn.fr/32" alt="placeholder image">
        <img src="https://cdrn.fr/64" alt="placeholder image">
        <img src="https://cdrn.fr/96" alt="placeholder image">
        <img src="https://cdrn.fr/128" alt="placeholder image">
placeholder image placeholder image placeholder image placeholder image

Obrázky se specifickými výškami


        <img src="https://cdrn.fr/100x60" alt="placeholder image">
        <img src="https://cdrn.fr/200x120" alt="placeholder image">
        <img src="https://cdrn.fr/75x120" alt="placeholder image">
        <img src="https://cdrn.fr/150x240" alt="placeholder image">
placeholder image placeholder image placeholder image placeholder image

Často kladené otázky

V jakém formátu je servírovaný vygenerovaný obrázek?

Obrázky jsou vraceny ve formátu JPEG, optimalizovaném pro web. Váha zůstává minimální i pro velké rozměry, což činí nástroj vhodným pro HTML a CSS mockupy obsahující mnoho placeholderů. Vizuální obsah je gradient nebo neutrální výplňová barva, nikdy skutečná fotka podléhající autorským právům.

Existuje limit velikosti pro vygenerované obrázky?

Rozumné rozměry jdou od 16 px do asi 2000 px na stranu. Nad to zůstává rendering možný, ale generování se stává pomalé bez skutečné užitečnosti, protože placeholdery jsou určeny skromnějším mockupům. Pro hero vizuál 1920 x 1080 nástroj reaguje bez problému.

Je URL stabilní a použitelná v produkci?

URL /image/<sirka>/<vyska> je deterministická, můžete ji vložit tak jak je do svých <img> tagů bez předchozího stahování. Pro produkční prostředí preferujte hostování konečných obrázků u vás: tato služba je především určena pro mockupy, storybooky a integrační testy.

Jaký je rozdíl s Lorem Picsum nebo Placeholder.com?

Lorem Picsum vrací skutečné náhodné fotky, sympatické pro dodání realismu mockupu. Placeholder.com servíruje obrázky se štítkem rozměrů. Generátor cdrn vrací jednoduché a rychlé placeholdery, bez externího volání ani třetí závislosti ve vašem front-end projektu.

Lze vybrat barvu placeholderu?

Ne v této verzi. Obrázky jsou generovány s předdefinovaným neutrálním renderingem. Pokud potřebujete přesně ovládat barvu pozadí pro validaci layoutu s kontrasty, vytvořte statický soubor o pár kilobajtech v požadovaném odstínu nebo použijte přímo CSS div s background-color.

Jaký zájem pro front-end developera?

Rychle otestovat layout bez nutnosti dodávat skutečný obrázek, validovat responzivitu mřížky vložením několika poměrů, napájet storybook nebo Figma-na-HTML preview. Pro marketéry a designéry slouží nástroj k náčrtu wireframů vysoké věrnosti bez závislosti na licencovaných fotografiích.

tento nástroj neposkytuje API pro spuštění