Hur skapar jag en platshållarbild med exakta mått?

Skriv in Bredd (px) och Höjd (px), välj färger eller ett Färgtema och klicka sedan på Ladda ned PNG, Ladda ned JPG eller Ladda ner SVG. Som standard visar bilden sina mått, till exempel 800 x 600, som etikett.

Vad är den största platshållarbild jag kan generera?

Bredd och höjd måste vara mellan 1 och 4000 pixlar. Värden utanför det intervallet visar felet Bredd och höjd måste vara mellan 1 och 4000 px.

Hur lägger jag in en platshållarbild direkt i HTML utan en fil?

Klicka på Kopiera som data-URL och klistra in den i en img-tagg som src-värdet. Du kan också använda Kopiera HTML-fragment eller Kopiera CSS-bakgrund. Ingen extern bildvärd behövs.

Kan jag generera standardstorlekar för sociala medier eller webben?

Ja. Förinställda storlekar inkluderar Instagram-inlägg, Instagram-story, Twitter-kort, Open Graph, YouTube-miniatyr, Facebook-omslag och E-posthuvud. Ladda ner alla förinställningar (ZIP) sparar alla elva som PNG-filer.

Hur lägger jag min egen text eller diagonala linjer på platshållaren?

Skriv en etikett i Anpassad text, till exempel Hero image, istället för att visa mått. Kryssa i Visa diagonala linjer (X) för att rita svaga diagonaler. Lång text krymper automatiskt för att passa bredden.

Är det verkligen gratis?

Ja. Alla verktyg är gratis att använda, utan konto och utan kreditkort. Arbetet utförs på din enhet istället för på våra servrar, vilket är det som gör det gratis att köra.

Fungerar det på mobil?

Ja. Det fungerar i moderna mobilwebbläsare på iOS och Android, utan installation.

🖼️

Gratis Platshållarbild-generator

Generera färgade platshållarbilder med anpassade mått, text och färger. Standardstorlekar för sociala medier, mockups och designupplägg.

Körs i din webbläsareIngen registrering, inga popup-fönsterIngen inloggning krävsGratis för alltid

Bredd (px)

Höjd (px)

Förinställda storlekar

Färgteman

Bakgrund

Text / linjer

Anpassad text (lämna tomt för mått)

Visa mått om ingen anpassad text finnsVisa diagonala linjer (X)

💡 För HTML-mockups: använd 'Kopiera som data-URL' och klistra in i <img src="..."> för infogade platshållare. För Figma/Sketch-designer, ladda ned PNG och dra in den.

Vanliga användningar

Platshållarbilder för designmockupsGenerera storlek färgade rutor för användning i Figma, Sketch eller webdesign mockups innan riktiga bilder är klara.
Inline platshållare för HTML-prototyperAnvänd Kopiera som data-URL för att inline platshållarbilder direkt i HTML för snabba prototyper.
Platshållare för CMS-innehållsfackVid demonstration av en CMS-mall använder du platshållarbilder istället för verkligt innehål för känslig förhandsvisning.
Sociala medier bildmallarGenerera korrekt storlek platshållare för Instagram, Facebook, Twitter, LinkedIn-inläggsmallar.
CSS-layouttestningsbilderGenerera bilder med extrema aspektförhållanden för att stresstesta responsiv CSS-layouter.

Så här fungerar det

Allt sker i din webbläsare med HTML Canvas-API:et och handskriven SVG-kod — ingen server, ingen uppladdning, ingen tredjepartstjänst. Du ställer in dimensioner, färger och etikettext, och verktyget målar bilden direkt på ett canvas-element i realtid, och serialiserar den sedan till PNG, JPEG eller SVG på begäran.

1
Konfigurera dimensioner och färger
Skriv en bredd och höjd (1–4000 px vardera), eller välj en av elva förinställningar som täcker vanliga sociala medier- och designstorlekar. Välj en bakgrunds- och textfärg från de inbyggda teman eller ange valfritt hexvärde direkt; en inbyggd färgväljare och ett validerat textfält hålls synkroniserade.
2
Canvas-API renderar förhandsvisningen direkt
En React-effekt anropar drawPlaceholder() vid varje ändring. Denna funktion använder CanvasRenderingContext2D för att fylla rektangeln med bakgrundsfärgen, valfritt rita svaga diagonala kryssande linjer vid 15 % opacitet, och sedan mäta och centrera din etikettext — och automatiskt krympa typsnittet tills det ryms inom 90 % av canvasens bredd.
3
Exportera som PNG, JPEG eller SVG
PNG- och JPEG-nedladdningar anropar canvas.toDataURL(), omvandlar base64-resultatet till en Blob i minnet, och startar nedladdningen — allt synkront inuti användargesten så att iOS Safaris nedladdningsregler uppfylls. SVG-export bygger en fristående SVG-sträng med en matchande rektangel, valfria diagonala linjer och ett textelement, och sparar den sedan som en .svg-fil.
4
Batchexport och kopieringsgenvägar
Knappen "Ladda ned alla förinställningar" importerar dynamiskt JSZip, återrenderar var och en av de elva förinställda storlekarna på en osynlig canvas med samma ritfunktion, och paketerar alla PNG-filer i en enda ZIP. Kopieringsknappar skapar en PNG-data-URL, en infogad SVG img-tagg, eller en CSS background-image-deklaration för omedelbar inklistring i kod.