Skip to main content

Funny flowchart reveals how to save your images – and when to burn your logos

Image file type flowchart
(Image credit: Allen Hsu)

It's all too easy to save an image using the default file type option your computer suggests. But if you want your assets to look their best and function efficiently, you're going to want to make the extra effort and save them in the correct format. To help you do that, this handy flowchart by Allen Hsu is here to offer you some advice.

Shared on the Medium profile of the UX Collective contributor, Hsu's flowchart quickly runs through how you should save a photograph, vector image or logo. If you've been confused as to whether or not you should save an image as a JPG, PNG, GIF or SVG, this is the cheatsheet for you.

According to his rough and ready flowchart (below), large images should be saved as JPGs, while smaller photographs or transparent, non-moving images should be saved as a PNG. Vector images should be saved as an SVG to ensure you meet web design standards, and moving images or graphics without gradients should be saved as a GIF.

Unlike our guide to logo design though, Hsu's flowchart also suggests that logos with gradients should be burnt instead of being saved. It's a tongue in cheek approach, but given that gradient logos are a polarising design choice we imagine that it's a popular tip.

Image file type flowchart

Couldn't be more straightforward (Image credit: Allen Hsu)

Keep in mind that this isn't a definitive guide. In the post's comments section, Medium user Leo Herzog was keen to point out that the transparent track should end in PNG, while Charlie Hayes highlighted that GIFs are often better served by being saved as a PNG.

In his defence, Hsu replied: "I am not avoiding listing out these "certain conditions", it's just easier to make them into a chart, and that is why I designed this chart. Also, GIFs are great for emails!"

And if an image you've saved or received doesn't look quite right, don't forget to check out our guide to the best monitor calibrators for designers. These tools will allow you to configure your monitor so that it displays colours as accurately as possible. Even on gradient logos.

Related articles: