Optimizing Images With TinyPNG and Workflow

Whenever I include images or screenshots within the body of a blog post, I resize them so they aren’t unnecessarily large. iPad Pro screenshots, for instance, are 2732x2048px and often larger than 1MB. There’s no need to share these images full-size, so I reduce their dimensions to something like 1024x960px. This usually gets the file size down to around 200KB.

Back when I used a Mac to write blog posts, I would have also taken the step of optimizing the images using ImageOptim. This app uses clever compression techniques to reduce the file size while preserving quality. It was a simple drag-and-drop process that could drastically reduce the file size further. I haven’t yet found an equivalent iOS app that does something similar, so image optimization isn’t something I’ve been doing.

However, there are web services that perform image optimization. One such service, TinyPNG, has an API that can receive images and return a URL to an optimized version. Using Workflow’s recent API support, I’ve created this workflow that both resizes and optimizes JPG or PNG images using the TinyPNG API. When the action extension workflow is run, there’s an option to resize the image (using Workflow’s built-in image resize action), after which it’s uploaded to TinyPNG for optimization. An alert displays the difference in file size before the optimized image is downloaded. TinyPNG uses randomly-generated filenames, so you’re asked by the workflow to specify a new one.

The following PNG screenshot, resized to 1024x960px, was originally 202KB. After optimization, it’s just 57KB.

TinyPNG is free to use if you’re optimizing up to 500 images per month, which is plenty for most bloggers. As with most API services, you need an API key to use TinyPNG (the workflow has an import question that prompts for this).

Before you start optimizing images, keep in mind that TinyPNG is a web service and you’re uploading images to a third-party. It’s entirely up to you about what images you feel comfortable optimizing. I’m happy to use this for any public images and screenshots I’d share on my blog anyway, though I wouldn’t use it to optimize images that contain sensitive information (scans of passports, screenshots of bank account details, etc.).

Revisiting Workflow’s IFTTT Functionality

Although Workflow’s recently added support for API interaction, it’s already been possible to create workflows that interact with many online services already, albeit in a more basic way. Back in June, Workflow added support for IFTTT, a web automation service that makes it simple to connect hundreds of different services to each other.

IFTTT functionality within Workflow is something that I feel is too easily overlooked. I rarely see any workflows that make use of this integration, and even I don’t make much use of it. In fact, the only workflow at Workflow Directory that uses IFTTT is one that I wrote to demonstrate its functionality—a workflow that triggers an IFTTT recipe to call your phone and get you out of an awkward situation.

Workflow’s API support opens up so many possible uses but it can get really complicated very quickly. It’s worth keeping in mind that some of the functionality you’re looking to achieve could be done much more easily with IFTTT1. After spending some time exploring what’s possible, I’ve created some examples of IFTTT-powered workflows that demonstrate the usefulness of this action.

Post to Medium

Only a handful of iOS apps support posting to Medium, each of which has slightly different limitations or requirements. Using Workflow, it’s possible to send Markdown-formatted text from almost any app and post it to Medium. Thanks to IFTTT’s extensive Medium support, it’s also possible to specify tags, publication ID, and even a canonical URL if you’re cross-posting a piece you’ve published somewhere already. Interestingly, IFTTT’s support for Medium is actually better than most iOS apps that provide some sort of Medium integration.

This workflow, used as an action extension with any Markdown-formatted text, uses this IFTTT recipe to create a published post on Medium. The workflow prompts for a title, tags, and canonical URL (if required) during the process before it’s published. If you prefer, you can edit the recipe so that the post is unlisted or also added to a publication.

If you edit the recipe to have IFTTT create a draft post instead, tags are not included and need to be added when you edit the draft.

Create GitHub issue

I’ve covered using the GitHub API in Workflow before, but you don’t need to start delving into that if you just want an easy way to create GitHub issues. Using this workflow and IFTTT recipe, you can create an issue within the GitHub repository you specify. There’s also provides an option to include a photo or screenshot when creating the issue. To accommodate this, the workflow uploads it to Dropbox and gets a direct link to use within the issue description.

Creating a GitHub issue using Workflow and IFTTT

Subscribe to RSS feed in NewsBlur

