
🎨 14 Platshållartjänster för frontend: vad fungerar 2026

Du bygger en layout, klistrar in den vanliga placeholder-adressen, och den vägrar ladda. Webbläsaren öser varningar för blandat innehåll över dig, fliken hänger sig i en halv minut. Känns det igen?
Placeholdertjänster från tidigt 2010-tal dör tyst: domäner förnyas inte, TLS-certifikat går ut, rate limits stryper anrop. Att upptäcka det en timme före deadline är allt annat än roligt.
Vi testade 14 levande verktyg manuellt: från färgade rektanglar till AI-generering och deterministiska avatarer. Vartenda ett stöder HTTPS, har stabil drifttid och sviker dig inte när backend inte är klar men du redan måste visa layouten.
💡 Snabb överblick:
- Typologi: färgblock, fotofyllnader, SVG med Edge-leverans, avatarer, enhetsmockups och AI-generering; det finns ett verktyg för varje uppgift.
- Hastighet:
placeholders.devochplaceholdr.devkörs på Cloudflare Workers och levererar innehåll från närmaste Edge-plats. - Säkerhet: alla 14 tjänster fungerar över HTTPS. Inga varningar för blandat innehåll över huvud taget.
- Färdig kod: varje tjänst tillhandahåller en URL-mall du kan kopiera och klistra in i
<img src>på sekunder.
Urvalskriterier: vad som gör en tjänst lämplig för fungerande mockups
Parametrarna vi använde för att utvärdera varje verktyg:
- Endast HTTPS. Blandat innehåll 2026 är en varningsflagga. Tjänster utan TLS kom inte med på listan.
- CDN** eller Edge-leverans.** Global täckning innebär låg latens oavsett plats.
- Aktivt underhåll. Färska commits eller uppdateringar under det senaste året.
- Förutsägbar URL-syntax. Mönstret ska vara uppenbart vid första anblicken, utan att läsa dokumentation.
- Moderna format. WebP, AVIF, SVG; utan dem kan en tjänst inte konkurrera.
Jämförelsetabell
Behov | Bästa val | Format | CDN |
|---|---|---|---|
Färgade block med text |
| SVG, WebP, PNG | Ja |
Fotofyllnader för mockups |
| JPEG, WebP | Ja |
Specifika storlekar och förinställningar |
| PNG, JPEG, GIF | Nej |
Hastighet och skärpa |
| SVG | Edge |
Användaravatarer |
| SVG | Ja |
Avatarer med initialer |
| PNG, SVG | Ja |
Enhetsmockups |
| PNG, JPEG | Ja |
Tematiska placeholders |
| JPEG, PNG | Ja |
AI-bildgenerering |
| JPEG, WebP | Edge |
1. Placehold.co: guldstandarden för färgade block

Kom för att ersätta den opålitliga via.placeholder.com och blev standardvalet. HEX-färger, Google Fonts, storlek: allt ligger i URL:en. SVG, WebP, PNG. Mönstret är uppenbart vid första anblicken: /600x400/EEE/31343C?text=Hero+Image.
Fördelar:
- SVG, WebP, PNG: tre format i en tjänst.
- HEX-färger och Google Fonts direkt i query-strängen.
- Stabilt CDN med minimal latens.
Nackdelar:
- Endast färgade block. Tjänsten genererar inte foton.
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">
2. Lorem Picsum: fotofyllnader för realistiska mockups

"Lorem Ipsum, fast för bilder." Levererar riktiga foton från sin databas, perfekt när färgade rutor känns malplacerade. Parametern seed låser en bild, ovärderligt för UI-testning.
Filter (grayscale, blur) ger extra flexibilitet. Ingen attribution krävs.
Fördelar:
- Kvalitetsfoton för mockups, inte stock-skräp.
- Blur- och gråskalefilter.
seedför repeterbarhet vid varje anrop.
Nackdelar:
- Ingen exakt kontroll över fotoinnehållet. Du får det som råkade hamna i bilden.
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">
3. DummyImage: förinställningar för varje uppgift

