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

[Rss Bot 1]

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.

Couldn't be more straightforward

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:

• 5 damaging habits designers need to break
• All you need to know about SVG on the web
• 6 reasons why you should be using SVG

View the full article