CDRN

Wygeneruj obraz zastępczy

  • Dokumentacja
  • API

Jak korzystać?

Określ pożądany rozmiar obrazu bezpośrednio w wywołaniu URL. Możesz używać wygenerowanych obrazów w swoim HTML lub CSS zgodnie z przykładem

Pierwszy parametr definiuje szerokość obrazu

Drugi parametr definiuje wysokość obrazu. Jest opcjonalny. Jeśli nie zostanie zdefiniowany, wysokość będzie identyczna z szerokością obrazu (obraz będzie kwadratowy).


        <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

Przykłady

Obrazy kwadratowe


        <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

Obrazy z konkretnymi wysokościami


        <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

Najczęściej zadawane pytania

W jakim formacie jest serwowany wygenerowany obraz?

Obrazy są zwracane w formacie JPEG, zoptymalizowanym dla sieci. Waga pozostaje minimalna nawet dla dużych wymiarów, co czyni narzędzie odpowiednim dla makiet HTML i CSS zawierających wiele placeholderów. Zawartość wizualna to gradient lub neutralny kolor wypełnienia, nigdy prawdziwe zdjęcie podlegające prawom autorskim.

Czy istnieje limit rozmiaru wygenerowanych obrazów?

Rozsądne wymiary mieszczą się od 16 px do około 2000 px na bok. Powyżej tego rendering pozostaje możliwy, ale generowanie staje się powolne bez realnej użyteczności, ponieważ placeholdery są przeznaczone dla skromniejszych makiet. Dla wizualizacji hero 1920 x 1080 narzędzie odpowiada bez problemu.

Czy URL jest stabilny i nadaje się do produkcji?

URL /image/<largeur>/<hauteur> jest deterministyczny, możesz go wkleić takim, jakim jest, w swoje tagi <img> bez wcześniejszego pobierania. Dla środowiska produkcyjnego preferuj hostowanie definitywnych obrazów u siebie: ta usługa jest przede wszystkim przeznaczona do makiet, storybooków i testów integracyjnych.

Jaka jest różnica z Lorem Picsum lub Placeholder.com?

Lorem Picsum zwraca prawdziwe losowe zdjęcia, sympatyczne, aby nadać realizm makiecie. Placeholder.com serwuje obrazy z etykietą wymiarów. Generator cdrn zwraca proste i szybkie placeholdery, bez zewnętrznego wywołania ani zależności od podmiotów trzecich w twoim projekcie front-end.

Czy można wybrać kolor placeholdera?

Nie w tej wersji. Obrazy są generowane z neutralnym, predefiniowanym renderem. Jeśli potrzebujesz precyzyjnej kontroli koloru tła, aby zweryfikować layout z kontrastami, utwórz statyczny plik o kilku kilobajtach w pożądanym odcieniu lub użyj bezpośrednio elementu div CSS z background-color.

Jakie znaczenie dla programisty front-end?

Szybkie przetestowanie layoutu bez konieczności dostarczania rzeczywistego obrazu, walidacja responsywności siatki przez przeciągnięcie kilku proporcji, zasilenie storybooka lub podglądu Figma-do-HTML. Dla marketerów i projektantów narzędzie służy do szkicowania wireframe'ów wysokiej wierności bez zależności od zdjęć licencjonowanych.

to narzędzie nie udostępnia API wykonawczego