Tjänsten med den mest omfattande anpassningen för text-placeholders. Huvudfunktionen är dussintals förinställningar: annonsformat (Leaderboard, Wide Skyscraper), bildförhållanden (16:9, 4:3), populära upplösningar. Bakgrunds- och textfärger via HEX, formaten PNG, JPEG, GIF.
Ingen CDN, så hastigheten beror på geografin. Inte kritiskt för lokal utveckling.
Fördelar:
- Dussintals förinställningar för annonser, skärmar och standardlayouter.
- Full kontroll över bakgrunds- och textfärg.
Nackdelar:
- Ingen CDN. Fördröjningen är märkbar från Australien eller Japan.
1 <img src="https://dummyimage.com/728x90/000/fff" alt="Leaderboard ad"> 2 <img src="https://dummyimage.com/16:9x1080" alt="HD ratio">
4. Placeholders.dev: SVG från Edge-servrar

Körs på Cloudflare Workers och levererar SVG från Edge-servrar. "Supersnabbt" är inte bara marknadsföringssnack: leverans från närmaste Cloudflare-plats innebär ensiffrig millisekundfördröjning. SVG ger perfekt skärpa på Retina i alla skalor.
Fördelar:
- Generering i farten via Cloudflare Workers.
- Skärpa på alla skärmar tack vare SVG.
- Edge-leverans från närmaste nätverksplats.
Nackdelar:
- Endast SVG. Rasterformat stöds inte.
1 <img src="https://images.placeholders.dev/?width=400&height=300&bgColor=%23f0f0f0&textColor=%23333" alt="SVG placeholder">
5. DiceBear: deterministiska avatarer

Genererar avatarer enligt principen "ett frö, ett resultat". Skicka med en e-postadress eller ett användarnamn och få samma avatar vid varje förfrågan. Ovärderligt för användarlistor och adminpaneler: innehållet ser befolkat ut utan besväret med riktiga foton.
Fler än tjugo stilar, från pixelkonst till realistiska ansikten. Allt i SVG. API:et är öppet.
Fördelar:
- Två dussin avatarstilar.
- Deterministisk generering: fröet garanterar repeterbarhet.
- SVG för perfekt skalning.
Nackdelar:
- Endast SVG. För rasteravatarer behöver du en extra konverterare.
1 <img src="https://api.dicebear.com/9.x/avataaars/[email protected]" alt="User avatar">
6. UI-avatarer: initialer istället för bilder
Genererar avatarer med användarinitialer på en färgad bakgrund. Perfekt för kommentarer, chattar och adminpaneler där foton inte behövs men ansiktslösa grå cirklar är irriterande. Storlek, typsnitt, bakgrundsfärg och textfärg är alla konfigurerbara via URL-parametrar.
Tjänsten är helt öppen: källkod på GitHub, du kan starta din egen instans på 10 minuter. Ett stort plus för projekt med integritetskrav.
Fördelar:
- Initialer istället för bilder med omedelbar laddning.
- Full kontroll över bakgrundsfärg, textfärg och typsnitt.
- Öppen källkod på GitHub.
Nackdelar:
- Endast text på färgad bakgrund. Illustrationer stöds inte.
1 <img src="https://ui-avatars.com/api/?name=John+Doe&size=128&background=0D8ABC&color=fff" alt="JD Avatar">
7. Lorem Flickr: foton med Creative Commons-licens

Söker efter Creative Commons-licensierade foton på Flickr och levererar dem som platshållare. Jämfört med Lorem Picsum får du fler "spontana" bilder här och färre arrangerade kompositioner. Kvaliteten varierar, men för mockups där autenticitet spelar roll är det ett plus.
Parametern lock låser bilden. Nyckelordssökning begränsar urvalet.
Fördelar:
- Nyckelordssökning.
lockför bildbeständighet.- Creative Commons med transparent licensiering.
Nackdelar:
- Oförutsägbar kvalitet: från mästerverk till suddig ögonblicksbild.
1 <img src="https://loremflickr.com/1280/720" alt="Flickr Image">
8. Placeit: professionella enhetsmockups

