Skip to content

Kõik WordPressist, veebiarendusest — ja mitte ainult

🎨 14 Kohatäiteteenust frontendile: mis töötab 2026. aastal

🎨 14 Kohatäiteteenust frontendile: mis töötab 2026. aastal

Ülevaateillustratsioon frontend-arenduse asendusteenustest

Ehitad küljendust, kleepid tavalise kohahoidja URL-i ja see ei lae. Brauser uputab su segasisu hoiatustega, sakk hangub pooleks minutiks. Tuttav olukord?

2010ndate alguse kohahoidjateenused surevad vaikselt: domeene ei pikendata, TLS-sertifikaadid aeguvad, päringulimiidid aeglustavad päringuid. Selle avastamine tund enne tähtaega pole üldse lõbus.

Testisime käsitsi 14 toimivat tööriista: värvilistest ristkülikutest AI-generatsiooni ja deterministlike avatarideni. Igaüks neist toetab HTTPS-i, püsib stabiilselt üleval ega vea alt, kui tagasüsteem pole veel valmis, aga küljendust on juba vaja näidata.

💡 Kiirülevaade:

  • Tüpoloogia: värvilised plokid, fototäited, SVG Edge-levitusega, avatarid, seadmete maketid ja AI-generatsioon; iga ülesande jaoks on tööriist olemas.
  • Kiirus: placeholders.dev ja placeholdr.dev töötavad Cloudflare Workersil ja teenindavad sisu lähimast Edge asukohast.
  • Turvalisus: kõik 14 teenust töötavad üle HTTPS-i. Mitte ühtegi segasisu hoiatust.
  • Kasutusvalmis kood: iga teenus pakub URL-i malli, mille saad sekunditega <img src> sisse kopeerida ja kleepida.

Valikukriteeriumid: mis teeb teenuse töötavate makettide jaoks sobivaks

Parameetrid, mille alusel me iga tööriista hindasime:

  • Ainult HTTPS. Segasisu on 2026. aastal punane lipp. Ilma TLS-ita teenused nimekirja ei pääsenud.
  • CDN** või Edge-levitus.** Globaalne katvus tähendab madalat latentsust igast asukohast.
  • Aktiivne hooldus. Värsked commit'id või uuendused viimase aasta jooksul.
  • Etteaimatav URL-i süntaks. Muster peaks olema esmapilgul arusaadav, ilma dokumentatsiooni lugemata.
  • Kaasaegsed formaadid. WebP, AVIF, SVG; ilma nendeta ei ole teenus konkurentsivõimeline.

Võrdlustabel

Vajadus

Parim valik

Formaat

CDN

Värvilised plokid tekstiga

Placehold.co

SVG, WebP, PNG

Jah

Fototäited makettidele

Lorem Picsum

JPEG, WebP

Jah

Konkreetsed suurused ja eelseaded

DummyImage

PNG, JPEG, GIF

Ei

Kiirus ja teravus

placeholders.dev

SVG

Edge

Kasutajate avatarid

DiceBear

SVG

Jah

Initsiaalidega avatarid

UI Avatars

PNG, SVG

Jah

Seadmete maketid

Placeit

PNG, JPEG

Jah

Temaatilised kohahoidjad

ASSETS.SO

JPEG, PNG

Jah

AI-pildigeneratsioon

placeholdr.dev

JPEG, WebP

Edge

1. Placehold.co: värviliste plokkide kuldstandard

Kuvatõmmis Placehold.co teenusest värviliste plokkidega

Saabus, et asendada ebausaldusväärne via.placeholder.com ja sai vaikimisi valikuks. HEX-värvid, Google Fonts, suurus: kõik läheb URL-i sisse. SVG, WebP, PNG. Muster on esmapilgul ilmne: /600x400/EEE/31343C?text=Hero+Image.

Plussid:

  • SVG, WebP, PNG: kolm formaati ühes teenuses.
  • HEX-värvid ja Google Fonts otse päringustringis.
  • Stabiilne CDN minimaalse latentsusega.

Miinused:

  • Ainult värvilised plokid. Teenus ei genereeri fotosid.
1<img src="https://placehold.co/600x400" alt="Placeholder">
2<img src="https://placehold.co/600x400/EEE/31343C?text=Hero+Image" alt="Hero">
3<img src="https://placehold.co/600x400.webp" alt="WebP format">