This workflow makes me wish I had spent more time looking into Workflow’s support of IFTTT. I’d been looking into the NewsBlur API to create a workflow that subscribes to a site I provide, but this is something that I can do just by using IFTTT. This workflow makes use of this recipe and detects the RSS feed of a website, then passes it to NewsBlur to subscribe to.

  1. There might even be services that you want to make use of which don’t have a public API but are available through IFTTT. 

Using Workflow to Perform OCR

Microsoft’s Cognitive Services (née Project Oxford) is an interesting collection of APIs that leverage machine learning to determine useful information about any provided data. One useful example of the APIs available is the Computer Vision API. It offers OCR functionality that detects any readable text within an image and outputs the results as plain text. Thanks to Workflow’s new API support, we can harness the power of machine learning to perform some very quick, and very accurate, text recognition.

This workflow prompts you to either select a photo or take one with the camera, then uses it to make an appropriate API request. The detected text is returned back and displayed as plain text that can be easily shared or copied to the clipboard.

OCR of a Notes screenshotOCR of a photo taken of a page in a book

Cool, right? Well it gets even better. The Computer Vision API can OCR images containing text in different languages so Workflow can also translate the detected text into our chosen language. The workflow includes a Translate Text action so you can try this for yourself.

After the OCR process, text can be translated within Workflow

This is really useful, especially when traveling. For instance, if you’re on vacation and are wondering what a street sign means, just run this workflow and take a photo, and you’ll get a translated version of the text.

Similar to other API services, an API key is needed to authenticate your requests. Just register for the service and copy/paste the appropriate subscription key for Computer Vision. There are also some size limits (both file and resolution) you need to consider so I recommend reading through the relevant documentation.

Workflow and APIs

In what is most certainly an early Christmas present for people like myself, Workflow has just received one if its most significant updates-extensive support for making API requests. I can’t emphasize enough how useful this is and the impact it’s going to have when it comes to iOS automation.

Workflow’s “Get Contents of URL” action has been overhauled to provide support for GET, POST and PUT request methods, including custom header information. The action also features an easy-to-use way of creating a request body that handles the formatting and escaping of values automatically. This opens your workflows up to all kinds of interactions with many APIs, such as Stripe or GitHub.

To demonstrate just how powerful this revamped action can be, I’ve created a few example workflows that leverage some popular APIs. These examples don’t perform any sort of error handling, nor do they represent what the limits of Workflow are. Consider these workflows a starting point for building your own.

A word about API keys

Keep them secret, keep them safe.
– Gandalf the Grey hat

Interacting with an API almost always requires some sort of API key or token. This is usually a string of random characters that can be used to directly perform actions on behalf of your account. If someone were to obtain this, they can not only access your account information but also perform actions on your behalf.

If you create a workflow that you want to share, make sure to remove your API key from it beforehand!

GitHub: Create Gist

This is a workflow I’ve always wanted to create, and the new API support makes it possible. Gists are great to share small pieces of text information, such as code snippets or scripts. This action extension workflow accepts files of any type (though they must be text-based) and creates a gist using the GitHub API.

You need to create a GitHub personal access token before you can use this workflow. GitHub allows you to create multiple access tokens with different permissions. For the purpose of this workflow, I recommend creating a token that can only be used to work with gists.

Stripe: Get Recent Charges

Stripe is a payments platform that’s built for developers. This workflow retrieves some basic information about the last three charges processed on your Stripe account, such as:

  • Charge ID
  • Amount
  • Last four digits of the card used

To use this workflow yourself, include your test or live secret API key, depending on whether you want to retrieve test or live payment information.

Stripe: Create a Payment

This is an excellent demonstration of Workflow’s API support–use Workflow as a point-of-sale device! This workflow prompts you to enter credit card information and an amount to charge, along with some additional information, then creates a payment.

Create a payment on Stripe using Workflow

A notification is displayed once the payment has been processed and a link to the payment in your Stripe Dashboard is copied to the clipboard.

A payment created with Workflow

Stripe: Create a Customer

Moving on from creating payments, this workflow creates a customer object using the information you provide. A link to the customer object in your Stripe Dashboard is also copied to the clipboard.

Digital Ocean: Create Droplet

Digital Ocean is a cloud computing platform that makes it easy to deploy a server (droplet) in just a few seconds. Using its API, this workflow creates a new droplet using the information provided, such as the Linux distribution, how much RAM it should have, and the datacenter location.

