Rakennat sommittelua, liität tutun placeholder-URL:n, eikä se lataudu. Selain tulvii sekasisältövaroituksia, välilehti jumittuu puoleksi minuutiksi. Kuulostaako tutulta?

2010-luvun alun placeholder-palvelut kuolevat hiljaa: domaineja ei uusita, TLS-varmenteet vanhenevat, nopeusrajoitukset kuristavat pyynnöt. Tämän huomaaminen tunti ennen deadlinea ei naurata yhtään.

Testasimme käsin 14 toimivaa työkalua: värisuorakaiteista tekoälygenerointiin ja deterministisiin avatareihin. Jokainen tukee HTTPS:ää, pysyy vakaasti pystyssä eikä petä, kun backend ei ole vielä valmis mutta sommittelu pitää jo näyttää.

💡 Pikaopas:

• Tyypit: värilohkot, kuvatäytteet, SVG Edge-toimituksella, avatarit, laitemockupit ja tekoälygenerointi; joka tehtävään löytyy työkalu.
• Nopeus: placeholders.dev ja placeholdr.dev pyörivät Cloudflare Workersilla ja tarjoilevat sisältöä lähimmästä Edge-sijainnista.
• Tietoturva: kaikki 14 palvelua toimivat HTTPS:n yli. Ei minkäänlaisia sekasisältövaroituksia.
• Valmis koodi: jokainen palvelu antaa URL-mallin, jonka voit kopioida ja liittää <img src>-attribuuttiin sekunneissa.

Valintakriteerit: mikä tekee palvelusta sopivan toimiviin mockupeihin

Parametrit, joilla arvioimme jokaisen työkalun:

• Vain HTTPS. Sekasisältö vuonna 2026 on punainen lippu. Palvelut ilman TLS:ää eivät päässeet listalle.
• CDN- tai Edge-toimitus. Globaali kattavuus tarkoittaa matalaa viivettä mistä tahansa sijainnista.
• Aktiivinen ylläpito. Tuoreita committeja tai päivityksiä viimeisen vuoden sisällä.
• Ennustettava URL-syntaksi. Kaavan pitäisi olla ilmeinen ensi silmäyksellä, ilman dokumentaation lukemista.
• Modernit formaatit. WebP, AVIF, SVG; ilman niitä palvelu ei pärjää vertailussa.

Vertailutaulukko

1. Placehold.co: värilohkojen kultastandardi

Saapui korvaamaan epäluotettavan via.placeholder.com-palvelun ja nousi oletusvalinnaksi. HEX-värit, Google Fontsit, koko: kaikki menee URL-osoitteeseen. SVG, WebP, PNG. Kaava on ilmeinen ensi silmäyksellä: /600x400/EEE/31343C?text=Hero+Image.

Hyvää:

• SVG, WebP, PNG: kolme formaattia yhdessä palvelussa.
• HEX-värit ja Google Fontsit suoraan query stringissä.
• Vakaa CDN minimaalisella viiveellä.

Huonoa:

• Vain värilohkot. Palvelu ei tuota valokuvia.

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: kuvatäytteet realistisiin mockupeihin

"Lorem Ipsum, mutta kuville." Tarjoilee oikeita valokuvia tietokannastaan, täydellinen silloin kun värineliöt näyttävät vierailta. seed-parametri lukitsee kuvan, mikä on korvaamatonta UI-testauksessa.

Suotimet (grayscale, blur) tuovat joustavuutta. Ei vaadi nimeämistä.

Hyvää:

• Laadukkaita valokuvia mockupeihin, ei roskaista kuvapankkikamaa.
• Sumennus- ja harmaasävy-suotimet.
• seed toistettavuuteen jokaisella pyynnöllä.

Huonoa:

• Ei tarkkaa hallintaa kuvan sisällöstä. Saat sen, mikä ruutuun sattui päätymään.

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: esiasetukset joka tehtävään

Palvelu, jossa on laajimmat tekstin paikkamerkkien mukautusmahdollisuudet. Pääominaisuutena kymmenet esiasetukset: mainosformaatit (Leaderboard, Wide Skyscraper), kuvasuhteet (16:9, 4:3), suositut resoluutiot. Tausta- ja tekstivärit HEX-muodossa, formaatit PNG, JPEG, GIF.

Ei CDN:ää, joten nopeus riippuu sijainnista. Ei kriittistä paikallisessa kehityksessä.

Hyvät puolet:

• Kymmeniä esiasetuksia mainoksille, näytöille ja vakioasetteluille.
• Täysi hallinta tausta- ja tekstiväristä.

Huonot puolet:

• Ei CDN:ää. Viive on huomattava Australiasta tai Japanista.

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:tä Edge-palvelimilta