🔗 Placehold.co

2. Lorem Picsum: fototäited realistlike makettide jaoks

Kuvatõmmis Lorem Picsum teenusest näidispiltidega prototüüpide jaoks

„Lorem Ipsum, aga piltide jaoks." Pakub oma andmebaasist päris fotosid, ideaalne, kui värvilised ruudud tunduvad kohatud. seed parameeter lukustab pildi, hindamatu UI testimisel.

Filtrid (grayscale, blur) lisavad paindlikkust. Autorile viitamist ei nõuta.

Plussid:

  • Kvaliteetsed fotod makettide jaoks, mitte rämps varupildipankadest.
  • Hägususe ja halltooni filtrid.
  • seed korratavuse tagamiseks igal päringul.

Miinused:

  • Foto sisu üle puudub täpne kontroll. Saad selle, mis kaadrisse sattus.
1<img src="https://picsum.photos/800/600" alt="Random photo">
2<img src="https://picsum.photos/seed/product/400/300" alt="Fixed photo">
3<img src="https://picsum.photos/800/600?grayscale&blur=2" alt="Filtered">

🔗 Lorem Picsum

3. DummyImage: eelseaded igaks ülesandeks

Kuvatõmmis DummyImage teenusest suuruse eelseadistustega

Suurima kohandamisvõimalusega teenus tekstipõhiste kohahoidjate jaoks. Peamine omadus on kümned eelseaded: reklaamiformaadid (Leaderboard, Wide Skyscraper), kuvasuhted (16:9, 4:3), populaarsed resolutsioonid. Tausta- ja tekstivärvid HEX-koodiga, formaadid PNG, JPEG, GIF.

CDN puudub, seega kiirus sõltub geograafiast. Kohaliku arenduse puhul pole see kriitiline.

Plussid:

  • Kümneid eelseadistusi reklaamide, ekraanide ja tüüppaigutuste jaoks.
  • Täielik kontroll tausta ja teksti värvi üle.

Miinused:

  • CDN puudub. Latentsus on Austraaliast või Jaapanist märgatav.
1<img src="https://dummyimage.com/728x90/000/fff" alt="Leaderboard ad">
2<img src="https://dummyimage.com/16:9x1080" alt="HD ratio">

🔗 DummyImage

4. Placeholders.dev: SVG Edge-serveritelt

Kuvatõmmis placeholders.dev teenusest SVG-asendusega

Töötab Cloudflare Workersi peal ja edastab SVG-d Edge-serveritest. „Super kiire" pole turundusjutt: edastus lähimast Cloudflare'i asukohast tähendab ühekohalist millisekundilist latentsust. SVG tagab täiusliku teravuse Retina-ekraanidel igas mõõtkavas.

Plussid:

  • Lend genereerimine Cloudflare Workersi kaudu.
  • Teravus igal ekraanil tänu SVG-le.
  • Edge-edastus lähimast võrgupunktist.

Miinused:

  • Ainult SVG. Rasterformaadid ei ole toetatud.
1<img src="https://images.placeholders.dev/?width=400&height=300&bgColor=%23f0f0f0&textColor=%23333" alt="SVG placeholder">

🔗 placeholders.dev

5. DiceBear: deterministlikud avatarid

Kuvatõmmis DiceBear teenusest avataristiilide kollektsiooniga

Genereerib avatare põhimõttel „üks seeme, üks tulemus". Sisesta e-post või kasutajanimi ja saad iga päringuga sama avatari. Hindamatu kasutajanimekirjade ja administraatoripaneelide jaoks: sisu näib täidetud ilma päris fotodega kaasneva vaevata.

Üle kahekümne stiili, pikslikunstist realistlike nägudeni. Kõik SVG-s. API on avatud.

Plussid:

  • Kaks tosinat avataristiili.
  • Deterministlik genereerimine: seeme tagab korratavuse.
  • SVG täiuslikuks skaleerimiseks.

Miinused:

  • Ainult SVG. Raster-avataride jaoks on vaja täiendavat konverterit.
1<img src="https://api.dicebear.com/9.x/avataaars/[email protected]" alt="User avatar">

🔗 DiceBear

6. UI avatärid: piltide asemel initsiaalid

