Synchronous Image Generation

Since launching in March, one of the ultimate goals of Bannerbear was to be able to generate images synchronously, opening up many more use-cases
by Jon Yongfook ·

Contents

    Since launching in March, one of the ultimate goals of Bannerbear was to be able to generate images synchronously, opening up many more use-cases. That day is now here!

    Until today, Bannerbear has worked only asynchronously.

    Asynchronous: you fire off an API request to Bannerbear, the image starts to generate, then you fire another API request to fetch the image. If you are using the REST API you'll be familiar with this pattern. If you are using the Zapier integration which delivers images instantly, this two-step process is actually what is going on in the background.

    From today there is a new synchronous option when using Signed URLs.

    Synchronous: you fire off an API request to Bannerbear, and the image is generated and returned in the same request.

    There are pros and cons to each approach and in your application you may wish to use different approaches for different parts of your app / website.

    Why Synchronous is Cool

    Synchronous image generation has many use-cases in user-facing contexts such as websites and emails. Just get your app or CMS to construct a Bannerbear synchronous signed url and let Bannerbear do the rest.

    With the previous async pattern, you could not reliably use signed urls in contexts such as social meta tags or user emails. The async "loading" graphic would get loaded by social media platforms or email clients, and shown to the user which is not what we want.

    Now with the new synchronous functionality, there is no "loading" graphic - the requested image just loads synchronously after a few seconds, even when requesting it for the first time.

    Use Cases for Synchronous Signed URLs

    I think the top two use cases for this feature will be:

    Social meta tags - get your CMS to plug in some parameters (e.g. product names, article titles etc) and output a unique social image url for every page of your site. It gives your site an instant facelift on social media - and with Bannerbear's special objects you can get really creative e.g. adding star ratings to your social meta tag images across an entire product catalogue.

    Email personalization - now you can easily add dynamic images to your user-facing emails. Really handy for welcome emails, weekly update emails etc. You can see an example of this if you sign up for Bannerbear - you'll receive a welcome email with a graphic like this:

    Previously I was generating these images asynchronously using the REST API and a webhook (too complicated!), but now I just embed the synchronous signed url in the email and let Bannerbear do the rest. Much simpler!

    How to use Synchronous Signed URLs

    I've tried to make this as simple as possible!

    The method for creating synchronous signed urls is the same as the previous async method. The only difference is, after you have generated your digitally-signed url you simply change:

    cdn.bannerbear.com

    To:

    ondemand.bannerbear.com

    That's it!

    The signed url documentation has been updated to reflect these changes.

    About the authorJon Yongfook@yongfook
    Jon is the founder of Bannerbear. He has worked as a designer and programmer for 20 years and is fascinated by the role of technology in design automation.

    How to Automatically Create Multi-Time Zone Event Posters with Node.js and Bannerbear

    Hosting online events, workshops, or webinars for a global audience? Use Bannerbear in Node.js to automatically generate event posters with the correct time zones for different regions!

    Template Set: Batch-Generate Images in Different Dimensions Using Bannerbear (Node.js)

    Ever found yourself manually resizing images for different platforms? Let’s automate that! With Bannerbear, you can easily generate images in multiple dimensions in one go. This step-by-step tutorial shows you how to use Bannerbear’s template set to create perfectly sized images for any platform.

    Bannerbear Beginner Guide: How to Start Generating Images Dynamically in JavaScript with Bannerbear

    If you want to integrate dynamic image generation into your JavaScript project, this article is for you! Learn how to do it effortlessly with Bannerbear—we’ll walk you through the entire process, from setup and implementation to achieving the final result.

    Automate & Scale
    Your Marketing

    Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

    Synchronous Image Generation
    Synchronous Image Generation