Image Replacer laat je elke afbeelding op een webpagina klikken en vervangen door je eigen — door een lokaal bestand te uploaden of een afbeeldings-URL in te plakken. De vervanging past perfect in de afmetingen van het originele element, behoud van de pagina-indeling. Test hoe nieuwe assets in productiecontexten eruitzien, maak mockups met echte inhoud of maak schermafbeeldingen met aangepaste afbeeldingen.
Ontwerpers en ontwikkelaars moeten regelmatig zien hoe een nieuwe afbeelding er in een bestaande lay-out uit zou zien. Zou de nieuwe hero afbeelding werken met de huidige tekstoverlay? Ziet de nieuwe productfoto er correct uit in het bestaande kaartrastenraster? Is het logo van de klant de juiste maat voor de koptekst? Normaal gesproken vereist het beantwoorden van deze vragen het bewerken van code, het wisselen van afbeeldingsbestanden, het opnieuw opbouwen en het bekijken. Image Replacer maakt het onmiddellijk — klik op de afbeelding die je wilt wijzigen, upload een vervanging of plak een URL in en de afbeelding wordt onmiddellijk verwisseld terwijl de afmetingen en styling van het originele element behouden blijven. De lay-out verschuift niet, buurelementen blijven op hun plaats en je ziet precies hoe de nieuwe afbeelding in de echte paginacontext eruitziet. Alle wijzigingen zijn niet-destructief en worden opnieuw ingesteld bij paginavernieuwing.
Beweeg je muis over afbeeldingen op de pagina om ze gemarkeerd te zien. Klik om de afbeelding te selecteren die je wilt vervangen. Het gereedschap herkent img-elementen, CSS background-image-elementen en picture/source-elementen.
Sleep een afbeeldingsbestand van je computer of klik om een bestandsbrowser te openen. Ondersteunt PNG-, JPG-, WebP-, SVG- en GIF-indelingen. Het bestand wordt lokaal geladen — nooit naar een server geüpload.
Heb je een ergens gehoste afbeelding? Plak de URL en deze wordt onmiddellijk toegepast. Werkt met elke openbaar toegankelijke afbeeldings-URL — Unsplash, Imgur, je CDN, S3-emmers of elke directe afbeeldings link.
De vervangende afbeelding vult de afmetingen van het originele element met object-fit, dus de pagina-indeling blijft precies hetzelfde. Geen lay-outverplaatsingen, geen vernieuwing, geen verbroken rasteren. De nieuwe afbeelding past zich aan de ruimte aan.
Een zijpaneel houdt alle afbeeldingen die je in de huidige sessie hebt vervangen bij. Zie origineel versus vervanging in één oogopslag en klik op een geschiedenisitem om die specifieke vervanging ongedaan te maken.
Alle vervangingen bestaan alleen in browsergeheugen. De werkelijke afbeeldingsbestanden en HTML van de pagina worden nooit gewijzigd. Vernieuw de pagina om elk origineel afbeelding onmiddellijk terug te stellen. Veilig te gebruiken op elke website.
Je team heeft drie kandidaat-heroafbeeldingen voor de homepage. In plaats van elk in te zetten, open je de productiesite en verwissel je de heroafbeelding met elke kandidaat. Zie hoe elk eruitziet met de echte tekstoverlay, navigatiebalk en omringende inhoud.
Vervang tijdens een clientoproep de plaatsaanduidafbeeldingen op een staging site door de werkelijke productfoto's of brandactivakombinaties van de klant. Toon hen precies hoe hun inhoud in het uiteindelijke ontwerp zal eruitzien — live, in de browser.
Heb je schermafbeeldingen nodig met verschillende regionale inhoud? Vervang productafbeeldingen, teamfoto's of featureafbeeldingen met regio-specifieke versies en maak schermafbeeldingen voor elke markt — allemaal zonder afzonderlijke builds in te zetten.
Ontdek hoe een ander illustratiestijl- of fotografiebenadering op een bestaande pagina zou eruitzien. Wissel afbeeldingen één voor één uit om een visueel prototype van de nieuwe ontwerprichting op te bouwen zonder code aan te raken.
Vervang een JPG door een WebP-versie om visueel te verifiëren dat de kwaliteit acceptabel is. Of wissel een afbeelding met hogere resolutie in om te controleren of de lay-out 2x afbeeldingen correct verwerkt. Test afbeeldingsformaatwijzigingen visueel voordat je je aan bestandsconversies vastlegt.
Open het DevSuite Pro zwevende dock en klik op het pictogram Afbeelding vervanger. Het gereedschap wordt geactiveerd en afbeeldingen op de pagina worden te klikken doelen, gemarkeerd bij hover.
Klik op een afbeelding op de pagina. Een vervangingsdialoog verschijnt met informatie over de huidige afbeelding (bestandsnaam, afmetingen, grootte) en opties om een bestand te uploaden of een URL in te plakken.
Sleep een bestand van je computer, klik om te bladeren of plak een afbeeldings-URL in. De vervanging wordt onmiddellijk toegepast en de afbeelding wordt op zijn plaats verwisseld.
Zie hoe de nieuwe afbeelding in de werkelijke pagina-indeling eruitziet. Controleer dat het met tekstoverlays werkt, goed in de container past en aansluit bij de omringende inhoud.
Klik op andere afbeeldingen om meer te vervangen. Het geschiedeniszijpaneel houdt alle wijzigingen bij. Als je klaar bent, vernieuw je de pagina om alle originele afbeeldingen terug te stellen.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