Kuvatõmmis UI Avatars teenusest initsiaalidega avatarinäidetega

Genereerib kasutaja initsiaalidega avatärid värvilisel taustal. Suurepärane kommentaaride, vestluste ja admin-paneelide jaoks, kus fotosid pole vaja, aga näotud hallid ringid on häirivad. Suurus, font, taustavärv ja teksti värv on kõik seadistatavad URL-i parameetrite kaudu.

Teenus on täiesti avatud: lähtekood GitHubis, oma instantsi saab püsti panna 10 minutiga. Oluline pluss privaatsusnõuetega projektidele.

Plussid:

  • Piltide asemel initsiaalid kohese laadimisega.
  • Täielik kontroll taustavärvi, teksti värvi ja fondi üle.
  • Avatud lähtekood GitHubis.

Miinused:

  • Ainult tekst värvilisel taustal. Illustratsioone ei toetata.
1<img src="https://ui-avatars.com/api/?name=John+Doe&size=128&background=0D8ABC&color=fff" alt="JD Avatar">

🔗 UI Avatars

7. Lorem Flickr: Creative Commonsi litsentsiga fotod

Kuvatõmmis Lorem Flickr teenusest ühe Flickri fotoga

Otsib Flickr'ist Creative Commonsi litsentsiga fotosid ja pakub neid kohatäitjatena. Võrreldes Lorem Picsumiga saad siin rohkem „siirasid" kaadreid ja vähem lavastatud kompositsioone. Kvaliteet kõigub, kuid makettide puhul, kus autentsus loeb, on see pluss.

Parameeter lock fikseerib pildi. Märksõnaotsing kitsendab valikut.

Plussid:

  • Märksõnaotsing.
  • lock pildi püsivuse tagamiseks.
  • Creative Commons läbipaistva litsentsimisega.

Miinused:

  • Ettearvamatu kvaliteet: meistriteosest uduse klõpsuni.
1<img src="https://loremflickr.com/1280/720" alt="Flickr Image">

🔗 Lorem Flickr

8. Placeit: professionaalsed seadmemaketid

Kuvatõmmis Placeit platvormist seadmemakettide mallidega

Envato platvorm ligi 3000 maketimalliga: iPhone, Samsung, lauaarvutid, sülearvutid, tahvlid. Teenus on tasuline (Envato tellimus), kuid disainide esitlemiseks klientidele või portfoolios annab see tulemuse, mis on eristamatu stuudiorenderdustest.

Lohista ja kukuta: laadi üles ekraanipilt, vali seade, laadi alla. Äriliste esitluste puhul tasub see end kohe ära.

Plussid:

  • Ligi 3000 seadme- ja stsenaariumimalli.
  • Lohista-ja-kukuta liides, mis ei nõua disainioskusi.

Miinused:

🔗 Placeit

9. ASSETS.SO: teemakohased iseloomuga kohatäitjad

Kuvatõmmis ASSETS.SO teenusest temaatiliste asendustega

Lisab arendaja igapäevarutiini konteksti. Kategooriad: mängud, filmid, muusika, sport, jalanõud. Filmisait, kus on päris kaadrid, näeb veenvam välja kui värviliste ruutudega makett. API on lihtne: /game.jpg?w=1280&h=720.

Plussid:

  • Temaatilised kategooriad erinevate niššide jaoks.
  • Äärmiselt lihtne API.

Miinused:

  • Minimaalne kontroll sisu üle.
1<img src="https://via.assets.so/game.jpg?w=1280&h=720" alt="Game Asset">

🔗 ASSETS.SO

10. RoboHash: robot-avatarid testandmete jaoks

Kuvatõmmis RoboHash teenusest robotavataride näidetega

Genereerib igast tekstist unikaalseid roboteid. Põhimõte on sama mis DiceBearil (deterministlik genereerimine), kuid iseloomuga: igal robotil on oma ilme ja värvilahendus. Stiilid: klassikalised robotid, koletised, robotkassid.

Sobib prototüüpidele, kus soovid testprofiilidele isikupära lisada.

Plussid:

  • Deterministlik genereerimine tekstist.
  • Kolm stiili: robotid, koletised, kassid.
  • Avatud lähtekoodiga.

Miinused:

  • Ainult PNG. SVG ei ole toetatud.
1<img src="https://robohash.org/[email protected]" alt="Robot avatar">

