Generating and sharing dynamic images on the web
The Sharing: Part 1.

I’m currently working on several client projects which generate dynamic images based on a user’s investment into a web campaign and then encourages them to share it. Depending on the concept, it may be pertinent to include a shareable image such as this. By encouraging users to share their participation in an app, they are inviting others to participate themselves. This is Internet Marketing 101.
Now, you’d think after building so many image generator campaigns that I would have the flow and technology all figured out by this point. The truth is, I typically improvise my sharing solution while developing a project and I haven’t had a good opportunity to really think about what makes a good web app image generation and sharing user experience. Seeing how I’m currently in the midst of several of these campaigns, I thought it would be wise to finally do this research for the benefit of my clients, myself, and you. The web is constantly evolving and it is very important to stay up to date with changes that may make your life easier and harder. As such, I love revisiting these simpler mechanisms and you should too.
This series of posts covers the current state of downloading and sharing images on the web, how to generate dynamic images on both the client and the server, and offers up a simple UX for sharing. In addition, I have developed a simple dynamic image generator to show all of these techniques in action. As of now, this solution is focused on Twitter, Facebook, and Instagram. It is also a bit biased to iOS. However, I believe most of the learnings are shared across the entire web platform. If you have any questions, insights, or suggestions, please share them.
Part 1: The Overlook

Dynamic Images
A dynamic image is an image that is generated using dynamic data that changes the contents of the media. (You can say they are images that are personalized to the user.) Here are a few of my past campaigns that generated dynamic images: MEDUZA Paradise, iDKHOW Stress Test, Hurts Faith Detector, and DJ Snake Taki Taki Generator.
In addition to changing the contents of the image, we might also dynamically generate images of various sizes and compositions to fit the many social network formats we might require. (Such as the timeline image format for Twitter and the story format for Instagram.)
Sharing Images on the Web
One of the top feature requests I get from clients when developing these image generator campaigns is, “Can you add some social sharing buttons at the end so users can share their images?” Every time I receive this question, I want to say “YES,” so badly, but the truth is, the reality is much more complicated. For starts, Twitter, Facebook, and Instagram do not provide a solution for directly sharing images via the web from a link or button. At least not in the way you might think.
Let’s start with Twitter and Facebook. Clearly there are a lot of images shared on these networks but how do they get there in the first place? I imagine the large majority of those images come from the official apps or 3rd party applications which have authenticated users on behalf of the network. These users select images directly from their device. I do not think building Twitter and Facebook authentication into every app I build is viable, nor do I think users should need to trade their privacy and permissions for a bit of image sharing. There are two workarounds here. 1) You can get the user to download the image from your web app and then share it. 2) You can have the user share a URL instead of the image, making sure that URLs <head>
includes the meta tags required to display a share image. Twitter calls this technique Cards and Facebook refers to them as Open Graph tags. Here’s a gist of both sets of tags. Once these are set up properly, both Twitter and Facebook provide debuggers to test how your content will look. There are a few caveats with this technique but for now, I’ll bring up the image dimensions: 1200 x 628.
I have seen Carbon use a technique on Twitter which actually uploads the image to a dummy account on behalf of the user to make the Twitter sharing experience more seamless. I LOVE the ingenuity here but there are a couple of issues worth pointing out: setup, maintenance, and the limit of image upload API calls you can make it a single day.
Instagram is much easier to understand: there is no straight-forward way to share images from the mobile web to this network from a link or button. Your best bet is to encourage the user to download the produced image to their device and then share it directly from the Instagram application.
I’ll discuss downloading next but first a quick aside. It’s worth keeping an eye on the Web Share API as it appears the solution to sharing things on the web is being standardized a bit. At the moment, most browsers only support sharing of URLs with this API but the support for images (and other files) is there. I suspect it will take some work for each network to provide entry points for these file types though. Instagram actually has a new entry point for content which prompts the user to choose between a feed or story post. However, from my testing, it was way too unpredictable from an end-user experience. I’ve got my fingers crossed for this API.
By the way, I believe the ideal setup is downloadable Instagram images for both the feed and stories and one-click meta image shares for Twitter and Facebook. This is what we’ll try to get to in this series but first, let’s talk about downloading.
Downloading Images on the Web
There are many solutions for downloading images from a computer. Including the classic instruction, “right-click and save to download.” Personally, I like using the download attribute either right in the HTML or programmatically in Javascript, depending on the use case. Things get a bit more involved once we move to the mobile web.
Now it’s worth mentioning here, when I talk about mobile web “solutions,” I don’t just mean things that work on iOS Safari. I’m also looking at other browsers (such as Chrome) and those pesky in-app browsers (WKWebView and SFSafariViewController) which seem to play by their own rules. I’m aiming for one solution which works across all touch points.
iOS has always allowed users to download images using the “tap and hold” method. The user presses and holds on an image until an iOS dialogue appears, allowing them to save the image to their photo library. Even though the download attribute is now available on iOS, it isn’t clear a download is happening on SFSafariViewController so I believe the “Tap & Hold” technique is still best.
The Tap & Hold Button
While researching the best download method for mobile, I noticed GIPHY was using a “tap & hold” button hack. This method places a fake button with pointer-events set to none on top of an image file. When the user taps and holds this button, the user is actually tapping and holding on the image, causing the iOS image download dialogue to appear. Here’s a CodePen.IO showing the construction of a “tap & hold” button. You may visit the pen directly from your iOS device to try it out.