Digital Ocean: Get Droplets Info

This workflow simply retrieves a list of all your current droplets and provides the following information for each:

  • Name
  • ID
  • IP address
  • Status

Watermarking Images With Workflow

Although Workflow doesn’t currently have a built-in action specifically for watermarking, there are a couple of ways to accomplish this with just a little preparation.

Using the Edit Image action

Workflow has a capable image editor built-in already, powered by Aviary, which is invoked using the Edit Image action. There’s a text tool within Aviary that provides control over the placement and style of text in an image. The only drawback is that the text cannot be automatically specified–it has to be entered each time.

A workaround is to include a Text action with the text to use, then have Workflow copy it to the clipboard before the rest of the workflow Is run, as shown in this example workflow. All you then need to do is paste it into the editor’s text input field.

This method works great if you just need to occasionally watermark an image. If you want to fully automate the process and/or work with multiple images, there is a better solution.

Using the Overlay Image action

It’s possible to create a workflow that can automate the entire process of adding a watermark to images using the Overlay Image action, a more recent addition to Workflow’s collection1. This particular action is very customizable, providing options for the dimensions, location and angle of the overlaid image2.

Although Workflow cannot generate an image file from text, we can just create one in advance and use it within the workflow. I created a watermark in Pixelmator and saved it as a transparent PNG (delete the background layer before exporting). I recommend making the canvas size (and text) suitably large, around 2000-3000px wide, so that it can be used in images of all different sizes (Workflow will resize the image down accordingly).

With a watermark already created, it’s simply a matter of overlaying the watermark onto the target image. At this point, we could use the Overlay Image action’s option of Show Image Editor and manually drag and resize the watermark, but we can do better than this. Instead, Workflow can get the height of the target image, then set the size of the watermark to a proportional height.

In this example workflow, I’ve specified that the watermark be placed on the lower-left, at a height of 10% of the target image. The width is automatically scaled, and the opacity is set to 90%. The watermark is stored in the /Workflow directory on iCloud Drive, as workflow.png.

The entire process is fully autonomous and works with multiple images. You could take this workflow even further and include options for selecting whether a black or white text overlay should be used, as well as varying the angle and location of the text (if you prefer a full-size diagonally-placed watermark, for example).

  1. This action was added to Workflow 1.4.4. 

  2. It basically made my Screenshot Builder workflow obsolete. 

Some Workflows for Working Copy

Back in March, I wrote about how I manage updates to this website with Git and iOS, thanks to the app Working Copy. I only touched upon the URL scheme that the app provides, as I began writing blog posts directly within the app.

Since then, I’ve created a few workflows based upon the apps’s URL scheme to better serve my needs (I now use Ulysses to write blog posts), and demonstrate how powerful an app Working Copy is.

Basic workflows

  • Initialize a new repository: Initializes a new repository containing an empty README
  • Pull all repositories: Performs a pull command to fetch and merge changes (from origin) on all repositories within Working Copy
  • Pull repository: Performs a pull command to fetch and merge changes (from origin remote) for a specific repository within Working Copy

Ulysses blogging workflow

If you’re wanting to replicate some of my process of writing in Ulysses and then sending that content into Working Copy, you can download a copy of my current workflow. The workflow is an Action Extension that is run from within Ulysses (making sure that the exported text is being viewed in Markdown format). A few things to consider:

  • This has been specifically tailored to my blogging setup, so you’ll very likely need to make some fundamental changes, and much of this workflow may not be necessary. However, this workflow can still serve as a good starting point for a Ulysses & Working Copy combination.
  • The title of the blog post should be in a Markdown H1 tag, as this is sets the name of the blog post when exported but is stripped from the text as its processed by the workflow1.
  • Speicfy whether the blog post is a linked post or a normal one. If it’s a linked post, all the links are displayed in a list. The one selected is used as the post’s link.
  • Images used within a blog post aren’t currently supported. I haven’t got around to this just yet as my existing image workflow that operates outside of Ulysses is still something I use, and I rarely use images within blog posts. This is something I’ll be working on, eventually.

With that, you can still test this workflow and see exactly what it does by creating an empty repository within Working Copy and updating the repository name within the workflow.

  1. This is only necessary if the title of your blog post is handled by your blogging platform in a specific way. If you want to retain the title, or you don’t use one within the body of your post, you can remove this entire section. Credit for the Regular Expression syntax goes to Federico Viticci. 