En plattform från Envato med nästan 3000 mockupmallar: iPhone, Samsung, stationära datorer, bärbara datorer, surfplattor. Tjänsten är betald (Envato-prenumeration), men för att presentera design för kunder eller i en portfölj levererar den resultat som inte går att skilja från studiogjorda renderingar.
Dra-och-släpp: ladda upp en skärmdump, välj en enhet, ladda ner. För kommersiella presentationer betalar den sig omedelbart.
Fördelar:
- Nästan 3000 enhets- och scenariomallar.
- Dra-och-släpp-gränssnitt som inte kräver några designkunskaper.
Nackdelar:
- Betald. Gratis mockups har vattenstämplar.
9. ASSETS.SO: temabaserade platshållare med karaktär

Ger kontext till en utvecklares dagliga rutin. Kategorier: spel, filmer, musik, sport, skor. En filmsajt med riktiga stillbilder ser mer övertygande ut än en mockup med färgade rutor. API:et är enkelt: /game.jpg?w=1280&h=720.
Fördelar:
- Tematiserade kategorier för olika nischer.
- Extremt enkelt API.
Nackdelar:
- Minimal kontroll över innehållet.
1 <img src="https://via.assets.so/game.jpg?w=1280&h=720" alt="Game Asset">
10. RoboHash: robotavatarer för testdata

Genererar unika robotar från valfri text. Principen är densamma som DiceBear (deterministisk generering), men med karaktär: varje robot har sitt eget uttryck och färgschema. Stilar: klassiska robotar, monster, robotkatter.
Passar för prototyper där du vill ge testprofiler personlighet.
Fördelar:
- Deterministisk generering från text.
- Tre stilar: robotar, monster, katter.
- Öppen källkod.
Nackdelar:
- Endast PNG. SVG stöds inte.
1 <img src="https://robohash.org/[email protected]" alt="Robot avatar">
11. Bacon Mockup: bacon i valfri upplösning

Läckra baconbilder i valfri upplösning. För restaurangsajter, matbloggar eller för att skoja med kollegor. Låter som ett skämt, men tjänsten har varit stabil i flera år.
Hög upplösning, enkelt API. Smalt tema, men minnesvärt.
Fördelar:
- Högupplösta foton.
- Extremt enkelt API.
Nackdelar:
- Smalt tema. Oanvändbart utanför matprojekt.
1 <img src="https://baconmockup.com/1280/720" alt="Bacon">
12. Placebeard.it: robusthet i varje pixel

Svaret på placekitten, något mer jordnära och maskulint. Färg- eller svartvita foton på skäggiga personer i valfria proportioner. För barbershopar, herrkläder och hipster-startups. Gråskala stöds. Tjänsten har fungerat stabilt under lång tid.
Fördelar:
- Tematiska foton, idealiska för det manliga segmentet.
- Stöd för gråskala.
Nackdelar:
- Smalt tema. Inte lämpligt för kvinnlig publik.
1 <img src="https://placebeard.it/1280x720" alt="Beard">
13. Placebear: rå naturkraft

Stora, lurviga och ibland farliga platshållare. Utmärkt för att testa responsivitet på bilder med komplexa texturer: päls, gräs och bark ger rikt material för att kontrollera komprimering och storleksändring.
Högupplösta foton, stabil drifttid. Inte för varje projekt, men värt att ha i bokmärkena.
Fördelar:
- Högupplösta foton.
- Stabil drifttid.
Nackdelar:
- Specifikt innehåll. Alla kunder uppskattar inte en björn i sin mockup.
1 <img src="https://placebear.com/1280/720" alt="Bear">
14. Placeholdr.dev: AI-genererade platshållare