Toimii Cloudflare Workersilla ja toimittaa SVG:tä Edge-palvelimilta. "Supernopea" ei ole markkinointipuhetta: toimitus lähimmästä Cloudflaren sijainnista tarkoittaa yksinumeroista millisekuntilatenssia. SVG tarjoaa täydellisen terävyyden Retinalla missä tahansa koossa.

Hyvät puolet:

• Lennossa tapahtuva generointi Cloudflare Workersin kautta.
• Terävyys millä tahansa näytöllä SVG:n ansiosta.
• Edge-toimitus lähimmästä verkon sijainnista.

Huonot puolet:

• Vain SVG. Rasteriformaatteja ei tueta.

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

🔗 placeholders.dev

5. DiceBear: deterministiset avatarit

Generoi avatarit "yksi siemen, yksi tulos" -periaatteella. Syötä sähköposti tai käyttäjänimi ja saat saman avatarin joka pyynnöllä. Korvaamaton käyttäjälistoissa ja hallintapaneeleissa: sisältö näyttää täyteläiseltä ilman oikeiden kuvien vaivaa.

Yli kaksikymmentä tyyliä, pikselitaiteesta realistisiin kasvoihin. Kaikki SVG-muodossa. Rajapinta on avoin.

Hyvät puolet:

• Kaksi tusinaa avatartyyliä.
• Deterministinen generointi: siemen takaa toistettavuuden.
• SVG täydellistä skaalausta varten.

Huonot puolet:

• Vain SVG. Rasteriavatareita varten tarvitset erillisen muuntimen.

1
<img src="https://api.dicebear.com/9.x/avataaars/[email protected]" alt="User avatar">

🔗 DiceBear

6. UI-avatarit: nimikirjaimet kuvien sijaan

Generoi avatarit, joissa on käyttäjän nimikirjaimet värillisellä taustalla. Täydellinen kommentteihin, chatteihin ja hallintapaneeleihin, joissa kuvia ei tarvita, mutta kasvottomat harmaat ympyrät ärsyttävät. Kokoa, fonttia, taustaväriä ja tekstin väriä voi kaikkia säätää URL-parametreilla.

Palvelu on täysin avoin: lähdekoodi GitHubissa, oman instanssin saa pystyyn 10 minuutissa. Merkittävä plussa projekteille, joissa on tietosuojavaatimuksia.

Hyvää:

• Nimikirjaimet kuvien sijaan, latautuvat välittömästi.
• Täysi hallinta taustaväriin, tekstin väriin ja fonttiin.
• Avoin lähdekoodi GitHubissa.

Huonoa:

• Vain tekstiä värillisellä taustalla. Kuvituksia ei tueta.

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: kuvia Creative Commons -lisenssillä

Hakee Creative Commons -lisensoituja kuvia Flickr-palvelusta ja tarjoaa niitä paikkapidikkeinä. Lorem Picsumiin verrattuna täältä saa enemmän "aitoja" otoksia ja vähemmän lavastettuja sommitelmia. Laatu vaihtelee, mutta mockupeissa, joissa autenttisuudella on väliä, se on plussaa.

Parametri lock lukitsee kuvan. Avainsanahaku rajaa valikoimaa.

Hyvää:

• Avainsanahaku.
• lock kuvan pysyvyyden takaamiseksi.
• Creative Commons selkeällä lisensoinnilla.

Huonoa:

• Ennalta arvaamaton laatu: mestariteoksesta suttuiseen räpsäisyyn.

1
<img src="https://loremflickr.com/1280/720" alt="Flickr Image">

🔗 Lorem Flickr

8. Placeit: ammattimaiset laitemockupit

Envaton alusta, jossa on lähes 3000 mockup-pohjaa: iPhone, Samsung, pöytäkoneet, kannettavat, tabletit. Palvelu on maksullinen (Envato-tilaus), mutta designien esittelyyn asiakkaille tai portfoliossa se tuottaa jälkeä, jota ei erota studiorenderöinneistä.

Raahaa ja pudota: lataa kuvakaappaus, valitse laite, lataa. Kaupallisissa esityksissä se maksaa itsensä takaisin heti.

Hyvää:

• Lähes 3000 laite- ja skenaariopohjaa.
• Raahaa ja pudota -käyttöliittymä, joka ei vaadi suunnittelutaitoja.

Huonoa:

• Maksullinen. Ilmaisissa mockupeissa on vesileimat.

🔗 Placeit

9. ASSETS.SO: teemallisia paikkapidikkeitä, joissa on luonnetta

Lisää kontekstia kehittäjän päivittäiseen rutiiniin. Kategoriat: pelit, elokuvat, musiikki, urheilu, jalkineet. Elokuvasivusto, jossa on aitoja still-kuvia, näyttää vakuuttavammalta kuin mockup, jossa on värillisiä neliöitä. Rajapinta on yksinkertainen: /game.jpg?w=1280&h=720.

