Update 8.51 PM. Some graphics were extending off RHS on iPads and other tablets. Phones and Desktop seems OK. Intermediate size WordPress mobile theme seems at fault. Have had to manually force some graphics to be smaller, ergo fuzzier. When clicked on and expanded they should still be full size though
I first noted a few months ago that I was seeing a lot of odd images on Twitter when people posted ChemDraw pictures. I kept seeing black images with just the occasional flash of colour. Curious I began investigating and discovered it had to do with transparent GIFs. As I was up last week as curator of Real Scientists on Twitter I knew I had to get my ducks in a row if I wasn’t going to post ChemDraw structures and schemes that no-one could read or see properly, so I went back and checked everything. And as it may be of interest to people I’ve put it all into a blog post.
ChemDraw for iPad
My test platform is an iPad 3 running iOS 9. I first used a picture of Midazolam I already had saved in the iPad version of ChemDraw, and tweeted it from within the app to a dormant Twitter account of mine. As I had followed that account in my regular Twitter account (@MartinStoermer) it showed up in my Twitter timeline just fine in both Tweetbot 2 and the official Twitter apps on the iPad, and also in the Twitter web client on the desktop. I should point out that tweeting it directly from the Chemdraw app did include the “Image by ChemDraw” watermark at top left of the image.
I then saved the file to the iPad camera roll where it is saved in PNG format and tweeted it from there. It too arrived in both Tweetbot and the Twitter apps without problems. Additionally I exported the file via email to my desktop machine as email attachments using all 3 available formats, PDF, PNG and Chemdraw (CDXML). The PDF and PNG files behaved as expected, cropped down to be just the size of the embedded image but the CDXML file was a bit odd when reopened in the Desktop version of ChemDraw (ChemDraw Professional v220.127.116.11) in that it was a 1 page wide by 3 pages high Chemdraw document. I recall that when I trialled this in a less rigorous manner last year with a previous version of iPad Chemdraw it was a 3×2 page document. Why this is so is unclear. Whatever the matter is, upon arrival in desktop ChemDraw the file was editable as expected, and the extra unused pages could be removed easily Using Document Settings. I then edited the document slightly and sent it back to the iPad via email as a .CDX file, not CDXML. This arrived back on the iPad without fuss and was immediately openable in iPad ChemDraw and was further editable. I’m not sure why PE/Cambridgesoft decided that CDXML was the preferred option from within the iPad app and not CDX but it works anyway. Just odd that you can send CDX one way and not the other.
Desktop ChemDraw for Mac
So now here is where it definitely gets a bit trickier. Tweeting Chemdraws from the desktop there is no “Share” button like in iOS so everything has to be exported to some Twitter-friendly format first. And there are lots of wrinkles to be explored. I don’t have a Desktop Twitter app on MacOSX so I just used the Web interface to Twitter. Firstly I exported the ChemDraw file as a GIF with both Interlacing and Transparency turned on. The results were quite awful, even within MacOSX. Very blocky lines for bonds, poor resolution.
Then I tweeted it in the web Twitter application. Weirdly it initially turned everything black, except for the blue imidazole ring, but then rendered the same blocky GIF in twitter preview mode as the locally saved file. However if you click on the preview image everything goes black again, except for the blue imidazole ring. This effect is also seen in my iPad in my Tweetbot timeline. The inline image preview looks OK but blocky, but click on it and the full size is black and blue.
|Transparent interlaced GIF from desktop ChemDraw in Twitter inline preview||Transparent interlaced GIF from desktop ChemDraw expanded in Twitter|
Next I tried again with transparency turned off. This resulted in a somewhat sharper quality GIF on MacOSX and an acceptable result when tweeted and viewed on Desktop Web Twitter, but still a fuzzy low quality image on Tweetbot on iPad. So it appears that the transparency is at fault, but for completeness I also saved as GIF a third time with both transparency and interlacing turned off. This did not result in any improvement or worsening of the situation.
|Non-transparent interlaced GIF from desktop ChemDraw as seen on MacOSX||Non-transparent interlaced GIF from desktop ChemDraw as seen on iPad Tweetbot|
The next export option was JPEG. In Desktop ChemDraw there is no level of control over the compression used and the result is unfortunately not very good. Screen resolution only appears acceptable in the inline preview but awful when at full size. There are lots of JPEG compression artefacts, especially at the boundaries.
|JPG exported from Desktop ChemDraw as seen on MacOSX||JPG exported from Desktop ChemDraw as seen via TweetBot|
Turning next to PNG export which in Desktop ChemDraw lets you choose a range of dpi’s. I stuck with the default of 200 or 300dpi, which not surprisingly gave a very nice result resolution-wise on the desktop, however the file is by default transparent and so gives the same problem as seen above for GIFs. That is, it appears OK in the inline preview but reverts to a black background when you click on the image both in the desktop Twitter Web app and in Tweetbot on the iPad, albeit with the blue bits in nice resolution. There is no option in Desktop ChemDraw to turn off transparency in PNG export. So PNG export is fine via the camera roll on the iPad but bad on the Desktop.
|ChemDraw PNG export as seen in Twitter inline||ChemDraw PNG export as seen in Twitter when expanded|
TIFF format export using the defaults of 300 dpi, CMYK Contiguous colour and deflate compression gave a file that had the wrong colour balance. So I changed to RGB indexed. TIFF files cannot be tweeted in desktop Web Twitter, but conversion in Preview to a JPEG worked perfectly and gave a file that had both good resolution and did not have a problematic transparency layer, either in the inline preview or when clicked, both on the Twitter desktop web client and Tweetbot on iPad. The same thing happens with a PNG file exported from ChemDraw as 300 dpi and then converted to JPEG in Preview. The transparency is lost and the file then behaves nicely in Twitter, both inline and expanded.
|ChemDraw TIFF CMYK export as viewed on MacOSX||ChemDraw TIFF RGB export as viewed on MacOSX||ChemDraw PNG exported as PNG and then converted to non-transparent JPG|
So the take-home message is this: Be very careful about transparency in your tweeted images! The results may disappoint. My personal workflow has become to export the ChemDraw file as a PNG (originally I did 300 dpi but for Twitter 200 dpi is plenty), then to post process it in MacOSX Preview as a JPG file, and post the JPG to Twitter.
I would be very interested in what happens on the Windows side of things. Feel free to let me know in the comments or tweet me @MartinStoermer with a windows-derived Chemdraw GIF, JPG or PNG detailing which is which. If you want to go and look at all my old examples you can look in my dormant Twitter account’s timeline and let me know how they all render on your devices and clients. Please note that there are also two fake copy accounts which scraped two different September 2014 versions of my Twitter bio, header file, avatar, job and website etc. Don’t look at them. They post Spam.
It turns out that this problem is not restricted to ChemDraw. I suspected that it would apply to other vector-based graphics packages when exporting images. One of the standard ones I have to hand is Adobe Illustrator. GIF export is not an option in Illustrator, but PNG is, and transparency is turned on by default. It too suffers from the blacking out issue in Twitter, but the inline previews are fine.
|An empty periodic table as a transparent PNG via Illustrator viewed inline in Twitter||Same Illustrator PNG file when expanded in Twitter|