“...I've been working since 2008 with Ruby / Ruby on Rails, love a bit of Elixir / Phoenix and learning Rust. I also poke through other people's code and make PRs for OpenSource Ruby projects that sometimes make it. Currently working for InPay who are based in Denmark...”

Rob Lacey
Senior Software Engineer, UK

Imagemagick creating a blank PNG

You can create a transparent PNG with Imagemagick fairly easily.

Robs-MacBook-Pro:lcf roblacey$ convert -size 200x100 xc:none transparent.png

Suppose you wanted to base64 the output to embed it in HTML

Robs-MacBook-Pro:lcf roblacey$ convert -size 200x100 xc:none png:fd:1 | base64 -i - -o -
iVBORw0KGgoAAAANSUhEUgAAAMgAAABkAQAAAADr/UKmAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAnRSTlMAAHaTzTgAAAACYktHRAAB3YoTpAAAABlJREFUSMftwYEAAAAAw6D5Ux/gClUBAMAbCigAAUr66mAAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMTEtMDdUMDI6MDE6NDcrMDA6MDCn12GlAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTA3VDAyOjAxOjQ3KzAwOjAw1orZGQAAAABJRU5ErkJggg==

Of course when I do this in HTML…..

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkAQAAAADr/UKmAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAnRSTlMAAHaTzTgAAAACYktHRAAB3YoTpAAAABlJREFUSMftwYEAAAAAw6D5Ux/gClUBAMAbCigAAUr66mAAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMTEtMDdUMDI6MDE6NDcrMDA6MDCn12GlAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTA3VDAyOjAxOjQ3KzAwOjAw1orZGQAAAABJRU5ErkJggg==">

The image is transparent and therefore you can’t see it.

This one is mildly more interesting, maybe.

Robs-MacBook-Pro:lcf roblacey$ convert -size 200x100 xc:"#000000" png:fd:1 | base64 -i - -o -
iVBORw0KGgoAAAANSUhEUgAAAMgAAABkAQAAAADr/UKmAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAnRSTlMAAHaTzTgAAAACYktHRAAB3YoTpAAAABlJREFUSMftwYEAAAAAw6D5Ux/gClUBAMAbCigAAUr66mAAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMTEtMDdUMDI6MDE6NDcrMDA6MDCn12GlAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTA3VDAyOjAxOjQ3KzAwOjAw1orZGQAAAABJRU5ErkJggg==

Wait for it…….

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkAQAAAADr/UKmAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAd2KE6QAAAAZSURBVEjH7cGBAAAAAMOg+VMf4ApVAQDAGwooAAFK+upgAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTExLTA3VDAyOjEwOjM1KzAwOjAwFMHNawAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0wN1QwMjoxMDozNSswMDowMGWcddcAAAAASUVORK5CYII=">

…worth waiting for.