I have a collection of banner templates (designed in HTML and CSS) stored in a database. Each template contains placeholders for a logo, a heading, and a subheading area. I need to dynamically generate new images based on these templates by replacing the placeholders with custom data (e.g., a specific logo, a custom heading, and a custom subheading).
My goal is to find an efficient and scalable solution that can handle a large number of templates and generate images on-the-fly or in batch mode. Ideally, the solution should be able to:
- Load the template HTML/CSS from the database.
- Identify the placeholders (e.g., logo area, heading area, subheading area) within the templates.
- Replace the placeholders with the provided custom data (logos, text, etc.).
- Generate new images with the customized content.
I'm open to using AI tools, libraries, APIs, or any other suitable technologies that can address this requirement. Performance and scalability are important factors to consider, as the solution may need to handle a high volume of requests or generate a large number of images simultaneously.
I would appreciate any recommendations, code examples, or guidance on how to approach this problem effectively. Please share your expertise and any relevant resources or tools that could be helpful in implementing this solution.
Top comments (3)
You should be aware of the runtime issues of this approach. Compared to all other operations on a page (like parsing HTML/JS-content), fetching data over HTTP will take very long. The Round Trip Time (RTT) is typically something between 20 - 80 ms, but may be longer depending on your internet connection. You can check the RTT-speed with the ping-command.
If you are using SSR, this does not matter, as the database is requested locally. But if the brwoser requests data, this may slow down the whole page. Often it is more than one HTTP-request to finally get the data, and page rendering may be blocked until data are served. Or, the page is rendered without your images and is rerendered, when data are ready. So you get what they call a "layout shift".
HTML-pages use a preload scanner to find all static external ressources, so an image referenced somewhere on a page can be loaded while the page is rendering. This minimizes the delay as much as possible, but you have 2 RTT´s anyway (one to load the page, and one to load the image). On the second page load, things will be much faster, as data are already in the cache and do not need to be fetched again.
Using a database will add a lot of communication (connect to the database, ask for the available data, retrieve the final image). So, there is some risk to finally get a very slow result.
As I understand it, it is a necessity to have raster images for banners? No option for dynamically composed SVG + background images + PNGs? That way you could add animation, make the banner adaptive to size, and all the magic would happen in the browser, instead of loading DB or backend scripts.
After all, even raster images aren't all the same, and could be optimised for browser rendering on a slow internet connection.
github.com/vercel/satori