Hyvät puolet:

• Teemoitetut kategoriat eri nicheille.
• Erittäin yksinkertainen rajapinta.

Huonot puolet:

• Minimaalinen hallinta sisältöön.

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

🔗 ASSETS.SO

10. RoboHash: robottiavatarit testidataan

Luo yksilöllisiä robotteja mistä tahansa tekstistä. Periaate on sama kuin DiceBearissa (deterministinen generointi), mutta luonteella: jokaisella robotilla on oma ilmeensä ja värimaailmansa. Tyylit: klassiset robotit, hirviöt, robottikissat.

Sopii prototyyppeihin, joissa haluat antaa persoonallisuutta testiprofiileille.

Edut:

• Deterministinen generointi tekstistä.
• Kolme tyyliä: robotit, hirviöt, kissat.
• Avoin lähdekoodi.

Haitat:

• Vain PNG. SVG:tä ei tueta.

1
<img src="https://robohash.org/[email protected]" alt="Robot avatar">

🔗 RoboHash

11. Bacon Mockup: pekonia missä tahansa resoluutiossa

Herkullisia pekonikuvia missä tahansa resoluutiossa. Ravintolasivustoille, ruokablogeihin tai kollegoiden jekuttamiseen. Kuulostaa vitsiltä, mutta palvelu on toiminut vakaasti useita vuosia.

Korkea resoluutio, yksinkertainen rajapinta. Kapea-alainen, mutta mieleenpainuva.

Edut:

• Korkearesoluutioiset valokuvat.
• Erittäin yksinkertainen rajapinta.

Haitat:

• Kapea teema. Hyödytön ruokaprojektien ulkopuolella.

1
<img src="https://baconmockup.com/1280/720" alt="Bacon">

🔗 Bacon Mockup

12. Placebeard.it: karheutta joka pikselissä

Vastaus placekitten-palvelulle, jotain maanläheisempää ja maskuliinisempaa. Väri- tai mustavalkokuvia parrakkaista ihmisistä missä tahansa mittasuhteissa. Partureille, miesten vaatetukselle ja hipsteristartupeille. Harmaasävy tuettuna. Palvelu on pyörinyt vakaasti pitkään.

Edut:

• Teemalliset kuvat, ihanteellisia miesten segmenttiin.
• Harmaasävytuki.

Haitat:

• Kapea teema. Ei sovi naisyleisölle.

1
<img src="https://placebeard.it/1280x720" alt="Beard">

🔗 Placebeard.it

13. Placebear: raakaa luonnonvoimaa

Suuria, karvaisia ja toisinaan vaarallisia paikanpitäjiä. Loistavia responsiivisuuden testaamiseen kuvilla, joissa on monimutkaisia tekstuureja: turkki, ruoho ja kaarna tarjoavat rikasta materiaalia pakkauksen ja koonmuutoksen tarkistamiseen.

Korkearesoluutioisia kuvia, vakaa käytettävyys. Ei joka projektiin, mutta kannattaa pitää kirjanmerkeissä.

Edut:

• Korkearesoluutioiset valokuvat.
• Vakaa käytettävyys.

Haitat:

• Spesifi sisältö. Jokainen asiakas ei arvosta karhua mallinnoksessaan.

1
<img src="https://placebear.com/1280/720" alt="Bear">

🔗 Placebear

14. Placeholdr.dev: tekoälypohjainen paikkakuvien luonti

Alan tuorein tulokas: tekoälyllä tuotetut kuvat Flux-diffuusiomallilla Cloudflare Workers -alustalla ja R2-välimuistilla. Ensimmäinen pyyntö kestää useita sekunteja, mutta seuraavat latautuvat heti välimuistista.

URL-muoto: /{width}x{height}/{prompt}. Tyylit: photographic, artistic, anime, oil-painting, 3d-render, cartoon. seed (1-3) lukitsee variantin. Ilmainen, ei vaadi tunnuksia.

Plussat:

• Tekoälypohjainen luonti: luonnollisen kielen kuvaukset heksakoodien sijaan.
• Kuusi tyyliä fotorealismista 3D-renderöintiin.
• Edge-jakelu Cloudflare Workersin kautta.

Miinukset:

• Ensimmäinen pyyntö on hidas (useita sekunteja).
• Nuori palvelu (julkaistu tammikuussa 2026); pitkän aikavälin vakaus on epävarmaa.

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

Teknisiä huomioita: CSP, offline-tila ja miksi vanhat URL-osoitteet kuolevat

Content-Security-Policy-otsakkeet

Jos sivustosi käyttää tiukkaa CSP:tä, selain estää ulkoiset paikkakuvapalvelut oletuksena. Päivitä img-src-direktiivi:

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