🔗 RoboHash

11. Bacon Mockup: peekon igas resolutsioonis

Kuvatõmmis Bacon Mockup teenusest peekonipildiga

Isuäratavad peekonipildid igas resolutsioonis. Restoranilehtede, toidublogide või kolleegidega nalja tegemiseks. Kõlab nagu nali, kuid teenus on olnud stabiilne juba mitu aastat.

Kõrge resolutsioon, lihtne API. Nišš, kuid meeldejääv.

Plussid:

  • Kõrge resolutsiooniga fotod.
  • Äärmiselt lihtne API.

Miinused:

  • Kitsas teema. Kasutu väljaspool toiduprojekte.
1<img src="https://baconmockup.com/1280/720" alt="Bacon">

🔗 Bacon Mockup

12. Placebeard.it: mehisus igas pikslis

Kuvatõmmis Placebeard.it teenusest habemega mehe fotoga

Vastus placekitten-ile, midagi maalähedasemat ja mehelikumat. Värvi- või mustvalged fotod habemikest inimestest igas proportsioonis. Mõeldud barbershopidele, meestemoekauplustele ja hipster-startupidele. Halltoonid on toetatud. Teenus on pikka aega stabiilselt töötanud.

Plussid:

  • Temaatilised fotod, ideaalsed meeste segmendile.
  • Halltoonide tugi.

Miinused:

  • Kitsas teema. Ei sobi naispublikule.
1<img src="https://placebeard.it/1280x720" alt="Beard">

🔗 Placebeard.it

13. Placebear: toores looduslik jõud

Kuvatõmmis Placebear teenusest karu fotoga

Suured, karvased ja mõnikord ohtlikud kohahoidjad. Suurepärane reageerimisvõime testimiseks keerulise tekstuuriga piltidel: karv, rohi ja puukoor pakuvad rikkalikku materjali tihendamise ja suuruse muutmise kontrollimiseks.

Kõrge resolutsiooniga fotod, stabiilne tööaeg. Ei sobi igasse projekti, kuid tasub järjehoidjatesse jätta.

Plussid:

  • Kõrge resolutsiooniga fotod.
  • Stabiilne tööaeg.

Miinused:

  • Spetsiifiline sisu. Iga klient ei hinda karu oma maketis.
1<img src="https://placebear.com/1280/720" alt="Bear">

🔗 Placebear

14. Placeholdr.dev: AI-põhine pildikohahoidjate genereerimine

Kuvatõmmis AI teenusest placeholdr.dev pildigeneratsiooni näidetega

Selle niši kõige värskem tegija: AI genereerimine Flux difusioonimudeli abil Cloudflare Workers platvormil koos R2 vahemäluga. Esimene päring võtab renderdamiseks mitu sekundit; järgmised päringud serveeritakse vahemälust koheselt.

URL-i formaat: /{width}x{height}/{prompt}. Stiilid: fotograafiline, kunstiline, anime, õlimaal, 3d-render, koomiks. seed (1-3) lukustab variandi. Tasuta, kontot pole vaja.

Plussid:

  • AI genereerimine: loomulikus keeles kirjeldused HEX-koodide asemel.
  • Kuus stiili fotorealismist kuni 3D-renderini.
  • Edge-levi Cloudflare Workersi kaudu.

Miinused:

  • Esimene päring on aeglane (renderdamine võtab mitu sekundit).
  • Noor teenus (käivitatud jaanuaris 2026); pikaajaline stabiilsus on ebakindel.
1<img src="https://placeholdr.dev/600x400/minimalist modern office" alt="AI-generated office">
2<img src="https://placeholdr.dev/320x320/cat?style=anime" alt="AI anime cat">
3<img src="https://placeholdr.dev/1024x768/camera?style=3d-render&seed=3" alt="AI 3D camera">

🔗 placeholdr.dev

Tehnilised kaalutlused: CSP, võrguühenduseta režiim ja miks vanad URL-id surevad

Content-Security-Policy päised

Kui teie sait kasutab ranget CSP-d, blokeerib brauser vaikimisi välised pildikohahoidjate teenused. Uuendage img-src direktiivi:

1Content-Security-Policy: img-src 'self' https://placehold.co https://picsum.photos;

