Placeholder-afbeelding generator: PNG, JPG, WebP of SVG | We.Inc
Maak een placeholder-afbeelding in elk formaat met uw eigen kleuren en label. Download PNG, JPG of WebP, of kopieer een inline SVG-data-URL waarvoor geen afbeeldingshost nodig is.
Placeholder-afbeelding generator
Stel een breedte, hoogte, achtergrond, tekstkleur en label in, en deze generator tekent een placeholder in uw browser. Download hem als PNG, JPG of WebP, of kopieer een piepkleine SVG-data-URL om direct in een img-tag of CSS te plakken, zodat uw mockup nooit afhangt van een afbeeldingsdienst van derden.
Kies het formaat op basis van waar de placeholder komt
Formaat
Het best voor
Opmerkingen
SVG-data-URL
Prototypes en codevoorbeelden
Geen bestand, geen verzoek, scherp bij elke zoom
PNG
Ontwerpbestanden, uploads naar een CMS
Verliesvrij, elke browser ondersteunt het
JPG
Plekken die PNG weigeren
Met verlies, geen transparantie
WebP
Het echte paginagewicht testen
Hier met verlies, kleine bestanden
Gehoste placeholderdiensten zijn handig, tot er een uitvalt of door een netwerkfilter wordt geblokkeerd, en dan breekt elk grijs vlak in uw demo. Deze tool maakt de afbeelding in plaats daarvan lokaal: u krijgt een echt bestand of een op zichzelf staande SVG-string die in uw code leeft.
Kies een gangbaar formaat uit de lijst of typ uw eigen breedte en hoogte, tot 4000 pixels per zijde.
Kies de achtergrond- en tekstkleur. Laat het label leeg om de afmetingen te tonen, of typ iets als Hero-foto.
Het voorbeeld wordt als SVG in uw browser getekend. Kopieer de data-URL of de kant-en-klare img-tag voor uw code.
Wilt u een echt bestand, kies dan PNG, JPG of WebP en download het. Het canvas in uw browser codeert het, dus er wordt niets geüpload.
Houd altijd width- en height-attributen op de img, ook bij placeholders, zodat de lay-out niet verspringt als de echte foto komt.
Geef placeholders een label met wat er moet komen, zoals Teamfoto of Productvoorkant, zodat de eigenaar van de inhoud weet wat hij moet aanleveren.
Gebruik een middengrijze achtergrond met donkerdere tekst; puur witte vlakken verdwijnen tegen witte paginasecties.
Vervang elke placeholder vóór de lancering. Zoek in uw code op data:image/svg+xml om achtergebleven exemplaren te vinden.
Veelgestelde vragen
Verlopen deze afbeeldingen ooit?
Nee. Een gedownload bestand is van u, en een SVG-data-URL is gewoon tekst in uw pagina, dus er zit geen server achter die kan verdwijnen.
Waarom heeft de JPG-download geen transparantie?
JPEG heeft geen alfakanaal. Elke placeholder hier heeft sowieso een effen achtergrond, maar kies PNG of WebP als u het bestand later bewerkt en een transparant gebied nodig hebt.
Kan ik de SVG-data-URL in CSS gebruiken?
Ja. Zet hem in url("...") binnen background-image. De tool vervangt dubbele aanhalingstekens al door enkele en codeert #, < en >, zodat de string heel blijft in CSS en HTML-attributen.
Welke browsers kunnen WebP exporteren?
Elke browser moet canvasexport naar image/png ondersteunen, terwijl JPEG en WebP optioneel zijn. Kan een browser geen WebP maken, dan geeft hij stilletjes een PNG terug, en de bestandsnaam hier vermeldt dat dan.
Placeholders die helpen in plaats van problemen te verbergen
Een goede placeholder heeft dezelfde beeldverhouding als de uiteindelijke afbeelding. Wordt de hero een foto van 16:9, maak het prototype dan met 1920 bij 1080 en niet met een vierkant, anders wordt de lay-out die u goedkeurt later lelijk bijgesneden.
Schrijf het bedoelde formaat op het vlak. Ontwerpers, schrijvers en fotografen zien dan wat ze moeten leveren zonder de code te openen.
Data-URL's versus bestanden
Een data-URL zet de bytes van de afbeelding in de src zelf. Voor een kleine SVG is dat goedkoper dan een netwerkverzoek en maakt het het fragment draagbaar: plak het overal en het wordt weergegeven.
Download voor alles wat u naar een CMS uploadt, in een ontwerpbestand bewaart of langer wilt houden, liever een echt bestand. Lange data-URL's zijn lastig te lezen bij een code review.
Gangbare placeholderformaten
Voorinstellingen in de generator
Gebruik
Breedte
Hoogte
Open Graph-kaart
Hero, 16:9
Blogminiatuur
Vierkante post
Staande story
Avatar
Productfoto, 4:5
Leaderboard-banner
Placeholder in een img-tag en in CSS
Inline SVG-placeholder, geen verzoek
Hetzelfde grijze vlak van 640 bij 360, twee keer gebruikt: eenmaal als afbeeldingsbron, eenmaal als CSS-achtergrond.
Open Graph-kaart
Hero, 16:9
Blogminiatuur
Vierkante post
Staande story
Avatar
Productfoto, 4:5
Leaderboard-banner
Uw browser kon geen canvas openen.
De afbeelding kon niet worden gecodeerd.
{name} opgeslagen ({n} KB).
Maak een placeholder
Kies een formaat, kleuren en eventueel een label. Kopieer een SVG-data-URL of img-tag, of download een PNG, JPG of WebP die in uw browser is gemaakt.