Placeholder-afbeelding maken

Zo maak je een placeholder-afbeelding

1. Vul de Breedte (px) en Hoogte (px) in, van 1 tot 10.000 pixels. Het voorbeeld en de beeldverhouding worden bijgewerkt terwijl je typt.
2. Typ een Tekst, of laat het veld leeg om het formaat af te drukken, zoals “1200×630”.
3. Kies de Achtergrondkleur en de Tekstkleur.
4. Laat Lettergrootte (px) op 0 staan voor een automatische grootte die in de afbeelding past, of vul een grootte in pixels in. Kies een Lettertype.
5. Kies het Formaat: PNG, JPG, WebP of SVG, en klik op Afbeelding downloaden.

Wil je veel formaten tegelijk maken, open dan Reeks gangbare formaten, vink de formaten aan die je nodig hebt (of gebruik Alles selecteren / Niets selecteren) en klik op Gekozen formaten downloaden (ZIP). Elke afbeelding gebruikt de kleuren, het lettertype en het formaat van hierboven; is de tekst leeg, dan toont elke afbeelding haar eigen formaat.

Welk bestandsformaat kies je?

• SVG is het lichtst (een paar honderd bytes, ongeacht het formaat) en blijft bij elke zoom scherp. Ideaal voor mock-ups, prototypes en HTML-sjablonen. De tekst gebruikt een systeemlettertype, dus het uiterlijk kan per computer iets verschillen.
• PNG geeft exacte, verliesvrije pixels. Kies het voor ontwerpprogramma’s en wanneer een echte bitmap vereist is.
• JPG levert kleine bestanden bij grote formaten en wordt overal geaccepteerd, ook door oude contentmanagementsystemen.
• WebP is kleiner dan PNG en JPG en wordt door alle huidige browsers ondersteund.

Rasterformaten zijn beperkt tot ongeveer 16,7 miljoen pixels (bijvoorbeeld 4096 × 4096), het grootste canvas dat browsers kunnen coderen. Voor SVG geldt die grens niet.

Gangbare formaten in de reeks

De advertentieformaten volgen de IAB-standaardformaten die de meeste advertentienetwerken gebruiken; de socialformaten komen overeen met de aanbevelingen van de grote platforms.

Waarom placeholder-afbeeldingen?

Een placeholder reserveert precies de ruimte die een afbeelding inneemt, nog voordat de echte afbeelding bestaat. Zo kunnen ontwerpers en ontwikkelaars een lay-out controleren, responsive breakpoints testen of een klant laten zien waar beeld komt, zonder naar stockfoto’s te zoeken. Door de afmetingen op de afbeelding te zetten, zie je meteen welk formaat elk vak verwacht, en een neutraal grijs houdt de aandacht bij de lay-out in plaats van bij de inhoud.

Omdat deze tool echte bestanden maakt, kun je ze offline gebruiken, in een repository opnemen of in een ontwerpprogramma slepen, zonder afhankelijk te zijn van een externe placeholderdienst die kan uitvallen of bezoekers kan volgen.