How To Embed Tweets As Images On Your Website
Now you can screenshot tweets as a video. See how!

How To Embed Tweets As Images On Your Website

Bruno Quaresma profile
Bruno Quaresma
Co-Creator of TweetPik

Have you ever embedded a Tweet on your site, only to find out later that it’s been deleted? Or perhaps the way the embed shows doesn’t create the best user experience for reading tweets (cropped image attachment, missing characters, etc)?

Annoying right? Well, thankfully, TweetPik can help you fix that, by embedding a Tweet as an image.

What are the advantages of embedding a Tweet as an image?

  • Images can be cached and optmized for lazy load, making your site faster.
  • Tweets can be customized.
  • If a user deletes or changes privacy settings on a Tweet, it won’t disappear from your blog.
  • You don’t have to deal with script setup complexity or HTML

1. How to take a Twitter screenshot?

Sure, you can take a Twitter screenshot manually, but it’s not going to look great. We think better-looking tweets make for a better overall UX, and as such, we think the best tool for taking Twitter Screenshots is TweetPik.

How To Take A Manual Screen Shot On Twitter:

For manual 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.

Problems with this approach are that you end up with disproportionate sizing of text and images, not to mention a bunch of metadata (like date, time, likes, retweet count) that interfere with users simply enjoying or learning from the tweet.

The advantage of this approach is that you can save a few bucks a month vs. using a tool like TweetPik PRO, which costs about 2 cups of coffee.

How To Automatically Create Beautiful Twitter Screenshots:

TweetPik. Our user interface is simple to use and fully customizable. More on that in this blog post.

2. Customization

Using TweetPik, you can fully customize the Tweet colors, background, 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 you 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 affecting the user experience.

If you are using TweetPik, you can screenshot your tweet using the option “Save on cloud” to automatically apply all the optimizations 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 resizing and https://tinypng.com to compress the image.

4. Adding the image to your website

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

<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 below using the “h” and “w” parameters:

<img src="https://ik.imagekit.io/tweetpik/289659710454366722/1406247369138638848_gnndZJVbRM.png?tr=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

25 Of Our Favorite Viral Tweets Of The Month

Jason Mustian profile
Jason Mustian
Posted at 3/4/2022

Read more

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