Oluline: eemaldage need domeenid CSP-st enne tootmiskeskkonda üleviimist. Pildikohahoidjad on mõeldud arenduseks, mitte avalikele saitidele.

Kohalik arendus ilma internetita

Võrguühenduseta arenduseks või privaatsusnõuetega projektide jaoks:

  • Kliendipoolne pildikohahoidjate genereerimine Canvas või SVG abil.
  • Kohalik generaatori skript Node.js-is.
  • Staatilised pildikohahoidjate failid repositooriumis.

Miks vanad URL-id surevad

Enamik 2010. aastate alguse teenuseid olid kõrvalprojektid: käivitati, hooldati paar aastat ja seejärel hüljati. Domeeni registreering aegub, sertifikaat aegub ja URL muutub kõrvitsaks. Valige teenuseid, millel on hiljutised koodimuudatused ja äriline tugi.

⁉️🤔 Korduma kippuvad küsimused

Kas ma võin tootmiskeskkonnas pildikohahoidjaid kasutada?

Ei. Pildikohahoidjate teenused on mõeldud ainult arenduseks ja prototüüpimiseks. Päringute piirangud, katkestused, latentsus koormuse all. Asendage pildikohahoidjad enne avaldamist reaalsete varadega.

Miks mõned teenused püsivad aastaid, samas kui teised surevad paari hooaja jooksul?

Erinevus seisneb tugimudelis. Ärilistel või sponsoreeritud teenustel on pühendatud ressursid ja need saavad stabiilseid uuendusi. Üksikud kõrvalprojektid sõltuvad entusiasmist. Kontrollige koodimuudatuste ajalugu: kui viimane oli kolm aastat tagasi, otsige alternatiivi.

Kuidas lukustada sama pilt igal lehe uuestilaadimisel?

Kasutage seed parameetrit. Lorem Picsum: /seed/product/400/300. DiceBear: [email protected]. RoboHash: suvaline tekst URL-is. placeholdr.dev: ?seed=1 (kolm varianti). Üks seeme annab alati ühe tulemuse.

Kas ma pean pildikohahoidjate jaoks CSP-d uuendama?

Jah. Kui teie saidil on Content-Security-Policy päised seadistatud, lisage teenuse domeenid img-src direktiivi, vastasel juhul blokeerib brauser laadimise. Ärge unustage neid enne juurutamist eemaldada.

Kas välised pildikohahoidjad mõjutavad kohaliku arenduse kiirust?

Iga välise URL-iga <img> silt teeb HTTP-päringu. CDN-i ja Edge'iga teenused töötavad kiiresti, kuid täielikuks autonoomiaks hoidke oma repositooriumis staatiliste pildikohahoidjate komplekti.

Mis formaat on pildikohahoidjate jaoks parim?

SVG geomeetriliste kujundite ja teksti jaoks: minimaalne maht, täiuslik skaleerimine. WebP fotokohtade jaoks: märgatavalt kergem kui JPEG sama kvaliteedi juures. PNG, kui vajate läbipaistvust. AVIF, kui teie sihtrühma brauserid seda toetavad.

Kas ma võin nende teenuste pilte ärilistes makettides kasutada?

Enamik teenuseid pakub sisu tasuta ja autorile viitamata. Flickr-põhised teenused töötavad Creative Commonsi litsentsidega; kontrollige iga foto litsentsi. Placeit nõuab vesimärgita allalaadimiseks Envato tellimust.

Mida järjehoidjatesse panna: 2026. aasta pildikohahoidjate lõplik kokkuvõte

Meie valikud igapäevatööks: Placehold.co värviliste plokkide jaoks, Lorem Picsum fotomakettide jaoks ja DiceBear avataride jaoks. Need kolm teenust katavad valdava enamuse ülesannetest.

Vajate kiirust Retina ekraanil? placeholders.dev koos Edge SVG-ga. Soovite kontekstipõhiseid visuaale ilma fotopankades otsimata? placeholdr.dev koos AI genereerimisega. Valmistate ette ärilist esitlust? Placeit oma kolme tuhande maketiga.

Peamine reegel jääb samaks: pildikohahoidjad elavad arendusserveris. Enne juurutamist asendage iga väline URL reaalse varaga. Hoidke järjehoidjates kaht või kolme varuteenust; see, mis eile töötas, võib homme võrguühenduseta olla.