Twitter Image That Changes When Clicked

By Bill Kray

An overlooked image format for Twitter advertisers.

Twitter images increase reader engagement. Interactive images can stimulate two or even three times as many readers to get involved. It was Paul Shapiro who introduced me to the basics of this technique he calls the roll-over tweet hack. (Though technically, it's not a rollover image.) Hacks are subject to be incompatible with future software updates, but let's work through the issues.

PNG image as it appears in Twitter timeline

Like me, Paul is a blogger and programmer. I also have extensive graphic design, illustration and photo retouching background, having worked in the advertising field for decades. So when Paul blogged about a method to make a Twitter image change appearance with a simple click, he spoke my language. As a catalyst, Paul dissected a slick tweet by Japanese Twitter user, @taki_bump that utilizes solid black, white, and gray.

Twitter displays several media formats, including videos, animated GIF, Vine 6-second loops, and JPG. But the format heralded by Paul is a static image that includes transparency and rhymes with "Bing." That should be a sufficient clue to graphic artists that we are talking about PNG.

Twitter timeline previews fill in transparency with a white background; subsequent enlargements revealed after clicking have black backgrounds. Hence a PNG image that uses transparency could have some white elements that appear only on the black background. Conversely, black elements would appear only when the background is white. A neutral gray can appear on either background. This means an image can alter or enhance a message when clicked. That's the hack in a nutshell but soon, caveats surfaced.

Twitter Changes the Ground Rules

Within a day of building some prototype PNG images, Twitter began rolling out a new desktop user interface (UI) that displays a white background on both the preview and clicked enlargement. Since the UI rollout was not universal, some browsers and platforms may still display contrasting backgrounds. Right away, the hack seemed to run a foul.

Update March 1, 2014: Twitter has reversed its specifications so now both desktop and mobile versions of enlarged images display a black background. This makes the transparent PNG image functional without extra workarounds. Yay!

Noticing that the Twitter UI includes a faint third hover color (#f5f5f5 old browser; #f5f8fa new browser), Paul built a test tweet. However, the negligible contrast disappears when preview images are expanded and shows continuously on mobile devices. When the faint contrast does appear, text must be very large to be legible. So it doesn't offer much hope for salvation of the original hack. Strike!

Nevertheless, with one strike and one foul, the concept is not totally out of play. Basically, we need to build two overlapping versions of the advertisement over a transparent background. The version for black backgrounds must work as an optional addendum to the message for white backgrounds. Some Twitter desktop app users only see the white background. Since we aren't certain which background(s) the user sees, the layers must also work independently of each other. With these guidelines, I began working up the logistics for a Twitter campaign.

Elements alternate with different background l@MYanatoMYart

My Specifications for Images With Transparency

Dimensions: Artwork can be square, landscape or have portrait orientation. Twitter typically crops timeline previews to a height equal to one half the scaled image width. Since much of a taller advertisement area is hidden in the timeline, horizontal dimensions are best. So if you don't want your image collapsed at all and can fit your message within the center, 2:1 ratio is fine.

To allow room for the overlapping tweet hover box when expanded to full-size, dimensions can't be exactly 2:1. The width displayed on desktop Twitter browsers is 506px of the 588px column. Twitter prefers at least 600px wide but larger or smaller sizes are scaled to fit. I used 640x530px dimensions. There is a 320px live area (for timeline collapsed cropping) and 100px bottom tweet hover margin. That margin area is used to display incidental content. The technique is not dependent upon the dimensions. You just need to be certain that key content is not cropped in the timeline.

Colors: Black and transparent tints thereof show on the white background. White and its transparent tints appear against black backgrounds. A transparent tint is produced by tinting a (Photoshop) layer that contains a solid color. This differs from specifying a neutral gray with RGB values. Fifty percent solid gray appears equally on either background. Other shades of solid gray or specified colors can be used. So you are not limited to a monochrome palette.

An anomaly was discovered after uploading an image that looked fine at actual size. Solid white text on a transparent background displays faint outlines when scaled on Twitter desktop and mobile. Lowering the layer transparency to anywhere between 40 to 80 percent eliminates the outlinting while still making it visible against a black background.

Touchscreens do not include a hover option. So that hover color mentioned earlier, which is a pale blueish gray in the new Twitter desktop browser is perpetually a different light gray within small image previews on the mobile app. With the tinted background, faint white elements are revealed. My advice is not to use for the hover color but make certain the entire piece works when all layers appear together.

PNG Options: There are actually three types of PNG images. PNG-8 uses solid or dithered colors much like a GIF (sans the animation option). PNG-24 supports solid and continuous tone images. Less popular SuperPNG offers more pro options like variable compression, and preservation of alpha channels, ICC profiles, and meta data. The common PNG-24 includes sufficient options for this project. (In fact, it produced a smaller file than SuperPNG on smallest setting with all options disabled.)

Disable interlacing. This buffers lower resolution versions of the image that progressively load into the browser, which may spoil the effect of hidden content. It also makes the file larger. Solid colors make smaller PNG images. Ultimate size depends upon the number of perceived colors. Hence gradations increase file size. At the aforementioned dimensions, my series of ads had file sizes that varied between 150 KB to 250 KB.

Within Photoshop, I created a folder called "backgrounds" that includes solid black, hover color (#f5f8fa), and solid white layers. This makes it easy to see how the work appears under different circumstances. To view everything together, dim the black layer transparency to 50 percent.

Link Differentiation: When your tweet contains a website link in addition to the embedded photo, visitors (Tweeps) can mistakenly click the image link when attempting to visit the website. This is especially true when one immediately follows the other at the end of the tweet. It can resemble one long URL. One suggestion is to separate the two. Put the website link in the middle of the tweet and the image link at the end. If they both must be at the end, separate them with an ellipsis, tilde or some other character. Another suggestion is to use a link shortening service for one link but not the other to make a distinction. Embedded image URLs begin with pic.twitter.com unless using a third-party image service like TwitPic.

Entire image alternates with dark background @MYanatoMYart

Reveal Elements With Alternating Background

The Lightbox effect enabled on this article allow you to see the legacy Twitter effect of alternating backgrounds when you click the images. The first ad included in the headline the word "click" to reveal something. Since clicking may or may not effect a change, such headlines have been eliminated. In the ad directed toward artists, the message visible against either background is to follow my Twitter account. The black-background version has a time-limited promo code for a specific product. There are also some subtle differences in the appearance of the illustration against the opposing backgrounds.

My first ads using the alternating background technique were mostly monochromatic. An early ad included a simple outline of a room against the white background that became fully furnished against a black background. When Twitter switched to the white background enlargements, the initially visible art had to be modified to faintly depict the furnished room. Another ad displays one individual against the white background who is joined by another against the black background. Some ads spotlight a part of human anatomy when expanded.

No matter how simple they initially appear, each image has a secret element that is revealed when the background changes. You can follow them all on Twitter @MYanatoMYart. Some of the effects require an advanced knowledge of Photoshop. Often, I have spent hours experimenting with alpha channels, paths and filters. There are images that change entirely when clicked on mobile devices or some desktop browsers with black backgrounds like the Norman Rockwell depicted above. Your images needn't be as sophisticated to be effective.

engagement-21-percent.jpg

So are you ready to increase engagement rate? Include images within your Twitter Ads.

Source: http://twitter.com/myanatomyart/media