How Twitter renders GIF

I’ve long wondered how Twitter renders animated GIF files. I have Firefox set to disable GIF animation, and it works everywhere except on Twitter. Apart from that, the interface indicates something is going on beyond normal GIF display. It doesn’t animate till you hit the “Play” button, and then there’s apparently no way to stop it.

I grabbed the raw HTML of an early tweet with a GIF and took a look at it. The page, with just one tweet, is over a megabyte. That’s not counting included images and JavaScript. Twitter is impressively bloated.

There are 229 <img> tags. One of them actually does reference an animated GIF file:


<img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/2533382829/nimp2gkjt1lxvsr2ykzr_bigger.gif" alt="">


However, it’s a simple line drawing of a person at a keyboard, not the image in question. I don’t know why it’s there or when you’d see it. As far as the featured GIF is concerned, Twitter’s software evidently handles the animation itself, rather than relying on the browser.

Examining elements from the browser, the whole tweet is contained in the block of HTML:

<div class="tweet permalink-tweet js-actionable-user js-actionable-tweet js-original-tweet
         has-cards with-social-proof  has-content
         logged-in
          
          js-initial-focus
"
        data-associated-tweet-id="nnnnnnnn"
        
data-tweet-id="nnn"
data-item-id="nnn"
data-permalink-path="/nisssssss/status/nnnnnn"
data-conversation-id="nnn"

data-tweet-nonce="nnnnnnnnn"
data-tweet-stat-initialized="true"

  data-screen-name="nisssssss" data-name="Nick Sssssss" data-user-id="nnnnnn"
  data-you-follow="false"
  data-follows-you="false"
  data-you-block="false"

data-reply-to-users-json="[{&quot;id_str&quot;:&quot;20668455&quot;,&quot;screen_name&quot;:&quot;nisssssss&quot;,&quot;name&quot;:&quot;Nick Sssssss&quot;,&quot;emojified_name&quot;:{&quot;text&quot;:&quot;Nick Sssssss&quot;,&quot;emojified_text_as_html&quot;:&quot;Nick Sssssss&quot;}}]"

data-disclosure-type=""

 data-has-cards="true"

        tabindex="0"
>

I’ve reduced the white space and redacted IDs and personal information.

What I can make out from it is that the whole tweet is server data which is rendered by JavaScript. The GIF file appears to stay on the server, and the client-side code probably picks it up as streaming data. Someone who was really determined could doubtless reverse-engineer more, but I’ll just call it black magic.

So if you were wondering why it doesn’t act like a normal GIF file in the browser, that’s why.