How to avoid JPG compression on Twitter

@edent — Mon, 26 Mar 2018 11:30:24 +0000

Update for 2019! Twitter have changed how they compress images. Some of the techniques in this blog post may be out of date.

Let's talk image compression! Services like Twitter will often apply aggressive levels of compression in order to reduce their storage space and decrease download times. This can have negative consequences for usability and image quality.

Here's an example - this detail of a logo from my former employers, Vodafone. Solid red - with some fine detail in white:

If you upload it to Twitter, it will automatically be compressed to a low quality JPG. And this is what it looks like...

Yuck! Look at the grimy artefacts surrounding the text! By default, the image quality that most websites choose is 85%. That's not sufficient for images like this.

How To Fix It

PNGs have an interesting property that JPG images don't - they can be transparent. When Twitter sees even a single transparent pixel, it refuses to convert the original image and keeps it as a PNG.

Using GIMP - or any other photo editing tool - you can crop out a pixel from the image:

You can see a demonstration at:

If you can't bear to have a "missing" pixel - you can set a single pixel's opacity to 90%. That will also prevent compression.

Does this only work on Twitter?

Sadly, yes.

LinkedIn displays an 85% quality JPG in the preview.

They will let you see the original PNG once you click through.

In my experiments, Facebook compressed the transparent PNG to a 71% quality JPG.

That looks nasty! There appears to be no way to download the original.

ReDeCentralise

One of the advantages of hosting your own content is that you - the user - get to choose what is an appropriate trade-off between quality and filesize.

An Animation of Every Emoji

@edent — Tue, 24 Oct 2017 20:49:38 +0000

The Video

Download the WEBM version (19MB).

The Process

Mostly notes to myself, but I thought you lot might be interested 🙂

Get Every Emoji from Twemoji

Twitter maintain the Twemoji Project - it contains high quality SVGs of every emoji. They generously make them available under CC-BY.

But grabbing all the SVGs we want is a little tricky. GitHub don't make it easy to download a single directory - you usually have to download the entire repo, or a ZIP of all the files. I only wanted the SVGs from a specific folder.

What do we do in these situations? ~~HACK THE MAINFRAME~~ Cheat! Twitter has an SVN interface for compatibility reasons. We can export a specific directory using:

svn export https://github.com/twitter/twemoji/branches/gh-pages/2/svg

Convert to PNG

Next, we need to convert to PNG. We also need to resize the images because their default canvas is a miniscule 48x48px. I chose 1024x1024.

mogrify -format png -density 1024 -resize 1024x1024 *.svg

This may take a while depending on the speed of your machine.

I then moved all the PNGs to a new directory.

Rename the files

In order to turn these images into a movie, it's helpful to have them named sequentially. This is a simple(ish) one-liner which renames all the files to 0001.ext, 0002.ext, etc.

ls * | cat -n | while read i f; do mv "$f" `printf "%04d.${f#*.}" "$i"`; done

png – Terence Eden’s Blog