A Personal Podcast Feed With Workflow

After creating a static blog generator in Workflow that also generates an RSS feed, I started toying with the idea of using Workflow to create a personal podcast feed that I can curate and add individual episodes to, in much the same way as Huffduffer.

The result of this is a workflow to create your own private Dropbox-hosted podcast feed and add links to individual podcast episodes you come across on the web, without needing to subscribe to each individual podcast, and it even works with DRM-free audiobooks.

The resulting Workflow-created feed in Podcasts

Get the Personal Podcast Feed Workflow.


To use this workflow, navigate to a podcast’s episode page (for example, a recent episode of Upgrade on Relay FM) and then run this as an action extension. The workflow will do its best to detect the title and description of the podcast, as well as the link to the audio file, all of which are displayed in an input dialog so they can be confirmed when running. If it can’t automatically detect any specific information, you can still enter it manually.

Getting the title

The workflow outputs two files to your Dropbox /Public folder:

  • podcast-feed.txt
  • workflow.rss

Every time you add a podcast episode, it’s prepended to the podcast-feed.txt file – this is the list of all the podcast episodes you’ve added which the workflow uses when creating theworkflow.rss feed each time.

The workflow only needs three pieces of information to add an episode or audio file:

  • Title
  • Description
  • Link to audio file

If it can’t detect them automatically, the text input dialog will simply be blank for you to manually provide them.


Both of these files are placed in the Dropbox Public folder so that the direct public link to the RSS feed can be used when subscribing1. You can get this from the Dropbox web interface by selecting the workflow.rss file and then “Copy Public Link”.

Add the direct link of the RSS feed to your podcast app of choice and any time you add an episode using this workflow, your podcast app will download it the next time the feed is refreshed2.


A couple of things to keep in mind when using this workflow:

  • Every podcast website works differently and there’s no standard layout for providing a podcast episode link or its show notes. I’ve tested this workflow with a variety of different shows, both on podcast networks and individual offerings, and added some fallbacks for detecting the direct audio file link3.
  • Similarly, show notes are tricky because of the way they are often formatted. Instead, this workflow will pull a short description of the episode and include a link to the episode page.
  • It won’t be able to detect any information if you run it directly from within podcast apps if you try and share a show – this workflow only supports visiting a particular show’s episode page.

Further Usage (Private audiobook feed, anyone?)

Similarly, you could make some tweaks to this workflow and use it to create your own podcast RSS feed, directly on your iOS device. As a basic podcast workflow, you could:

  • Record an episode in Voice Memos and then save the recording to Dropbox
  • Add the recording as a podcast episode to a feed using this workflow
  • Provide the RSS feed for people to subscribe to

Going beyond podcasts, you can use this to add any audio file you come across on the web. For simplicity, this workflow filters out anything that isn’t an MP3 or M4A file, and none of the episode detection is required. Each step requires confirming the text or filling in the blanks, so you could simply run this as a normal workflow and enter the title and description, along with a direct link to an audio file.

If you’ve got an audiobook in a DRM-free MP3 format, for example, you could host it on Dropbox and then add each file using this workflow. This is a great way to use Overcast‘s speed features with audiobooks.

Using Overcast as an Audiobook player

  1. The standard Dropbox link generated by Workflow or the Dropbox iOS app isn’t a direct link to the RSS feed and won’t work. There are ways to get the direct link from a Dropbox link by swapping out the www.dropbox.com with dl.dropboxusercontent.com but I couldn’t say for certain if the link would ever change as the file changes. The Dropbox Public folder, however, is much better suited for long-term direct linking. 

  2. During testing, the Apple Podcasts app would pick up the feed changes instantly. Overcast takes a little longer, likely as it has a fixed schedule for checking feeds, so an episode might not appear the moment you add it, but it will do shortly. 

  3. This workflow has three different methods it will try to detect an audio file, each with an increasing level of unreliability. Sometimes, it just isn’t possible but you can always copy the direct link and try again. 

Using Workflow as a Static Site Generator

There are many static site generators available in a variety of programming languages that you can run on a computer or web server, such as Jekyll and Pelican. These types of tools will take your content, usually in the form of Markdown-formatted text files, and generate a complete HTML website that you can upload to your web server. The benefit of a static site over something like WordPress is that it doesn’t rely upon any server-side code and can be hosted almost anywhere.

