How to embed a tweet on your site as image

Bruno Quaresma profile
Bruno Quaresma
Creator of TweetPik

In this blog post I will share with you how to embed a tweet on your site as image. Embed a tweet on your site as image has some benefits:

  • You don't have to deal with script setup complexity.
  • Images can be cached and optmized for lazy load.
  • Can be customized.

1. How to take a Twitter screenshot?

You can take a Twitter screenshot manually or use a tool for that. Right now, the best tool for taking Twitter Screenshots is TweetPik. See how to take a professional screenshot using TweetPik on this blog post.

For manually screenshots, you can navigate into the tweet page that you want to screenshot and press the keyboard button "PrtScrn" or, if you are using a mac, you can press "cmd + shift + 4" and select the tweet area.

2. Customization

Using TweetPik, you can fully customize the tweet colors, backgroumd, dimensions and visible elements but if you are doing that manually, the app Canva can be a good option to add some nice design.

By the way, you can use TweetPik + Canva to create awesome results like I did on this post.

3. Optimizing the image

After take the screenshot, you want to optimize the image to make it smaller as possible. So, the browser can load and display it very fast without affect the user experience.

If you are using TweetPik, you can screenshot your tweet using the option "Save on cloud" to automatically apply all the optmizations that you will need. You can also later, define the right size for your image using the given URL.

If you are doing that manually, you can use services like resizeimage.net for resize and https://tinypng.com to compress the image.

4. Adding the image to your website

Add the image to your website is also very simple. You just need to add the code bellow:

<a href="https://twitter.com/user/status/tweet-id" target="_blank" rel="noreferrer">
  <img src="the-path-to-your-image" loading="lazy" width="400" height="400" alt="Put the tweet text here"></img>
</a>

Some important things to note:

  • Wrap the image with the tweet link. So your users can see it on Twitter if they want to.
  • We are using the loading attribute as lazy to only load the image when it is needed. If the image will be displayed right on the top, you should remove this option to make the browser load it right away.
  • It is a good practice to set the width and height of an image so the browser can calculate the right space for it and avoid layout shift.
  • Always add the tweet text to your alt. It makes the image accessible for all.

If you are using TweetPik, you can set the dimensions using the url like the example bellow using the "h" and "w" parameters:

<img src="https://ik.imagekit.io/tweetpik/289659710454366722/1406247369138638848_gnndZJVbRM.png?h=400&w=400" alt="Alt text" loading="lazy"></img>

Check how it looks like:

I think today I will wrote some article about "Improve SEO and performance by using TweetPik instead of embed tweets". Is it a good headline?
If you are looking for the PRO plan, check the pricing.

Related posts

Taking Branded Twitter Screenshots

Bruno Quaresma profile
Bruno Quaresma
Posted at 6/5/2021

We want to make sure your branded tweet shots are as attractive as possible. As such, we’ve created this guide to help you get the most out of your branded tweet shots.

Read more