Com puc crear una imatge de marcador de posició d'una mida exacta?

Escriu l'Amplada (px) i l'Alçada (px), tria colors o un Tema de color i després fes clic a Baixa PNG, Baixa JPG o Descarregar SVG. Per defecte, la imatge mostra les seves dimensions, com ara 800 x 600, com a etiqueta.

Quina és la imatge de marcador de posició més gran que puc generar?

L'amplada i l'alçada han de ser entre 1 i 4000 px. Els valors fora d'aquest rang mostren l'error L'amplada i l'alçada han de ser entre 1 i 4000 px.

Com puc posar una imatge de marcador de posició directament en HTML sense un fitxer?

Fes clic a Copia com a URL de dades i enganxa-ho en una etiqueta img com a valor src. També pots fer servir Copiar fragment HTML o Copiar fons CSS. No cal cap allotjament d'imatges extern.

Puc generar mides estàndard per a xarxes socials o web?

Sí. Les Mides predefinides inclouen Publicació de Instagram, Història de Instagram, Targeta de Twitter, Open Graph, Miniatura de YouTube, Portada de Facebook i Capçalera de correu electrònic. Descarregar tots els predefinits (ZIP) desa les onze com a fitxers PNG.

Com puc posar el meu propi text o línies diagonals al marcador de posició?

Escriu una etiqueta a Text personalitzat, per exemple Imatge de capçalera, en lloc de mostrar les dimensions. Marca Mostra línies diagonals (X) per dibuixar diagonals tènues. El text llarg es redueix automàticament per ajustar-se a l'amplada.

És realment gratuït?

Sí. Totes les eines són gratuïtes, sense compte ni targeta de crèdit. El treball s'executa al teu dispositiu en lloc dels nostres servidors, i això és el que permet que sigui gratuït.

Sí. Funciona als navegadors mòbils actuals d'iOS i Android, sense instal·lar res.

🖼️

Generador d'imatges de marcador de posició de franc

Genera imatges de marcador de posició de colors amb dimensions, text i colors personalitzats. Mides estàndard per a xarxes socials, maquetes i maquetació de disseny.

S'executa al teu navegadorSense registre, sense finestres emergentsNo cal iniciar sessióGratuït per sempre

Amplada (px)

Alçada (px)

Mides predefinides

Temes de color

Fons

Text / línies

Text personalitzat (deixa en blanc per a les dimensions)

Mostra les dimensions si no hi ha text personalitzatMostra línies diagonals (X)

💡 Per a maquetes HTML: utilitza l'opció «Copia com a URL de dades» i enganxa-la a <img src=\"...\"> per a marcadors de posició en línia. Per a dissenys Figma / Sketch, baixa el PNG i arrossega'l.

Usos habituals

Imatges de marcador de posició per a maquetes de dissenyGenerar caixes de color dimensionades per usar a Figma, Sketch o maquetes de disseny web abans que les imatges reals estiguin listes.
Marcadors de posició incrustats per a maquetes HTMLUtilitzeu 'Copiar com URL de dades' per incrustar imatges de marcador de posició directament a HTML per a maquetes ràpides.
Marcadors de posició per a espais de contingut CMSQuan demostreu plantilles CMS, utilitzeu imatges de marcador de posició en lloc de contingut real per a vista prèvia sensible.
Plantilles d'imatges de mitjans socialsGenerar marcadors de posició de mida correcta per a plantilles de publicació d'Instagram, Facebook, Twitter, LinkedIn.
Imatges de prova de disseny CSSGenerar imatges amb relacions d'aspecte extremes per a la prova d'estrès del disseny CSS responsiu.

Com funciona

Tot passa al teu navegador utilitzant l'API HTML Canvas i marcatge SVG escrit a mà — sense servidor, sense pujada, sense servei de tercers. Estableixes dimensions, colors i text d'etiqueta, i l'eina pinta la imatge directament en un element canvas en temps real, i després la serialitza a PNG, JPEG, o SVG a demanda.

1
Configura dimensions i colors
Escriu una amplada i alçada (1–4000 px cadascuna), o tria un dels onze valors predefinits que cobreixen mides comunes de xarxes socials i disseny. Tria un color de fons i de text dels temes integrats o introdueix qualsevol valor hexadecimal directament; un selector de color natiu i un camp de text validat es mantenen sincronitzats.
2
L'API Canvas renderitza la previsualització a l'instant
Un efecte de React crida drawPlaceholder() a cada canvi. Aquesta funció utilitza CanvasRenderingContext2D per omplir el rectangle amb el color de fons, opcionalment dibuixar línies diagonals tènues de creueta a un 15% d'opacitat, i després mesurar i centrar el text de la teva etiqueta — reduint automàticament la mida de la lletra fins que encaixi dins del 90% de l'amplada del canvas.
3
Exporta com a PNG, JPEG, o SVG
Les descàrregues PNG i JPEG criden canvas.toDataURL(), converteixen el resultat en base64 a un Blob a la memòria, i disparen la descàrrega — tot síncronament dins del gest de l'usuari perquè es compleixin les regles de descàrrega de Safari a iOS. L'exportació SVG construeix una cadena SVG autocontinguda amb un rect coincident, línies diagonals opcionals, i un element de text, i després la desa com a fitxer .svg.
4
Exportació massiva i dreceres de còpia
El botó 'Descarrega tots els valors predefinits' importa dinàmicament JSZip, torna a renderitzar cadascuna de les onze mides predefinides en un canvas fora de pantalla utilitzant la mateixa funció de dibuix, i empaqueta tots els PNG en un únic ZIP. Els botons de còpia emeten un URL de dades PNG, una etiqueta img SVG en línia, o una declaració background-image de CSS per enganxar immediatament al codi.