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:
JPEG compression is terrible for solid blocks of colour (especially red) next to fine details. By default, Twitter compresses your PNGs to JPG. The only way to avoid it is to make sure at least one pixel is transparent. See alt text for details. pic.twitter.com/sKAVJDelT6
— Terence Eden (@edent) March 3, 2018
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?
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.
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.