Every now and then, I find myself wanting to turn Tweets into high-quality images. My main reason for doing so is to include an image of the tweet in a presentation. The normal procedure I follow is simple:
- Click on the tweet I want to turn into an image.
- Create a screenshot of the tweet using (on my Mac) ⇧⌘4.
This produces a PNG image with the resolution of my monitor and tends to look quite bad when enlarged: The text and images look blurry.
For example, here’s an image of a tweet.
If you zoom in, the text and my avatar (a picture of two of my adorable cats) gets blurry.
This seems silly. With a vector font, we should be able to scale the tweet essentially arbitrarily. And Twitter actually maintains higher-resolution images for profile pictures than what gets served normally.
Here’s the solution I came up with.
Create a tweet.html document with the following contents.
<!DOCTYPE html>
<html>
<body>
<!-- Insert Twitter embed blockquote code here -->
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script>
var interval = setInterval(function() {
var frame = window.frames["twitter-widget-0"];
if (frame == null)
return;
var images = frame.document.getElementsByClassName("Avatar");
if (images.length === 0)
return;
clearInterval(interval);
for (var i = 0; i < images.length; ++i) {
images[i].src = images[i].src.replace("_normal", "");
}
}, 100);
</script>
</body>
</html>
- Click on the tweet’s “Embed Tweet” option and copy the HTML. (Only the
blockquote element is actually needed, but the following script element is harmless to include.) Paste the code in tweet.html in the indicated location. - Open tweet.html in a web browser that supports export to PDF functionality. Wait a moment for the page to fully load and then export it as
tweet.pdf. Safari’s “Export to PDF…” option is better than printing to PDF using either Safari or Chrome. I didn’t try other browsers. - Finally,
tweet.pdf may need to be cropped. (It does when exporting from Safari.) Any number of tools suffice. I used pdfcrop which is part of TeX Live.
Creating the images in this manner has three main benefits. First, it actually embeds the fonts used for the text so that resizing the PDF produces correctly scaled fonts. Second, it (appears to) produce vector graphics for the standard tweet styling. Third, (and this is the point of the JavaScript at the end of the template) the low resolution images used by Twitter for avatars are replaced with higher resolution versions.
The tweet above becomes the following PDF.