crop_original Placeholder-afbeelding Generator star

Waarom ontwerpers en ontwikkelaars placeholder-afbeeldingen gebruiken

Lang voordat de echte fotografie, illustraties of productfoto's van een website klaar zijn, moet iemand toch kunnen zien hoe de pagina eruitziet met afbeeldingen erin. Een lay-out die volledig is opgebouwd met lege grijze vakken of ontbrekende-afbeelding-iconen is misleidend — marges, beeldverhoudingen, en hoe tekst om een afbeelding heen loopt, gedragen zich allemaal anders zodra er daadwerkelijk iets die ruimte inneemt. Een placeholder-afbeelding lost dit op door de uiteindelijke asset te vervangen: hij heeft de juiste breedte en hoogte, staat op de juiste plek in het raster, en laat een ontwerper of ontwikkelaar beoordelen of de lay-out werkt, zonder dat de definitieve inhoud al hoeft te bestaan. De inhoud van de placeholder — de kleur, het label — is bewust onbelangrijk; wat ertoe doet is dat de afmetingen en beeldverhouding overeenkomen met wat de echte afbeelding uiteindelijk zal zijn.

Dit is waarom populaire placeholder-afbeeldingsdiensten traditioneel werken door de grootte rechtstreeks in een URL te coderen, zoals het opvragen van een afbeelding van 800×600 en een grijze rechthoek terugkrijgen met "800 × 600" erop gedrukt. Die afgedrukte grootte is zelf ook nuttig: het laat iedereen die een blik op de mockup werpt onmiddellijk bevestigen dat de afbeeldingsruimte de bedoelde afmeting heeft, zonder de HTML te hoeven inspecteren. Deze tool volgt dezelfde conventie — laat het tekstveld leeg en de tool labelt de rechthoek automatisch met zijn eigen breedte en hoogte, of voer aangepaste tekst in om een bijschrift, een placeholder-merknaam, of iets anders te bekijken dat in dat vak moet passen.

Waarom SVG een beter placeholderformaat kan zijn dan PNG

Een PNG-placeholder is een raster van pixels: een effen rechthoek van 800×600 met tekst moet nog steeds kleurinformatie opslaan voor alle 480.000 van die pixels, ook al is de overgrote meerderheid ervan één uniforme kleur. Een SVG-placeholder daarentegen bestaat helemaal niet uit pixels — het is een kort tekstblok dat vormen beschrijft: "teken een rechthoek van deze breedte en hoogte, gevuld met deze kleur, teken vervolgens deze tekst gecentreerd erin." Voor een eenvoudige placeholder met effen kleur en tekst, zoals degene die deze tool maakt, is die beschrijving doorgaans slechts enkele honderden bytes, aanzienlijk kleiner dan de equivalente PNG. SVG heeft een tweede voordeel dat nog meer telt voor placeholders die worden gebruikt in een responsieve lay-out: omdat het wordt gedefinieerd door wiskundige vorminstructies in plaats van een vast pixelraster, kan het naar elke grootte worden op- of afgeschaald zonder enig kwaliteitsverlies of pixelvorming, terwijl een PNG die buiten zijn oorspronkelijke resolutie wordt uitgerekt zichtbaar wazig wordt.

Beide formaten worden hier op dezelfde manier gegenereerd: er wordt een rechthoek getekend en gevuld met de gekozen achtergrondkleur, en de labeltekst wordt zowel horizontaal als verticaal gecentreerd erin geplaatst, met een grootte die proportioneel is geschaald naar de afmetingen van het vak zodat een kleine placeholder niet wordt overweldigd door te grote tekst. De PNG-versie wordt weergegeven op een HTML5-canvaselement en geëxporteerd met canvas.toDataURL(); de SVG-versie wordt rechtstreeks opgebouwd als een XML-tekenreeks met een <rect>- en een <text>-element en gedownload als bestand. In tegenstelling tot placeholder-diensten die een afbeelding van een externe URL ophalen — een echt netwerkverzoek elke keer dat de pagina laadt — draait hier alles lokaal: er verlaat nooit een verzoek de browser, dus er is niets dat kan mislukken als die externe dienst uitvalt, en er is geen groottelimiet opgelegd door de server van iemand anders.