Tärkeää: poista nämä verkkotunnukset CSP:stä ennen tuotantoon vientiä. Paikkakuvat ovat kehitystä, eivät julkaistua sivustoa varten.

Paikallinen kehitys ilman internetiä

Offline-kehitykseen tai projekteihin, joissa on tietosuojavaatimuksia:

• Selainpohjainen paikkakuvien luonti Canvas- tai SVG-tekniikalla.
• Paikallinen luontiskripti Node.js:llä.
• Staattiset paikkakuvatiedostot repositoriossa.

Miksi vanhat URL-osoitteet kuolevat

Useimmat 2010-luvun alun palvelut olivat sivuprojekteja: ne julkaistiin, niitä ylläpidettiin pari vuotta ja sitten ne hylättiin. Verkkotunnus vanhenee, sertifikaatti raukeaa ja URL muuttuu kurpitsaksi. Valitse palveluita, joissa on tuoreita committeja ja kaupallista tukea.

⁉️🤔 Usein kysytyt kysymykset

Voinko käyttää paikkakuvia tuotannossa?

Et. Paikkakuvapalvelut on tarkoitettu vain kehitykseen ja prototyyppeihin. Pyyntörajat, käyttökatkot, viive kuormituksessa. Korvaa paikkakuvat oikeilla materiaaleilla ennen julkaisua.

Miksi jotkut palvelut selviävät vuosia, kun taas toiset kuolevat parissa sesongissa?

Ero on tukimallissa. Kaupallisilla tai sponsoroiduilla palveluilla on omistautuneet resurssit ja ne saavat säännöllisiä päivityksiä. Yksittäisten kehittäjien sivuprojektit pyörivät innostuksen varassa. Tarkista commit-historia: jos viimeisin on kolmen vuoden takaa, etsi vaihtoehto.

Miten lukitsen saman kuvan jokaisella latauskerralla?

Käytä seed-parametria. Lorem Picsum: /seed/product/400/300. DiceBear: [email protected]. RoboHash: mikä tahansa teksti URL-osoitteessa. placeholdr.dev: ?seed=1 (kolme varianttia). Yksi seed tuottaa aina yhden tuloksen.

Täytyykö CSP päivittää paikkakuvia varten?

Kyllä. Jos sivustollasi on Content-Security-Policy-otsakkeet määritettynä, lisää palveluiden verkkotunnukset img-src-direktiiviin, muuten selain estää lataamisen. Muista poistaa ne ennen tuotantoon vientiä.

Vaikuttavatko ulkoiset paikkakuvat paikallisen kehityksen nopeuteen?

Jokainen <img>-tagi, jossa on ulkoinen URL, tekee HTTP-pyynnön. CDN:ää ja Edgeä käyttävät palvelut toimivat nopeasti, mutta täydellistä autonomiaa varten pidä repositoriossasi sarja staattisia paikkakuvia.

Mikä tiedostomuoto on paras paikkakuville?

SVG geometrisille muodoille ja tekstille: minimaalinen koko, täydellinen skaalautuvuus. WebP valokuvapaikkakuville: huomattavasti kevyempi kuin JPEG samalla laadulla. PNG, kun tarvitset läpinäkyvyyttä. AVIF, jos kohdeyleisösi selaimet tukevat sitä.

Voinko käyttää näiden palveluiden kuvia kaupallisissa malleissa?

Useimmat palvelut tarjoavat sisältöä ilmaiseksi ja ilman nimeämisvelvoitetta. Flickr-pohjaiset palvelut toimivat Creative Commons -lisenssillä; tarkista kunkin kuvan lisenssi. Placeit vaatii Envato-tilauksen vesileimattomien latausten tekemiseen.

Mitä kannattaa laittaa kirjanmerkkeihin: lopullinen yhteenveto vuoden 2026 paikkakuvista

Valintamme päivittäiseen työhön: Placehold.co värilohkoille, Lorem Picsum valokuvamalleille ja DiceBear avatareille. Nämä kolme palvelua kattavat valtaosan tarpeista.

Tarvitsetko nopeutta Retina-näytöillä? placeholders.dev Edge SVG:llä. Haluatko kontekstuaalisia visuaaleja selaamatta kuvapankkeja? placeholdr.dev tekoälyluonnilla. Valmisteletko kaupallista esitystä? Placeit kolmella tuhannella mallipohjallaan.

Pääsääntö pysyy samana: paikkakuvat elävät kehityspalvelimella. Ennen julkaisua korvaa jokainen ulkoinen URL oikealla materiaalilla. Pidä kaksi tai kolme varapalvelua kirjanmerkeissä; se mikä toimi eilen, voi olla poissa käytöstä huomenna.