Generate Page Preview Images for Social Sharing and Open Graph

I want to generate images for social sharing. I came across: and

I want to use to save a preview of the page itself at different viewport sizes as the image. How do I do that while the site is built? Maybe now can use a special HTML template to generate the cards.