Den färskaste spelaren i nischen: AI-generering via Flux-diffusionsmodellen på Cloudflare Workers med R2-cachning. Den första förfrågan tar flera sekunder att rendera; efterföljande levereras direkt från cachen.
URL-format: /{width}x{height}/{prompt}. Stilar: photographic, artistic, anime, oil-painting, 3d-render, cartoon. seed (1-3) låser varianten. Gratis, inga konton krävs.
Fördelar:
- AI-generering: beskrivningar på naturligt språk istället för HEX-koder.
- Sex stilar, från fotorealism till 3D-rendering.
- Edge-leverans via Cloudflare Workers.
Nackdelar:
- Första förfrågan är långsam (flera sekunder att rendera).
- Ung tjänst (lanserad januari 2026); långsiktig stabilitet är osäker.
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">
Tekniska överväganden: CSP, offlineläge och varför gamla webbadresser dör
Content-Security-Policy-headers
Om din webbplats använder strikt CSP kommer externa platshållartjänster att blockeras av webbläsaren som standard. Uppdatera img-src-direktivet:
1 Content-Security-Policy: img-src 'self' https://placehold.co https://picsum.photos;
Viktigt: ta bort dessa domäner från CSP innan driftsättning i produktion. Platshållare är för utveckling, inte för live-webbplatser.
Lokal utveckling utan internet
För offlineutveckling eller projekt med integritetskrav:
- Platshållargenerering på klientsidan via
CanvasellerSVG. - Lokalt generatorskript i Node.js.
- Statiska platshållarfiler i repositoryt.
Varför gamla webbadresser dör
De flesta tjänster från tidigt 2010-tal var sidoprojekt: lanserade, underhölls i ett par år, sedan övergivna. Domänen löper ut, certifikatet förfaller och webbadressen förvandlas till en pumpa. Välj tjänster med färska commits och kommersiellt stöd.
⁉️🤔 Vanliga frågor
Kan jag använda platshållare i produktion?
Nej. Platshållartjänster är endast för utveckling och prototyper. Begränsningar i antal förfrågningar, driftstopp, latens under belastning. Byt ut platshållare mot riktiga tillgångar innan release.
Varför överlever vissa tjänster i åratal medan andra dör inom ett par säsonger?
Skillnaden ligger i supportmodellen. Kommersiella eller sponsrade tjänster har dedikerade resurser och får stabila uppdateringar. Solosidoprojekt drivs av entusiasm. Kolla commit-historiken: om den senaste var för tre år sedan, leta efter ett alternativ.
Hur låser jag samma bild vid varje omladdning?
Använd parametern
seed. Lorem Picsum:/seed/product/400/300. DiceBear:[email protected]. RoboHash: valfri text i webbadressen.placeholdr.dev:?seed=1(tre varianter). Ett seed ger alltid ett resultat.
Måste jag uppdatera CSP för platshållare?
Ja. Om din webbplats har Content-Security-Policy-headers konfigurerade, lägg till tjänstedomänerna i
img-src-direktivet, annars blockerar webbläsaren inläsningen. Glöm inte att ta bort dem före driftsättning.
Påverkar externa platshållare den lokala utvecklingshastigheten?
Varje
<img>-tagg med en extern webbadress gör en HTTP-förfrågan. Tjänster med CDN och Edge fungerar snabbt, men för fullständig autonomi, ha en uppsättning statiska platshållare i ditt repository.
Vilket format är bäst för platshållare?
SVG för geometriska former och text: minimal vikt, perfekt skalning. WebP för fotoplatshållare: märkbart lättare än JPEG vid samma kvalitet. PNG när du behöver transparens. AVIF om din målgrupps webbläsare stöder det.
Kan jag använda bilder från dessa tjänster i kommersiella mockups?
De flesta tjänster tillhandahåller innehåll gratis och utan krav på attribution. Flickr-baserade tjänster arbetar med Creative Commons; kontrollera licensen för varje foto. Placeit kräver en Envato-prenumeration för nedladdningar utan vattenstämpel.
Vad du ska bokmärka: den slutliga sammanställningen av 2026 års platshållare
Våra val för det dagliga arbetet: Placehold.co för färgblock, Lorem Picsum för fotomockups och DiceBear för avatarer. Dessa tre tjänster täcker de allra flesta uppgifter.
Behöver du snabbhet på Retina? placeholders.dev med Edge SVG. Vill du ha kontextuella bilder utan att söka på bildbyråer? placeholdr.dev med AI-generering. Förbereder du en kommersiell presentation? Placeit med sina tre tusen mockups.
Huvudregeln förblir densamma: platshållare lever på utvecklingsservern. Före driftsättning, byt ut varje extern webbadress mot en riktig tillgång. Ha två eller tre reservtjänster bokmärkta; det som fungerade igår kan gå offline imorgon.