There isn’t, however, one that I could find for iOS, so I set out to see if it were possible to create one in Workflow. While this should be considered more a “proof of concept” than anything else, I’m actually quite surprised how well this turned out and it’s very, very usable.

Here’s a working demo containing 50 randomly generated blog posts (hence the gibberish) and some sample pages.

Get the workflow.

###How it Works

When planning to build a static site generator in Workflow, I decided to build one around the concept of a blog. A Typical blog has posts, pages and an RSS feed, so I designed it to do the following:

  • Allow the user to set site’s title, URL, name of the author and footer text.
  • Get the contents of a directory of blog posts in Markdown-formatted text files, determine the date and title of each post and generate the necessary HTML pages.
  • Get the contents of a directory of pages in Markdown-formatted text files, determine the name of each page, build a navigation menu and generate the necessary HTML pages.
  • Create an index.html file using the site information, include the navigation menu and the contents of the most recent blog post. All previous blog posts are listed below with a link and date published.
  • Create an RSS feed that includes the 10 most recent blog posts.
  • Be a simple, yet decent-looking site with no additional assets, save for a generated CSS stylesheet containing the styling for the site, referenced by all HTML pages (the stylesheet also includes Normalize.css).

After running the workflow, a ZIP file is generated containing all of the HTML files and can be opened in an app like Transmit, the extracted contents of which can be uploaded to your web server.


The structure of a generate site is:

  • index.html
  • {blog-post}.html
  • {page}-page.html
  • feed.xml

All of these are located within the same directory, so a “Hello World” blog post would be at hello-world.html.

###RSS Feed

Yes, there’s even an RSS feed. It’s actually an Atom 1.0 feed, and is generated at feed.xml.

###Text File Naming

The purpose of the workflow was not only to achieve the technical functionality of a static site generator, it needed to be usable by iOS standards. With that, formatting the text files is very simple and only requires a directory in Dropbox to be used that contain just two directories – “posts” and “pages”.

Blog posts simply need to be saved in Markdown-formatted text files in the “posts” directory with the date (in the format of YYYYMMDD) and title of the post or page as the file name, separated by two underscores. For example, a blog post titled “Hello World” published on the 1st Jan 2016 would be saved as:

20160101__Hello World.txt

Workflow splits the filename and uses the date for the published date of the post and the name as the title (hence the capitalisation).

For pages, you would simply omit the date and separator, and save to the “pages” directory:

About Me.txt

With that, no two blog posts or pages can have the same name, otherwise it will result in the older post overwriting the new one.

###Using the Workflow

Before using this workflow for the first time, there are just a couple of options to configure:

  • Specify the correct location of your root directory containing the “pages” and “posts” directories. The default is Workflow/static/, so blog posts would be located within Workflow/static/posts.
  • Ensure your blog posts are in the appropriate format (see below).
  • Update the workflow with your site name, URL and your name.

After the initial setup, the workflow can be run at any time and it will process all of the available blog posts and pages, create the necessary HTML and output a complete ZIP file.

When it comes to updating the site, you can simply run the workflow again and upload the contents of the ZIP file, overwriting any files there.


The design of the site is quite simplistic though have full control over the site’s CSS within the workflow. I designed the template, based upon this site, using Coda for iOS, and you can edit it however you see fit.


The workflow isn’t particularly fast, though the demo site I created, containing over 50 blog posts, took about 90 seconds to generate. Again, this is a proof of concept but if you’re planning to use this, it’s not too slow.

###Bugs and Limitations

While I’ve done quite a bit of testing during my time working on this, it’s likely that there are going to be instances where the workflow just isn’t best suited for your needs, so it should be considered completely unsupported.

###Demo Content

To demonstrate how to use this workflow, I’ve made the sample content from the demo site available on Dropbox so you can get started and test it out.

Getting Healthy with Workflow

With the end of 2015 almost upon us, it’s time to make well-meaning new year resolutions about our health. Sticking to them, however, is easier said than done, so I thought I’d share some workflows that I created for Workflow which manipulate Health data, many of which I use on a daily basis.

Don’t forget, all of these workflows can be used as-is, but the real benefit comes from tinkering and changing them to best fit your own requirements.

