Generating Dynamic OG Image using iMagick on the page load

Hi guys,

In my website there are pages which shows the current prices of a particular mobile phone in a particular country or city, based on the location, it generates a dynamic OG image with Realtime prices data from the particular mobile phone. so that it is much informative when it is shared. sometime it works fine but it get over bloated and started giving 500 error with page time out. iam using iMagick with pho to generate the image. is there any other library or technology which i can use to generate without sacrificing my server resources?

any help is greatly appriciated.

Hey @Ryan_s83,

Unfortunately I can’t provide too much guidance on how to optimize your application, but you can try upgrading to a higher plan to handle more traffic. It may also be worth finding forums specific to the libraries you are using to see if there is anything you can do to optimize your workloads.

Hey Ryan.

What language/framework are you using?

ImageMagick can be a bit of a beast if you have a lot of activity running through your site. I had a similar problem using ImageMagick to generate on-demand twitter card images in a Rails app.

In my case, getting everything running correctly through ActiveStorage (ImageMagick still doing the lifting) improved things quite a bit. I have a specific image variant defined for my twitter cards, based on a source image stored with ActiveStorage. When someone visits a dynamic page, it calls the variant, which is generated in real time if it doesn’t already exist. The variant parameters support ImageMagick options so I am able to use the native ‘text’ and ‘gravity’ options to gen text over the image for this variant if needed.

Could the image generation be moved to an asynchronous process? Unless the user visiting the page needs to see the OG image themselves, it could be generated in the background instead of at page load. An example would be to link the trigger to the ‘share’ button, so it adds the image to a background process to generate and the OG image, making it ready by the time the posting to social actually occurs but not holding up the user with a possible 500 error.

Or, maybe offload the generation entirely to a secondary or external app? I’ve played around a bit with og-image (GitHub - vercel/og-image: Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc). It’s a lightweight Node.js service that leverages headless-Chromium to render the card in HTML, then screenshot and cache the image. You point your og:image meta tag to your og-image endpoint, including the parameters for your image/text and it does the lifting instead of your web app.

Hope something in there helps.

1 Like