Hvordan lager jeg et plassholderbilde i en nøyaktig størrelse?

Skriv inn Bredde (px) og Høyde (px), velg farger eller et Fargetema, og klikk deretter Last ned PNG, Last ned JPG eller Last ned SVG. Som standard viser bildet dimensjonene sine, for eksempel 800 x 600, som etikett.

Hva er det største plassholderbildet jeg kan generere?

Bredde og høyde må hver være mellom 1 og 4000 piksler. Verdier utenfor dette intervallet viser feilmeldingen Bredde og høyde må være mellom 1 og 4000 px.

Hvordan setter jeg inn et plassholderbilde direkte i HTML uten en fil?

Klikk Kopier som data URL og lim den inn i en img-tag som src-verdien. Du kan også bruke Kopier HTML-utdrag eller Kopier CSS-bakgrunn. Du trenger ingen ekstern bildevert.

Kan jeg generere standardstørrelser for sosiale medier eller web?

Ja. Forhåndsinnstilte størrelser inkluderer Instagram-innlegg, Instagram-story, Twitter-kort, Open Graph, YouTube-miniatyr, Facebook-omslag og E-posthode. Last ned alle forhåndsinnstillinger (ZIP) lagrer alle elleve som PNG-filer.

Hvordan legger jeg inn min egen tekst eller diagonale linjer på plassholderen?

Skriv en etikett i Egendefinert tekst, for eksempel Hovedbilde, i stedet for å vise dimensjoner. Kryss av for Vis diagonale linjer (X) for å tegne svake diagonaler. Lang tekst krymper automatisk for å passe bredden.

Er det virkelig gratis?

Ja. Alle verktøy er gratis å bruke, uten konto og uten kredittkort. Arbeidet utføres på enheten din i stedet for på våre servere, noe som gjør det gratis å kjøre.

Fungerer det på mobil?

Ja. Det fungerer i moderne mobilnettlesere på iOS og Android, uten at du trenger å installere noe.

🖼️

Gratis Plassholderbilde-generator

Generer fargede plassholderbilder med egendefinerte dimensjoner, tekst og farger. Standardstørrelser for sosiale medier, mockups og designskisser.

Kjører i nettleserenIngen registrering, ingen popup-vinduerIngen pålogging krevesGratis for alltid

Bredde (px)

Høyde (px)

Forhåndsinnstilte størrelser

Fargetemaer

Bakgrunn

Tekst / linjer

Egendefinert tekst (la stå tomt for dimensjoner)

Vis dimensjoner hvis ingen egendefinert tekstVis diagonale linjer (X)

💡 For HTML-mockups: bruk «Kopier som data URL» og lim inn i <img src="..."> for inline plassholdere. For Figma/Sketch-design, last ned PNG og dra inn.

Vanlige bruksområder

Plassholder-bilder for design mockupsGenerer farget størrelse bokser for bruk i Figma, Sketch eller webdesign mockups før virkelige bilder er klare.
Inline plassholdere for HTML-prototyperBruk Kopier som data-URL for å bygge inn plassholder-bilder direkte i HTML for raske prototyper.
Plassholdere for CMS-innholdsfeltNår du demonstrerer en CMS-mal, bruker plassholder-bilder i stedet for faktisk innhold for sensitive forhåndsvisninger.
Sosiale medier bildemalerGenerer riktig størrelse plassholdere for Instagram, Facebook, Twitter, LinkedIn innleggemaler.
CSS-oppsett test-bilderGenerer bilder ved ekstreme aspektforhold for å stresstest responsiv CSS-oppsett.

Hvordan det fungerer

Alt skjer i nettleseren med HTML Canvas API og håndskrevet SVG-kode — ingen server, ingen opplasting, ingen tredjepartstjeneste. Du angir mål, farger og etikettekst, og verktøyet tegner bildet direkte på et canvas-element i sanntid, og serialiserer det til PNG, JPEG eller SVG ved behov.

1
Angi mål og farger
Skriv inn bredde og høyde (1–4000 px hver), eller velg en av elleve forhåndsinnstillinger for vanlige størrelser i sosiale medier og design. Velg bakgrunns- og tekstfarge fra de innebygde temaene eller skriv inn en hex-verdi direkte; en innebygd fargevelger og et validert tekstfelt holdes synkronisert.
2
Canvas API viser forhåndsvisningen umiddelbart
En React-effekt kaller drawPlaceholder() ved hver endring. Funksjonen bruker CanvasRenderingContext2D til å fylle rektangelet med bakgrunnsfargen, eventuelt tegne svake diagonale kryss med 15 % opasitet, og deretter måle og sentrere etiketteksten — skriften krympes automatisk til den får plass innenfor 90 % av lerretets bredde.
3
Eksporter som PNG, JPEG eller SVG
PNG- og JPEG-nedlastinger kaller canvas.toDataURL(), gjør base64-resultatet om til en Blob i minnet og starter nedlastingen — alt synkront innenfor brukerhandlingen, så nedlastingsreglene i iOS Safari oppfylles. SVG-eksport bygger en selvstendig SVG-streng med et tilsvarende rect, valgfrie diagonale linjer og et text-element, og lagrer den som .svg-fil.
4
Masseeksport og kopisnarveier
Knappen «Last ned alle forhåndsinnstillinger» importerer JSZip dynamisk, tegner hver av de elleve forhåndsinnstilte størrelsene på nytt på et lerret utenfor skjermen med samme tegnefunksjon, og pakker alle PNG-ene i én ZIP. Kopieringsknappene gir en PNG-data-URL, en inline SVG img-tag eller en CSS background-image-deklarasjon til umiddelbar innliming i kode.