###Log Calories by Scanning a Barcode

This is one of my favourite workflows and really takes advantage of some of the features that makes Workflow such a joy to use. Using information from the Nutritionix USDA common foods database, you can scan the barcode of almost any US grocery item to find its calories and log them to Health. You can alter the serving size accordingly, which will adjust the calories calculated before logging them to Health. If no information can be found, or you don’t have a barcode handy, the workflow will ask you if you’d like to manually enter calorie information instead.

You’ll need to register for a free Nutritionix developer account and update the workflow with your API keys, and barcode scans are limited to 20 requests a day.

Calorie information for most US grocery items, along with the recommended serving size, can be determined

Manually Log Calories

Another favourite of mine can be run directly on your Apple Watch. Nutritionix only has widespread support for US grocery items, so anyone living outside the US will almost always have to log calories manually. To make this easier, this workflow can be run from either the Today Widget or Apple Watch to input the estimated calories consumed for a particular snack or meal, which is then logged to Health.

Apple Watch

###Daily Health Report

This workflow can be run directly from the Today Widget and will display your total step count, flights climbed, walking + running distance, calories logged for the day and most recent weight. A great way to get some at-a-glance information about how you’re doing today.

A daily health report in the Today Widget

Monthly Weight Report

This workflow compares your most recent weight to that of 30 days ago and displays the results in a message. Just a quick way to see how your weight compares since last month.

Monthly Weight Report in the Today Widget

###Monthly Weight Chart

While the Health app will display some basic chart information, it’s not very customisable and intuitive. This workflow is based upon my Create a Chart workflow and will create a chart of your weight based upon how many months you specify, output as an image.

I save the resulting chart into Day One each month so I can look back at my progress over the months (and, eventually, years).

Weight chart example for a 12 month period

Creating Device-Framed Screenshots in Workflow

Update: This workflow has since been replaced with one that uses Workflow’s Overlay Image action. You should use the new workflow instead.

I spent some time over the holidays catching up on a selection of previous Club MacStories newsletters and came across a reader question in the Workflow Corner section of Issue 10:

Is there any way to build a workflow that would put the latest screenshot into an iPhone or iPad frame?

Federico Viticci response was that there isn’t a fully autonomous way of placing a screenshot inside an iOS device frame, suggesting instead to use an app like Pixelmator and Apple’s official product marketing images.

Federico isn’t wrong – there isn’t really any way to automate the placement of a screenshot inside an existing image of something like an iPhone or iPad using something like Workflow. However, if we come at this from a different angle, it actually is possible to achieve the desired result with Workflow.

Instead of looking to insert a screenshot inside device image, a screenshot can be “wrapped” by slicing a device image beforehand. Then, with some creative use of the “Combine Images” action and a few variables later, it’s possible to wrap a screenshot in a way that results in a perfect image of an iOS device containing a screenshot.

An example using this workflow

I’ve created this Screenshot Builder workflow and the necessary image assets that you can use to frame a screenshot with the iOS device of your choice. This is achieved by slicing the device image into four distinct segments (top, bottom, left and right sides), as the following screenshot (with some added padding) will show:

See how the device has been split into four distinct pieces

I spent some time slicing the images available from Apple so that the workflow can provide support for:

  • iPhone 6s
  • iPhone 6s Plus
  • iPad Pro
  • iPad Air
  • iPad mini
  • iPod touch
  • Apple Watch

Each iOS device has an option (and assets) to use either Silver or Space Gray colours (with the exception of the iPod touch, which offers Blue and Silver options) and will automatically detect if a screenshot should be in portrait or landscape.

Using this Workflow

This workflow requires the pre-made image assets I’ve created be saved to Dropbox so it can use them when creating these device screenshots. To do this, use this Dropbox link and add the folder (screenshot-builder) to your Dropbox account (click Download, then Save to my Dropbox). You’ll need to update the Dropbox action in the workflow if you move this from the root of your Dropbox folder.

Once the above has been done, simply run the workflow and select the device, its colour and the screenshot that you’d like to create.

Apple Watch with CARROT WeatherApple Watch with CARROT Weather

iPhone 6s Plus with OvercastiPhone 6s Plus with Overcast

iPhone 6s Plus with Alto's AdventureiPhone 6s Plus with Alto’s Adventure