Here is a thought that took me embarrassingly long to have: why does a design have to become a file at all?
We are so used to the sequence of design, export, upload, insert, that we barely notice it. But an image on a web page is just something the browser asks for. If the thing answering that request can render your design on the spot, then the design never has to be frozen into a PNG that starts going out of date the moment you save it.
That idea gives you three quite different tools, and choosing between them is the whole art.
Three ways to put a design on a page
They all live under View, then Dynamic Template Shortcodes, and they exist as Gutenberg blocks and as Elementor widgets too. Search for “wpie” in the widget panel and they are there, and the plugin settings have a Widgets and Blocks tab if you want to switch either integration off.
All three embeds, and the blocks and Elementor widgets that carry them, are part of WunderPaint Pro.
Dynamic Image: the design, rendered exactly
This is a real image, drawn by the same engine that draws your canvas. Every pixel matches what you designed: layer effects, blend modes, image filters, the lot.
It re-bakes when the design is saved or the template changes, not on every page view. So it is fast, it looks perfect, and it stays in step with your design without you touching it.
Use it for anything where fidelity matters, which is most things: header graphics, article images, product cards, anything with photography or effects in it.
Live Badge: nothing to re-render
A live badge is not a picture at all. It is vector graphics, as SVG, and the server fills its bound texts in as the page is served.
That means there is no re-render step and nothing to wait for. A price, a rating, a headline, a “last updated” date: change the post and the badge changes with it. On a site with a page cache the badge is exactly as current as the page it sits on, which is what you want, since editing the post refreshes both.
The trade is fidelity. The browser lays out the text itself, so spacing and line breaks can shift a little, complex layer effects get simplified, and pixel layers come along as static images inside the SVG. Which leads to a simple design rule: keep a live badge to text, shapes and gradients, exactly the things that translate cleanly to vectors.
Personalized Image: rendered per visitor
This one renders in the visitor’s own browser and fills the template from URL parameters. Add ?name=Anna to the link and the graphic greets Anna by name.
The elegant part is what it does not do: no file is created per visitor. Nothing is stored, nothing accumulates, there is no folder slowly filling with a thousand near-identical images. The template plus the parameter is the whole thing.
It is made for campaign links, personalised invitations, referral pages, anywhere the same page should feel addressed to the person opening it.
How to choose, in one question
Ask what changes and how often.
The content changes when the post changes, which is most of the time. Dynamic Image. It re-renders on save, it looks exactly like your design, and it costs nothing on page load because it is a real image file being served.
The content changes on its own, without anyone editing anything. A price feed, a stock level, a date, a counter. Live Badge. This is the only one of the three that can be correct at 3am on a Tuesday without a human involved.
The content depends on who is looking. Personalized Image. Nothing else can do this without generating a file per person, which is a road you do not want to walk down.
If two of them would work, take Dynamic Image. Fidelity is worth more than liveness for almost everything, and a design that looks exactly right is the point.
Practical things I learned the hard way
Design the badge as a badge. A live badge that was designed as a full illustration will disappoint you. Start from the constraint: text, shapes, gradients, generous padding, a shape that tolerates the text being slightly wider than you expected. Design for SVG and it looks deliberate rather than degraded.
Give live text room to breathe. The browser lays out that text, and browsers disagree about fonts by a pixel here and there. A badge with the text jammed against its own border will eventually clip on somebody’s machine. Padding is your insurance.
Remember it is still an image on a page. Give it sensible dimensions in the layout so the page does not jump while it loads, and write alt text. A generated graphic is exactly as invisible to a screen reader as a hand-made one.
Test the empty case. What does the badge look like when the price feed returns nothing? Design that state on purpose rather than discovering it.
The mental shift
What I like about all this is not the time saved. It is that it removes a category of small lies from a website.
Every static graphic on a page is a snapshot of what was true when somebody exported it. The price banner from March. The “open until 6” sign made before the hours changed. The team graphic with the person who left. None of these are anybody’s fault, they are just what happens when information gets baked into pixels.
When the graphic is generated from the same data the rest of the site uses, that whole class of quiet wrongness disappears. The page is correct because it cannot easily be anything else, and that is a much better foundation than remembering to update things.
